7.19 BOM DOM

1. BOM(管理窗口与窗口之间的通信)

窗体控制

• moveBy(x,y)——从当前位置水平移动窗体x个像素，垂直移动窗体y个像素，x为负数，将向左移动窗体，y为负数，将向上移动窗体
• moveTo(x,y)——移动窗体左上角到相对于屏幕左上角的(x,y)点，当使用负数作为参数时会吧窗体移出屏幕的可视区域
• resizeBy(w,h)——相对窗体当前的大小，宽度调整w个像素，高度调整h个像素。若是参数为负值，将缩小窗体，反之扩大窗体
• resizeTo(w,h)——把窗体宽度调整为w个像素，高度调整为h个像素

窗体滚动轴控制

• scrollTo(x,y)——在窗体中若是有滚动条，将横向滚动条移动到相对于窗体宽度为x个像素的位置，将纵向滚动条移动到相对于窗体高度为y个像素的位置
• scrollBy(x,y)—— 若是有滚动条，将横向滚动条移动到相对于当前横向滚动条的x个像素的位置(就是向左移动x像素)，将纵向滚动条移动到相对于当前纵向滚动条高度为y个像素的位置(就是向下移动y像素)

窗体焦点控制

• focus()—— 使窗体或控件获取焦点
• blur()——与focus函数相反，使窗体或控件失去焦点

新建窗体

• open()——打开(弹出)一个新的窗体
• close()——关闭窗体
• opener属性——新建窗体中对父窗体的引用，中文"开启者"的意思

2. DOM（HTML和XML文档的编程接口）

对话框

alert(str)
复制代码

确认框 点击按钮后有返回值 true、false

confirm(str)
    var tag = confirm('确认关闭吗？');
复制代码

3. 获取元素

• getElementById一个dom对象
• getElementsByTagName类数组
• getElementsByName类数组
• getElementsByClassName类数组

4. 事件

1. 事件

事件	解说
event.preventDefault	阻止默认事件（return false）
e.target	事件源 触发当前事件的源头（与this不必定相等 事件冒泡）
event.onclick	鼠标点击时触发此事件
event.ondblclick	鼠标双击时触发此事件
onmousedown	按下鼠标时触发此事件
onmouseup	鼠标按下后松开鼠标时触发此事件
onmouseover	当鼠标移动到某对象范围的上方时触发此事件
onmousemove	鼠标移动时触发此事件
onmouseout	当鼠标离开某对象范围时触发此事件
onkeypress	当键盘上的某个键被按下而且释放时触发此事件.
onkeydown	当键盘上某个按键被按下时触发此事件
onkeyup	当键盘上某个按键被按放开时触发此事件
addEventListener('事件',function(){},false)	监听事件 能够给元素绑定多个相同事件 (false事件冒泡,true事件捕获)

2. 绑定事件

oDiv.onclick = function(){}
复制代码

• 监听事件 能够给元素绑定多个相同事件 (false事件冒泡,true事件捕获)

addEventListener('click',function(){},false) 
复制代码

5. 事件对象属性（鼠标）

属性名	值类型	读/写	描述
clientX	Integer	R	事件发生时，鼠标在客户端区域的X坐标，客户端区域是指页面可视区域
clientY	Integer	R	事件发生时，鼠标在客户端区域的Y坐标
screenX	Integer	R(IE) R/W(W3C)	相对于屏幕的鼠标X坐标
screenY	Integer	R(IE) R/W(W3C)	相对于屏幕的鼠标Y坐标

6. offeset属性

offsetTop最近的已定位的祖先元素顶部距离 最后body

offesetLeft最近的已定位的祖先元素左侧距离 最后body

7. 节点

名称	节点类型
Node.ELEMENT_NODE（1）	元素节点
Node.ATTRIBUTE_NODE(2)	属性节点
Node.TEXT_NODE(3)	文本节点
Node.COMMENT_NODE(8)	注释节点
方 法	描 述
nodeValue	节点的值 元素节点此属性为空，文本节点些属性即为节点中的字符串，属性节点返回属性值
nodeType	节点类型 1 2 3 8
firstChild	指向在childNodes列表中的第一个节点
nextSibling	指向后一个兄弟节点；若是这个节点就是最后一个兄弟节点，那么该值为null （标准浏览器包括换行空格 IE浏览器找到元素节点）
nextElementSibling	下一个元素节点 IE不支持
previousSibling	指向前一个兄弟节点；若是这个节点就是第一个兄弟节点，那么该值为null
previousElementSibling	前一个元素节点 IE不支持
children	查找全部子节点 返回类数组
appendChild(node)	将node添加到childNodes的末尾
innerHTML	设置或返回表格行的开始和结束标签之间的 HTML
removeChild(node)	从childNodes中删除node
eplaceChild (newnode,oldnode)	将childNodes中的oldnode替换成newnode
insertBefore (newnode,refnode)	在childNodes中的refnode以前插入newnode
createElement (tagname)	建立标签名为tagname的元素
createTextNode(text)	建立包含文本text的文本节点
getAttribute(name)	拿到属性
setAttribute(name, newValue)	建立属性 html元素可见 p.属性 不可见
removeAttribute(name)	删除属性

8. this

1. 函数中 this是 window
2. 定时器 this是 window
3. 对象 this是当前对象
4. 构造函数 this 是实例化对象
5. 事件绑定 this 绑定事件的那个dom对象
6. 改变this

   • call( ) 方法 改变指针 第一个参数是一个要改变指针的对象，后面的参数是方法须要的参数

   • apply( ) 方法 改变指针 第一个参数是一个要改变指针的对象第二个参数时一个数组，数组里是方法的参数

   • bind( ) 方法 改变指针 第一个参数是一个要改变指针的对象，后面的参数是方法须要的参数

   • call 和 apply 会自动调用方法 bind须要手动调用方法

f1.call(oDiv,22,33);
    f1.apply(obj,[1,2]);
    f1.bind(oDiv,22,33)();
复制代码

9. dom属性设置与获取

1. 给一个dom元素设置自定义属性的方法

oDiv.key = value

oDiv.setAttribute(key, value)

oDiv.dataset.key = value

<div data-key=value > </div>

2. 获取dom元素自定义属性方法

`oDiv.getAttribute(key)`

`oDiv.key`

`oDiv.dateset.key` key须要用驼峰写法
复制代码

3. 区别

setAttribute/dataset 能够在html中看到

oDiv.key 在html中看不到