--- - **document** - 功能 - `getElementById` `$('#aaa')` - `getElementByTagName` `$('div')` - `getElementsByClassName` `$('.aaa')` - `getElementsByName` 只用在表单元素中 - **document object** - 属性： - `className`，`style` - `id` - `name`,`value`(表单元素) - `href`,`src`…(对应的元素) - `innerHTML` - `children` - `parentNode` - 功能方法： - `setAttribute/getAttribute` - `appendChild` **1.DOM与节点的关系：** ------ - node: - `childNodes[]` - `parentNode` - `firstChild` - `getElementsByTagName('元素标签')` - `lastchild` - `nextSibling` - `previousSibling` - `children[index]` `children` 不是`w3c`标准 但是各大浏览器兼容性很好 - 通过给原型添加方法在元素后面创建标签 **2.DOM方法小结** ------ - `cloneNode` 返回当前节点的拷贝 - `createAttribute` 创建新的属性 - **插入节点** - - `node.insertBefore()` - `node.insertAdjacentElement()` - **删除节点** - `node.remove()` - `node.removeChild()` - `node.removeNode()` - **替换节点** - `node.replaceChild()` - `node.replaceNode()` - `node.swapNode()` - `node.cloneNode(bAll)`返回复制复制节点引用 - `node.contains()` 是否有子节点 - `node.hasChildNodes()`是否有子节点 <br/> **3.常用事件** *** - `onclick:`当事件源被点击的时候调用处理程序 - `onmouseover:`鼠标进入事件 - `onmouseout:`鼠标移出事件 - `onmousedown:`鼠标按下去的时候 - `onmouseup:`鼠标抬起来的时候 - `onscroll:`当事件源滚动条滚动的时候 - `onkeydown:`当键盘按下的时候 - `onkeypress:`当键盘按下去的时候 - `onkeyup:`当键盘弹上来的时候 - `onfocus:`当事件源获得光标 - `onblur:`当事件源失去光标 - `onchange:`当事件源`blur`的时候内容改变了的话