节点操作与节点之间的关系

什么是节点

页面中所有的元素都是节点（标签，属性, 注释，文本，document）

节点类型

节点类型	noteType
document	9
标签	1
导属性	2
文本	3

节点名称

节点名称	notoName
document	#document
标签	大写的标签名
导属性	属性名
文本	#text

节点值

节点值	noteValue
document	null
标签	null
导属性	属性值
文本	内容

节点之间的关系

节点之间的关系就是嵌套关系（父子关系）、并列关系（兄弟关系）。
注意区分节点与元素节点之间的区别。

12个

节点	代码
父节点	parentNode
父元素节点	parentElement
子节点	childNodes
子元素节点	children
第一个子节点	firstChild
第一个子元素节点	firstElementChild
最后一个子节点	lastChild
最后一个子元素节点	lastElementChild
上一个子节点	previousSibling
上一个子元素节点	previousElementSibling
下一个子节点	nextSibling
下一个子元素节点	nextElementSibling

源码解析

 <ui id="list">
      <li id="li_1">1</li>
      <li id="li_2">2</li>
      <!-- 注释 -->
      <li id="li_3">3</li>
      <li id="li_4">4</li>
      <li id="li_5">5</li>
      <li id="li_6">6</li>
    </ui>

获取

 var list = document.getElementById("list");
 var li_1 = document.getElementById("li_1");

父节点和父元素节点

console.log(list.parentNode.parentNode.parentNode);//#document
console.log(list.parentElement.parentElement.parentElement);//null

子节点和子元素节点

console.log(list.childNodes); // 注释，文本，标签(元素)
console.log(list.children); //标签(元素)

第一个子节点和第一个子元素节点

console.log(list.firstChild);  //#text  文本
console.log(list.firstElementChild);// 第一个标签

最后一个子节点和最后一个子元素节点

console.log(list.lastChild);  //#text  文本
console.log(list.lastElementChild);// 最后一个标签

上一个子节点和上一个子元素节点

console.log(li_2.previousSibling);   //#text  文本
console.log(li_2.previousElementSibling);  //上一个标签

下一个子节点和下一个子元素节点

console.log(li_2.nextSibling);   //#text  文本
console.log(li_2.nextElementSibling);  //下一个标签

总结

html的父节点是#document 
html的父元素节点是null
子节点获取的是 ： 标签（元素）、文本、注释    得到的是伪数组
子元素节点获取的是 ：标签（元素）
firstChild   lastChild  previousSibling  nextSibling 获取的都是文本，
如果有文字就是获取文字，否则获取#text
firstElementChild   lastElementChild   previousElementSibling   nextElementSibling
获取的都是标签，没有获取的是null