节点操作#
实验代码#
- i am li1 in ul tag
- i am li2 in ul tag
- i am li3 in ul tag
- i am li4 in ul tag
- i am li1 in ol tag
- i am li2 in ol tag
- i am li3 in ol tag
- i am li4 in ol tag
兄弟节点#
解决兼容性问题的方法：#
封装一个兼容性的函数
JavaScript
function getNextElementSibling(element){
var el=element;
while(el=el.nextSibiling){
if(el.nodeType==1){
return el;
}
}
return null;
}
删除节点#
- 张大大
- 吴彦祖
- 刘德华
- 彭于晏
复制节点#
- 1
- 2
- 3
为什么学节点操作#
利用DOM提供的方法获取元素 #
- document.getElementById()
- document.getElementsByTagName()
- document.querySelector()
- 逻辑性不强、繁琐
利用节点层级关系获取元素 #
- 利用父子兄节点关系获取元素
- 逻辑性强，但兼容性较差
两种方法都可以获取元素节点，但节点操作更简单
网页中的所有内容都是节点(标签、属性、文本、注释等)，在DOM中，节点使用node来表示。
HTML DOM树中的所有节点均可通过js进行访问，所有HTML元素(节点)均可修改，也可以创建或删除
一般地，节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)三个基本属性。
- 元素节点nodeType为1
- 属性节点nodeType为2
- 文本节点nodeType为3(文本节点包含文字、空格、换行等)
在实际开发中，节点操作主要操作的是 元素节点
节点层级#
利用DOM树可以把节点划分为不同的层次关系，常见的是 父子兄层级关系
父节点parentNode#
得到的是离元素最近的父级节点，若找不到父节点就返回为null
子节点parentNode.childrenNodes(标准)#
返回的是包含指定节点的子节点的集合，包括元素节点，文本节点，属性节点。该集合为即时更新的集合，其中的text表示得到的ul与li标签之间的文本节点（换行）
若只想获得里面的元素节点，则需要专门处理，所以一般不提倡使用childrenNodes
兄弟节点node.nextSibiling#
nextSibling返回当前元素的下一个兄弟节点，找不到则返回null，同样，也是包含所有的节点。
创建节点--添加节点#
创建节点document.createElement('tagName')#
document.createElement()方法创建由tagName指定的HTML元素，因为这些元素原先不存在，是根据需求动态生成的，所以也称为 动态创建元素节点
（在父级元素后）添加节点node.appendChild(child)#
将一个节点添加到指定父节点列表末尾，类似于css里面的after伪元素。
(在父节点的指定子节点前)添加节点node.insertBefore(child,指定元素)#
node.insertBefore()方法将一个节点添加到父节点的指定子节点前面，类似于css的before伪元素。
复制节点#
node.cloneNode()#
node.cloneNode()方法返回调用该方法的节点的一个副本，也称为克隆节点/拷贝节点
注意：1.若括号参数为 空或者为false ，则是 浅拷贝 ，即只复制节点本身，不克隆里面的子节点
三种动态创建元素区别#
- document.write()
- element.innerHTML
- document.createElement()
区别#
- document.write是直接将内容写入页面的内容流， 但是文档流执行完毕，则它会导致页面全部重绘
- innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘
- innerHTML创建多个元素效率更高 （不要拼接字符串，采取数组形式拼接） ，结构稍微复杂
- createElement()创建多个元素效率稍微低一些，但是结构更清晰
- 总结：不同浏览器下，innerHTML效率要比createElement高
效率测试#
用以下三种方式在下方插入1000个小盒子，比较效率