javascript-dom节点操作

节点操作

获取元素两种方式

1. 利用DOM提供的方法获取元素
   缺点：逻辑性不强，繁琐

2. 利用节点层级关系获取元素
   利用父子兄节点关系获取元素
   逻辑性强，但兼容性差
   1.节点概述
   节点至少拥有nodeType(节点类型)，nodeName(节点名称)和nodeValue(节点值)这三个属性。

3. 元素节点 nodeType为1

4. 属性节点nodeType为2

5. 文本节点nodeType为3（文本节点包含文字，空格，换行等)
   实际开发中，节点操作主要操作的是元素节点
   2.节点层级
   父节点
   parentNode,得到离元素最近的父级节点，找不到就返回null

 <div class="" ="father">
  <span class="son"></span>
 </div>
 <script>
  var son = document.querySelector('.son');
  console.log(son.parentNode);
 </script>

子节点 childNodes所有的子节点包含元素节点 文本节点等等

1.parentNode.childNodes(标准 不提倡使用)
2.parentNode.children(非标准) 返回所有的子元素节点 常用
（1）firstChild 第一个子节点 不管是文本节点还是元素节点
（2）firstElementChild返回第一个子元素节点有兼容性问题
（3）实际开发的写法 既没有兼容性问题又返回第一个元素
children[0]
兄弟节点
1.node.nextSibling下一个兄弟节点，包含元素节点或者文本节点
node.previousSibling 上一个兄弟节点，包含元素节点或文本节点
3.node.nextElementSibling 返回当前元素下一个兄弟元素节点，找不到返回null
node.previousElementSibling上一个兄弟元素节点，找不到返回null （ie9以上支持）
3.创建节点
document.createElement(‘tagName’)
4.添加节点
1.node.appendChild(child)
将一个节点添加到指定父节点的子节点列表末尾
2.node.insertBefore(child,指定元素)

<ul></ul>
<script>
	//创建节点元素
	var li = document.createElement('li');
	//获取父级元素
	var ul = document.querySelector('ul');
	//添加节点
	ul.appendChild(li);
	var li2 = document.createElement(li);
	ul.insertBefore(li2,ul.children[0]);
</script>

5.删除节点
node.removeChild(child)
三种动态创建元素的区别
document.write()
element.innerHTML
document.createElement()

1.document.write是直接将内容写入页面的内容流，但是文档流执行完毕，则会导致页面全部重绘（很少使用）
2.innerHTML是将内容写入某个DOM节点，不会导致页面重绘
3.innerHTML创建多个元素效率高（不要拼接字符串，采取数组形式拼接）结构稍微复杂
4.createElement()创建多个元素效率稍低一点，但结构清晰
总结：不同浏览器下，innerHTML效率要比createElement高