JavaScript（4）- DOM

DOM：文档对象模型 （Document Object Model ）

1.获取、设置属性值
getAttribute(“属性名”) 获取属性值
setAttribute(“属性名”,“新的属性值”) 设置属性值

2.获取子元素
childNodes（） 包含空节点
children（） 不包含空节点
第几个子节点： childNodes[index] / children[index]
第一个子节点：firstChild
最后一个子节点：lastChild
firstElementChild 不包含空的第一个子节点
lastElementChild 不包含空的最后一个子节点

3.parentNode() 获取父节点
offsetParent：第一个有定位属性的父节点，如果没有则返回body .

4.访问兄弟节点
nextSibling 下一个兄弟节点包含空节点
previousSibling 前一个兄弟节点包含空节点
nextElementSibling 下一个兄弟节点，不包含空节点
previousElementSibling 前一个兄弟节点，不包含空节点

5.插入节点
创建元素节点：document.createElement(“要添加的节点标签名”)
在父节点的内部后面插入新节点：父节点.appendChild（新节点）
insertBefore（新节点，子节点） 把新节点内容添加到子节点的前面

6.删除节点
从父元素中删除子元素：parent.removeChild(child);

7.替换节点

oldnode.parentNode.replaceChild(newp,oldnode);    //  用oldnode的父元素来替换

8.事件
事件冒泡：从里面往外面冒；
事件捕获：从外面往里面走。

阻止事件冒泡：
1、event.stopPropagation（）; 阻止冒泡
2、event.preventDefault（）; 阻止默认事件
阻止超链接默认事件：<a href="javascript:void(0)">百度</a>
3、return false；阻止默认事件，阻止冒泡事件。

详情可戳：DOM事件模型