JS 判斷節點類型
阿新 • • 發佈：2018-08-22
html 註釋 節點類 left 一段 永遠 節點 next stc
節點類型的分類
| 節點類型 | 說明 | 值 |
| 元素節點 | 每一個HTML標簽都是一個元素節點，如 <div> 、 <p>、<ul>等 | 1 |
| 屬性節點 | 元素節點（HTML標簽）的屬性，如 id 、class 、name 等。 | 2 |
| 文本節點 | 元素節點或屬性節點中的文本內容。 | 3 |
| 註釋節點 | 表示文檔註釋，形式為<!-- comment text -->。 | 8 |
| 文檔節點 | 表示整個文檔（DOM 樹的根節點，即 document ） | 9 |
nodeType、nodeName、nodeVale判斷節點類型，節點名稱和節點值
<!--使用javascript判斷節點類型-->
<div id="oneDiv">一段文本</div><!--註釋文本-->
<script type="text/javascript">
var div = document.getElementById("oneDiv");
console.log(div.nodeType); //輸出1，元素節點
var divText = div.firstChild;
console.log(divText.nodeType) //輸出3，文本節點
var divAttr = div.getAttributeNode("id");
console.log(divAttr.nodeType) //輸出2，屬性節點
var comment = div.nextSibling;
console.log(comment.nodeType) //輸出8，註釋節點
</script>
<!--使用javascript判斷節點名稱-->
<div id="oneDiv">一段文本</div><!--註釋文本-->
<script type="text/javascript">
var div = document.getElementById("oneDiv");
console.log(div.nodeName); //輸出DIV，元素節點為標簽大寫
var divText = div.firstChild;
console.log(divText.nodeName) //輸出#text，文本節點使用nodeName時永遠為#text
var divAttr = div.getAttributeNode("id");
console.log(divAttr.nodeName) //輸出id，屬性節點為屬性名
var comment = div.nextSibling;
console.log(comment.nodeName) //輸出#comment，註釋節點使用nodeName時永遠為#comment
</script>
<!--使用javascript判斷節點值-->
<div id="oneDiv">一段文本</div><!--註釋文本-->
<script type="text/javascript">
var div = document.getElementById("oneDiv");
console.log(div.nodeValue); //輸出null，元素節點對於nodeValue不支持
var divText = div.firstChild;
console.log(divText.nodeValue) //輸出一段文本，文本節點輸出文本值
var divAttr = div.getAttributeNode("id");
console.log(divAttr.nodeValue) //輸出oneDiv，屬性節點輸出屬性值
var comment = div.nextSibling;
console.log(comment.nodeValue) //輸出註釋文本，註釋節點輸出註釋內容
</script>
JS 判斷節點類型