DOM基础

1. DOM获取节点

　　1)通过childNodes获取子节点
　　　　属性：childNodes nodeType
　　　　如果子节点中有文本节点,会同时返回文本节点。这时需要搭配nodeType，才能滤掉文本节点,只返回元素节点。

　　2)通过children获取子节点
　　　　属性：children
　　　　只会返回所有的元素节点,不会返回文本节点。

　　　　何谓文本节点？
　　　　文本节点: 没有任何标签包含的字符串或空串。

　　3)获取父节点
　　　　属性：parentNode

　　4)获取相对定位的父节点
　　　　属性：offsetParent

　　5)获取首尾子节点
　　　　获取首个子节点：firstChild、firstElementChild
　　　　获取末尾子节点：lastChild 、lastElementChild

　　　　注：firstChild和lastChild有兼容性问题,建议使用firstElementChild 和 lastElementChild。

　　6)获取兄弟节点
　　　　获取后一个兄弟节点：nextSibling、nextElementSibling
　　　　获取前一个兄弟节点：previousSibling、previousElementSibling

　　　　注：nextSibling和previousSibling有兼容性问题,建议使用nextElementSibling 和 previousElementSibling。

2. 操纵DOM元素属性

　　第一种：oDiv.style.display="block";

　　第二种：oDiv.style["display"]="block";

　　第三种：Dom方式
　　　　获取：getAttribute(名称)
　　　　设置：setAttribute(名称, 值)
　　　　删除：removeAttribute(名称)

3. DOM元素的创建、插入、删除

　　1)创建DOM元素
　　　　createElement(标签名) 　　　　　　　　　　　　 创建一个节点

　　2)插入DOM元素
　　　　appendChild(节点) 追加一个节点
　　　　insertBefore(节点, 原有节点) 　　　　　　　　　  在已有元素前插入

　　3)删除DOM元素
　　　　removeChild(节点) 删除一个节点

4. 文档碎片(很少使用)

　　1)创建文档碎片
　　　　document.createDocumentFragment()

　　2)说明
　　　　如果需要添加多个节点,可以先创建一个文档碎片，先将要添加的节点保存到文档碎片中，
　　　　再将文档碎片添加到指定位置。
　　　　智能社老师的比喻：文档碎片好比是胶囊的外壳，吃到肚子里这层外壳会自动融化。
　　　　文档碎片被添加到父元素下之后，也会自动消失，只留下那些本来就要添加的节点。