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
- 函数中 this是 window
- 定时器 this是 window
- 对象 this是当前对象
- 构造函数 this 是实例化对象
- 事件绑定 this 绑定事件的那个dom对象
- 改变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中看不到
