碼上歡樂
相關內容    簡體    繁體

DOM中元素節點、屬性節點、文本節點的理解

本文轉載自   查看原文   2013-09-30 16:29   3146    Javascript

DOM中元素節點、屬性節點、文本節點的理解

節點信息

每個節點都擁有包含着關於節點某些信息的屬性。這些屬性是：
nodeName（節點名稱） 
nodeValue（節點值） 
nodeType（節點類型） 
nodeType

nodeType 屬性可返回節點的類型。

最重要的節點類型是：

 

元素類型

節點類型

元素(ELEMENT_NODE)

1   

屬性(ATTRIBUTE_NODE)

2

文本(TEXT_NODE)

3

注釋(COMMENT_NODE)

8

文檔(DOCUMENT_NODE)

9

 

在實際應用中，經常用到的就是元素節點、屬性節點和文本節點了，下面我們通過小段代碼進行講解 

1：元素節點
元素節點代碼  

[html]   view plain copy
  1. <HTML>  
  2. <HEAD>  
  3. <TITLE>空谷悠悠</TITLE>  
  4. </HEAD>  
  5. <BODY>  
  6.     <table>  
  7.         <tr>  
  8.             <td id="john" name="myname">John</td>  
  9.             <td>Doe</td>  
  10.             <td id="jack">Jack</td>  
  11.         </tr>  
  12.     </table>  
  13.     <script>  
  14.         var d = document.getElementById("john");  
  15.         alert(d.nodeType)  
  16.         alert(d.nodeName)  
  17.         alert(d.nodeValue)  
  18.     </script>  
  19. </BODY>  
  20. </HTML>  


 

 分析運行結果，其三個屬性的值分別為：

nodeType：ELEMENT_NODE

nodeType值：1

nodeName：元素標記名    //此處為TD

nodeValue：null

2：屬性節點


屬性節點代碼  

[html]   view plain copy
  1. <HTML>  
  2. <HEAD>  
  3. <TITLE>空谷悠悠</TITLE>  
  4. </HEAD>  
  5. <BODY>  
  6.     <table>  
  7.         <tr>  
  8.             <td id="john" name="myname">John</td>  
  9.             <td>Doe</td>  
  10.             <td id="jack">Jack</td>  
  11.         </tr>  
  12.     </table>  
  13.     <script>  
  14.         var d = document.getElementById("john").getAttributeNode("name");  
  15.         alert(d.nodeType)  
  16.         alert(d.nodeName)  
  17.         alert(d.nodeValue)  
  18.     </script>  
  19. </BODY>  
  20. </HTML>  


 

  分析運行結果，其三個屬性的值分別為：

nodeType：ATTRIBUTE_NODE

nodeType值：2

nodeName：屬性名  // name

nodeValue：屬性值  //myname

3:文本節點


文本節點代碼  

[html]   view plain copy
  1. <HTML>  
  2. <HEAD>  
  3. <TITLE>New Document</TITLE>  
  4. </HEAD>  
  5. <BODY>  
  6.  <table>  
  7.   <tr>  
  8.    <td id="john" name="myname">John</td>  
  9.    <td>Doe</td>  
  10.    <td id="jack">Jack</td>  
  11.   </tr>  
  12.  </table>  
  13.  <script>  
  14.   var d = document.getElementsByTagName("td")[0].firstChild  
  15.   alert(d.nodeType)  
  16.   alert(d.nodeName)  
  17.   alert(d.nodeValue)  
  18.  </script>  
  19. </BODY>  
  20. </HTML>  


 

  分析運行結果，其三個屬性的值分別為：

nodeType：TEXT_NODE

nodeType值：3

nodeName：#text

nodeValue：文本內容   // John


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 初探JavaScript（一）——也談元素節點、屬性節點、文本節點 認識DOM的三大節點：元素節點（不包含文本），文本節點，屬性節點以及nodeName,nodeType,nodeValue的區別 js中的DOM節點----文本節點 HTMLDOM中三種元素節點、屬性節點、文本節點的測試案例 獲取元素節點的子節點 & 獲取文本節點 深入理解DOM節點類型第二篇——文本節點Text js 創建、添加、刪除元素節點 添加文本節點 Javascript進階篇——(DOM—節點---插入、刪除和替換元素、創建元素、創建文本節點)—筆記整理 HTML DOM-->獲取文本節點 創建元素節點，文本節點以及在指定位置增加節點
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM