获取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’)