1.經常使用的節點範例，nodeType，attributes，childNodes。
1.元素節點 - 1
2.屬性節點 - 2
3.文本節點 - 3
4.解釋節點 - 8
5.文檔節點 - 9
檢察節點範例
node.nodeType(返回的是数字)
屬性節點
元素.attributes(獵取的是鳩合)
元素.attributes[0]
經由過程元素.childNodes獵取子節點
childNodes 獵取到的是一個鳩合
鳩合中 包含了 元素的 一切子節點
其中有 元素 子節點 ,解釋,文本節點...
舉例說明，以下是悉數代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div id="box" class="content">
<div id="inner">inner</div>
一句話
<!--這裡是解釋-->
</div>
<script>
var box=document.getElementById("box");
console.log(box.nodeType);//1
//--------------------------------------------
console.log(box.attributes);
console.log(box.attributes[0]);//id="box"
console.log(box.attributes[1]);//class="content"
console.log(box.attributes[0].nodeType);//2
//--------------------------------------------
console.log(box.childNodes);
console.log(box.childNodes[0]);//#text 這裏指的是box所指的div和inner所指的div換行之間的內容，就是很多個空格，計算機認定為文本。
console.log(box.childNodes[0].nodeType);// 3
console.log(box.childNodes[3].nodeType);// 8
</script>
</body>
</html>2.nodeName
<body>
<div id="box" class="content">
<div id="inner">inner</div>
<p>一句話</p>
<!--這裡是解釋-->
</div>
<script>
var box = document.getElementById("box");
var p=document.getElementsByTagName("p")[0];
console.log(box.nodeName);//DIV
console.log(p.nodeName);//P
//----------------------------------------------------
console.log(box.childNodes[0].nodeName);//#text
console.log(box.childNodes[5].nodeName);//#comment
//----------------------------------------------------
console.log(document.nodeName);//#document
</script>
</body>3.parentNode,children,childNodes
node.parentNode：找到node的父節點
children：獵取節點的一級的元素子節點，只獵取元素，返回的是HTMLCollection鳩合。
childNodes：獵取節點的一級子節點，能夠獵取到元素節點，文本節點，解釋節點等，返回的是Nodelist鳩合.
舉例說明，能夠把代碼粘貼，本身運轉看看：
<body>
<!--
node.parentNode 父節點
children 獵取節點的一級的元素子節點，返回的是鳩合
childNodes 獵取節點的子節點，能夠獵取到元素節點，文本節點，解釋節點，返回的是鳩合
-->
<div id="wrap">
<div id="content">
<div id="inner"></div>
</div>
<p>p</p>
一句話
</div>
<script>
var content=document.getElementById("content");
console.log(content.parentNode);
console.log(content.parentNode.parentNode);
console.log(content.parentNode.parentNode.parentNode);
console.log(content.parentNode.parentNode.parentNode.parentNode);
//-----------------------------------------------------------------------
console.log(content.childNodes);//NodeList(3) [text, div#inner, text]
console.log(content.children);//HTMLCollection [div#inner]
</script>
</body>4.node.previousElementSibling和node.nextElementSibling
兄弟關聯
node.previousElementSibling 上一個元素兄弟節點
node.nextElementSibling 下一個元素兄弟節點
舉例說明，能夠把代碼粘貼，本身運轉看看：
<body>
<ul id="list">
<li>1</li>
<li id="item">2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
var list = document.getElementById("list");
var item = document.getElementById("item");
console.log(list.previousElementSibling);//null 由於是嵌套關聯，所以沒有上一個兄弟節點
console.log(item.previousElementSibling);//<li>1</li>
console.log(item.nextElementSibling);//<li>3</li>
console.log(item.nextElementSibling.nextElementSibling);//<li>4</li>
</script>
</body>5.node.firstElementChild和node.lastElementChild
嵌套關聯
node.previousElementSibling 第一個子級
node.nextElementSibling 末了一個子級
舉例說明，能夠把代碼粘貼，本身運轉看看：
<body>
<div id="wrap">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<script>
var wrap = document.getElementById("wrap");
console.log( wrap.firstElementChild );//<div>1</div>
console.log( wrap.lastElementChild );//<div>4</div>
</script>
</body>