生活随笔
收集整理的這篇文章主要介紹了
DOM中元素节点、属性节点、文本节点的理解
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
節(jié)點信息
每個節(jié)點都擁有包含著關(guān)于節(jié)點某些信息的屬性。這些屬性是：
- nodeName（節(jié)點名稱）
- nodeValue（節(jié)點值）
- nodeType（節(jié)點類型）
nodeType
nodeType 屬性可返回節(jié)點的類型。
最重要的節(jié)點類型是：
元素類型 節(jié)點類型
| 元素 | 1 |
| 屬性 | 2 |
| 文本 | 3 |
| 注釋 | 8 |
| 文檔 | 9 |
在實際應(yīng)用中，經(jīng)常用到的就是元素節(jié)點、屬性節(jié)點和文本節(jié)點了，下面我們通過小段代碼進行講解
1：元素節(jié)點
?<HEAD> ?? ??<TITLE>空谷悠悠</TITLE> ?? ?</HEAD> ?? ?<BODY> ?? ??<table> ?? ????<tr> ?? ????????<td?id="john"?name="myname">John</td> ?? ????????<td>Doe</td> ?? ????????<td?id="jack">Jack</td> ?? ????</tr> ?? ??</table> ?? ??<script> ?? ?var?d?=?document.getElementById("john");??? ?? ????alert(d.nodeType) ?? ????alert(d.nodeName) ?? ????alert(d.nodeValue)?? ?? ??</script> ?? ?</BODY> ?? </HTML>??
<HEAD><TITLE>空谷悠悠</TITLE></HEAD><BODY><table><tr><td id="john" name="myname">John</td><td>Doe</td><td id="jack">Jack</td></tr></table><script>var d = document.getElementById("john"); alert(d.nodeType)alert(d.nodeName)alert(d.nodeValue) </script></BODY>
</HTML>
?分析運行結(jié)果，其三個屬性的值分別為：
nodeType：ELEMENT_NODE
nodeType值：1
nodeName：元素標記名??? //此處為TD
nodeValue：null
2：屬性節(jié)點
?<HEAD> ?? ??<TITLE>空谷悠悠</TITLE> ?? ?</HEAD> ?? ?<BODY> ?? ??<table> ?? ????<tr> ?? ????????<td?id="john"?name="myname">John</td> ?? ????????<td>Doe</td> ?? ????????<td?id="jack">Jack</td> ?? ????</tr> ?? ??</table> ?? ?? ??<script> ?? ?var?d?=?document.getElementById("john").getAttributeNode("name");?? ?? ????alert(d.nodeType) ?? ????alert(d.nodeName) ?? ????alert(d.nodeValue)?? ?? ??</script> ?? ?</BODY> ?? </HTML>??
<HEAD><TITLE>空谷悠悠</TITLE></HEAD><BODY><table><tr><td id="john" name="myname">John</td><td>Doe</td><td id="jack">Jack</td></tr></table><script>var d = document.getElementById("john").getAttributeNode("name"); alert(d.nodeType)alert(d.nodeName)alert(d.nodeValue) </script></BODY>
</HTML>
??分析運行結(jié)果，其三個屬性的值分別為：
nodeType：ATTRIBUTE_NODE
nodeType值：2
nodeName：屬性名? // name
nodeValue：屬性值? //myname
3:文本節(jié)點
?<HEAD> ?? ??<TITLE>?New?Document?</TITLE> ?? ?</HEAD> ?? ?<BODY> ?? ??<table> ?? ????<tr> ?? ????????<td?id="john"?name="myname">John</td> ?? ????????<td>Doe</td> ?? ????????<td?id="jack">Jack</td> ?? ????</tr> ?? ??</table> ?? ??<script> ?? ????var?d?=?document.getElementsByTagName("td")[0].firstChild??? ?? ????alert(d.nodeType) ?? ????alert(d.nodeName) ?? ????alert(d.nodeValue)?? ?? ??</script> ?? ?</BODY> ?? </HTML>??
<HEAD><TITLE> New Document </TITLE></HEAD><BODY><table><tr><td id="john" name="myname">John</td><td>Doe</td><td id="jack">Jack</td></tr></table><script>var d = document.getElementsByTagName("td")[0].firstChild alert(d.nodeType)alert(d.nodeName)alert(d.nodeValue) </script></BODY>
</HTML>
??分析運行結(jié)果，其三個屬性的值分別為：
nodeType：TEXT_NODE
nodeType值：3
nodeName：#text
nodeValue：文本內(nèi)容?? // John
總結(jié)
以上是生活随笔為你收集整理的DOM中元素节点、属性节点、文本节点的理解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
