JS 判斷節點類型

標籤：java   nodename   注釋   bsp   order   doc   nod   div   class   

節點類型的分類

節點類型	說明	值
元素節點	每一個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 判斷節點類型