JS中获取以及操作DOM中的节点

获取DOM中节点

节点的作用：节点是描述页面中每一部分之间的关系的。

所以我们就要通过相关的属性和方法获取到页面中所有的节点。

childNodes

获取当前元素的所有子节点（节点集合：类数组）
在这里需要注意的是：不仅仅是元素节点，注释节点、文本节点等都会包含在内，格外需要注意的是 子节点只在儿子辈分中查找！！！

children

获取所有的元素子节点（元素集合）
在IE6~8中不兼容（会把注释节点当做元素节点获取到）

parentNode

获取当前元素的父节点（元素对象）

previousSibling / nextSibling

previousSibling ：获取当前节点的上一个哥哥节点（不一定是元素节点也可能是文本或者注释节点）
nextSibling： 获取当前节点的下一个弟弟节点

previousElementSibling / nextElementSibling

previousElementSibling ：获取当前节点的上一个哥哥元素节点
nextElementSibling：获取当前节点的下一个弟弟元素节点

在这里需要注意的是:在IE6~8下不兼容

firstChild / lastChild

firstChild：当前元素所有子节点中的第一个（也不一定是元素节点，也可能是文本或者注释）
lastChild：当前元素所有子节点中的最后一个。

firstElementChlid / lastElementChild

firstElementChild：获取当前元素所有子元素节点中的第一个。
lastElementChild：获取当前元素所有子元素节点中的最后一个。
在这里主要注意的是：IE6~8中不兼容

操作DOM中的节点

所谓操作DOM中的节点，其实就是DOM的增、删、改

document.createElement

在JS中动态创建一个HTML标签
在项目中，我们偶尔会在JS中动态的创建HTML标签，然后增加到页面中

appendChild

容器.appendChild(新元素)
把当前创建的新元素添加到容器的末尾位置

insertBefore

容器.insertBefore(新元素,老元素)
在当前容器中，把新创建的元素增加到老元素之前。

removeChild

容器.removeChild(元素)
把当前元素中的某一个元素移除掉。

replaceChild

容器.replaceChild(新元素,老元素)
在当前容器中，拿新元素替换老元素。

cloneNode

元素.cloneNode(false/true)
把原有的元素克隆一份一模一样的。false：只克隆当前元素本身。true：深度克隆，把当前元素本身以及元素的所有后代都进行克隆。

[set/get/remove]Attribute

给当前元素设置、获取、移除属性。（一般操作的是它的自定义属性）

box.setAttribute(‘myIndex’,0) 
box.getAttribute(‘myIndex’) 
box.removeAttribute(‘myIndex’)