當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

088_DOM导航

發(fā)布時(shí)間：2025/4/17 编程问答 57 豆豆

生活随笔收集整理的這篇文章主要介紹了 088_DOM导航小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

1. DOM節(jié)點(diǎn)

1.1. 根據(jù)W3C html DOM標(biāo)準(zhǔn), html文檔中的所有事物都是節(jié)點(diǎn):

整個(gè)文檔是文檔節(jié)點(diǎn)。
每個(gè)html元素是元素節(jié)點(diǎn)。
html元素內(nèi)的文本是文本節(jié)點(diǎn)。
每個(gè)html屬性是屬性節(jié)點(diǎn)。
所有注釋是注釋節(jié)點(diǎn)。

2. 節(jié)點(diǎn)關(guān)系

2.1. 節(jié)點(diǎn)樹(shù)中的節(jié)點(diǎn)彼此之間有一定的等級(jí)關(guān)系。

術(shù)語(yǔ), 父(parent)、子(child)和同胞(sibling)用于描述這些關(guān)系。
在節(jié)點(diǎn)樹(shù)中, 頂端節(jié)點(diǎn)被稱為根(根節(jié)點(diǎn))。
每個(gè)節(jié)點(diǎn)都有父節(jié)點(diǎn), 除了根(根節(jié)點(diǎn)沒(méi)有父節(jié)點(diǎn))。
節(jié)點(diǎn)能夠擁有一定數(shù)量的子。
同胞(兄弟或姐妹)指的是擁有相同父的節(jié)點(diǎn)。

2.2. 實(shí)例

<html><head><title>DOM 教程</title></head><body><h1>DOM 第一課</h1><p>Hello world!</p></body></html>

2.3. 實(shí)例節(jié)點(diǎn)關(guān)系

2.4. 從以上的html中您能讀到以下信息:

????<html>是根節(jié)點(diǎn)

????<html>沒(méi)有父

????<html>是<head>和<body>的父

????<head>是<html>的第一個(gè)子

????<body>是<html>的最后一個(gè)子

同時(shí):

????<head>有一個(gè)子: <title>

????<title>有一個(gè)子(文本節(jié)點(diǎn)): "DOM 教程"

????<body>有兩個(gè)子: <h1>和<p>

????<h1>有一個(gè)子: "DOM 第一課"

????<p>有一個(gè)子: "Hello world!"

????<h1>和<p>是同胞

3. 在節(jié)點(diǎn)之間導(dǎo)航

3.1. 通過(guò)JavaScript, 您可以使用以下節(jié)點(diǎn)屬性在節(jié)點(diǎn)之間導(dǎo)航:

parentNode
children
childNodes[nodenumber]
firstChild
lastChild
nextSibling
nextElementSibling
previousSibling
previousElementSibling

4. parentNode屬性

4.1. parentNode屬性可返回某節(jié)點(diǎn)的父節(jié)點(diǎn)。如果指定的節(jié)點(diǎn)沒(méi)有父節(jié)點(diǎn)則返回null。

4.2. 語(yǔ)法

node.parentNode

5. children屬性

5.1. children屬性返回元素的子元素的集合, 是一個(gè)HTMLCollection對(duì)象。

5.2. 根據(jù)子元素在元素中出現(xiàn)的先后順序進(jìn)行排序。使用HTMLCollection對(duì)象的length屬性獲取子元素的數(shù)量, 然后使用序列號(hào)(index, 起始值為0)訪問(wèn)每個(gè)子元素。

5.3. 語(yǔ)法

element.children

6. childNodes屬性

6.1. childNodes屬性返回包含被選節(jié)點(diǎn)的子節(jié)點(diǎn)的NodeList。

6.2. 如果選定的節(jié)點(diǎn)沒(méi)有子節(jié)點(diǎn), 則該屬性返回不包含節(jié)點(diǎn)的NodeList。如需循環(huán)子節(jié)點(diǎn)列表, 使用nextSibling屬性, 要比使用父對(duì)象的childNodes列表效率更高。

6.3. 語(yǔ)法

element.childNodes

6.4. children屬性與childNodes屬性的差別:

6.4.1.?childNodes屬性返回所有的節(jié)點(diǎn), 包括文本節(jié)點(diǎn)、注釋節(jié)點(diǎn)。

6.4.2.?children屬性只返回元素節(jié)點(diǎn)。?

7. firstChild屬性

7.1. firstChild屬性返回被選節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)對(duì)象。如果選定的節(jié)點(diǎn)沒(méi)有子節(jié)點(diǎn), 則該屬性返回NULL。

7.2. firstChild屬性包括文本節(jié)點(diǎn)、注釋節(jié)點(diǎn)。

7.3. 語(yǔ)法

node.firstChild

8. lastChild屬性

8.1. lastChild屬性可返回文檔的最后一個(gè)子節(jié)點(diǎn)對(duì)象。

8.2. lastChild屬性包括文本節(jié)點(diǎn)、注釋節(jié)點(diǎn)。

8.3. 語(yǔ)法

node.lastChild

9. nextSibling屬性

9.1. nextSibling屬性可返回某個(gè)元素之后緊跟的節(jié)點(diǎn)(處于同一樹(shù)層級(jí)中)。

9.2. 返回節(jié)點(diǎn)對(duì)象。如果元素緊跟后面沒(méi)有節(jié)點(diǎn)則返回null。

9.3. 語(yǔ)法

node.nextSibling

10. nextElementSibling屬性

10.1. nextElementSibling屬性返回指定元素之后的下一個(gè)兄弟元素(相同節(jié)點(diǎn)樹(shù)層中的下一個(gè)元素節(jié)點(diǎn))。

10.2. 返回節(jié)點(diǎn)對(duì)象。如果元素緊跟后面沒(méi)有節(jié)點(diǎn)則返回null。

10.3. 語(yǔ)法

node.nextElementSibling

10.4.?nextSibling屬性與nextElementSibling屬性的差別:

10.4.1. nextSibling屬性返回元素節(jié)點(diǎn)之后的兄弟節(jié)點(diǎn)(包括文本節(jié)點(diǎn)、注釋節(jié)點(diǎn))。

10.4.2. nextElementSibling屬性只返回元素節(jié)點(diǎn)之后的兄弟元素節(jié)點(diǎn)(不包括文本節(jié)點(diǎn)、注釋節(jié)點(diǎn))。

11. previousSibling屬性

11.1. previousSibling屬性可返回某節(jié)點(diǎn)之前緊跟的節(jié)點(diǎn)(處于同一樹(shù)層級(jí))。

11.2. 返回節(jié)點(diǎn)對(duì)象。如果元素緊跟后面沒(méi)有節(jié)點(diǎn)則返回null。

11.3. 語(yǔ)法

node.previousSibling

12. previousElementSibling屬性

12.1. previousElementSibling屬性返回指定元素的前一個(gè)兄弟元素(相同節(jié)點(diǎn)樹(shù)層中的前一個(gè)元素節(jié)點(diǎn))。

12.2. 返回節(jié)點(diǎn)對(duì)象。如果元素緊跟后面沒(méi)有節(jié)點(diǎn)則返回null。

12.3. 語(yǔ)法

node.previousElementSibling

12.4.?previousSibling屬性與previousElementSibling屬性的差別:

12.4.1. previousSibling屬性返回元素節(jié)點(diǎn)之前的兄弟節(jié)點(diǎn)(包括文本節(jié)點(diǎn)、注釋節(jié)點(diǎn))。

12.4.2. previousElementSibling屬性只返回元素節(jié)點(diǎn)之前的兄弟元素節(jié)點(diǎn)(不包括文本節(jié)點(diǎn)、注釋節(jié)點(diǎn))。

13. hasChildNodes()方法

13.1. hasChildNodes()方法可在某節(jié)點(diǎn)用于任何子節(jié)點(diǎn)時(shí)返回true, 否則返回false。。

13.2. 語(yǔ)法

node.hasChildNodes()

14. nodeValue屬性

14.1. nodeValue屬性規(guī)定節(jié)點(diǎn)的值。

?元素節(jié)點(diǎn)的nodeValue是null
?文本節(jié)點(diǎn)的nodeValue是文本
?屬性節(jié)點(diǎn)的nodeValue是undefined

15. 節(jié)點(diǎn)值

15.1. DOM處理中的一種常見(jiàn)錯(cuò)誤是認(rèn)為元素節(jié)點(diǎn)中包含文本。

15.2. 實(shí)例:

// <p>元素節(jié)點(diǎn)不包含文本。 // "DOM 教程"是另一個(gè)節(jié)點(diǎn), <p>元素節(jié)點(diǎn)的子節(jié)點(diǎn), 是文本節(jié)點(diǎn) <p id="demo">DOM 教程</p>

15.3. 文本節(jié)點(diǎn)的值能夠通過(guò)節(jié)點(diǎn)的innerHTML屬性進(jìn)行訪問(wèn):

var myTitle = document.getElementById("demo").innerHTML;

15.4. 訪問(wèn)innerHTML屬性等同于訪問(wèn)首個(gè)子節(jié)點(diǎn)的nodeValue:

var myTitle = document.getElementById("demo").firstChild.nodeValue; // 也可以這樣訪問(wèn)第一個(gè)子節(jié)點(diǎn): var myTitle = document.getElementById("demo").childNodes[0].nodeValue;

16. nodeName屬性

16.1. nodeName屬性規(guī)定節(jié)點(diǎn)的名稱。

?nodeName是只讀的
?元素節(jié)點(diǎn)的nodeName等同于標(biāo)簽名
?屬性節(jié)點(diǎn)的nodeName是undefined
?文本節(jié)點(diǎn)的nodeName總是#text
?文檔節(jié)點(diǎn)的nodeName總是#document

17. nodeType屬性

17.1. nodeType屬性返回節(jié)點(diǎn)的類型。nodeType是只讀的。

17.2. 最重要的nodeType屬性是:

18. 例子

18.1. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>DOM導(dǎo)航</title></head><body><div id="myDiv" style="border: solid 1px; width: 600px;height: 240px;"><ul id="myUl"><li>parentNode</li><li>children</li><li>childNodes[nodenumber]</li><li>firstChild</li><li>lastChild</li><li>nextSibling</li><li>nextElementSibling</li><li>previousSibling</li><li>previousElementSibling</li><li>hasChildNodes</li></ul></div><script type="text/javascript">var myDiv = document.getElementById("myDiv");var myUl = document.getElementById("myUl");var firstLi = document.querySelector("li:first-child");var lastLi = document.querySelector("li:last-child");document.write("<br />div的父元素節(jié)點(diǎn)名稱: " + myDiv.parentNode.nodeName + "<hr />");var childrens = Array.prototype.slice.call(myUl.children);document.write("children: " + myUl.children);for(let idx in childrens){document.write("<br />ul子節(jié)點(diǎn)名稱: " + childrens[idx].nodeName);}var childNodes = Array.prototype.slice.call(myUl.childNodes);document.write("<hr />childNodes: " + myUl.childNodes);for(let idx in childNodes){document.write("<br />ul子節(jié)點(diǎn)名稱: " + childNodes[idx].nodeName);}document.write("<hr />firstChild: " + myDiv.firstChild);document.write("<hr />lastChild: " + myDiv.lastChild);document.write("<hr />nextSibling: " + firstLi.nextSibling);var nes = firstLi.nextElementSibling;document.write("<hr />nextElementSibling: " + nes);document.write("<br />" + firstLi.innerHTML);while(nes){document.write("<br />" + nes.innerHTML);nes = nes.nextElementSibling;}document.write("<hr />previousSibling: " + lastLi.previousSibling);var pes = lastLi.previousElementSibling;document.write("<hr />previousElementSibling: " + pes);document.write("<br />" + lastLi.innerHTML);while(pes){document.write("<br />" + pes.innerHTML);pes = pes.previousElementSibling;}document.write("<hr />最后一個(gè)li是否有字節(jié)點(diǎn): " + lastLi.hasChildNodes());</script></body> </html>

18.2. 效果圖

19. 例子

19.1. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>nodeValue、nodeName、nodeType屬性</title></head><body><a id="demo" href="http://www.baidu.com">DOM 教程</a><br /><script type="text/javascript">var demo = document.getElementById("demo");document.write('元素節(jié)點(diǎn)的nodeName是: ' + demo.nodeName + '<br />');document.write('文本節(jié)點(diǎn)的nodeName是: ' + demo.firstChild.nodeName + '<br />');document.write('屬性節(jié)點(diǎn)的nodeName是: ' + demo.href.nodeName + '<br />');document.write('文檔節(jié)點(diǎn)的nodeName是: ' + document.nodeName + '<br /><br />');document.write('元素節(jié)點(diǎn)的nodeType是: ' + demo.nodeType + '<br />');document.write('文本節(jié)點(diǎn)的nodeType是: ' + demo.firstChild.nodeType + '<br />');document.write('屬性節(jié)點(diǎn)的nodeType是: ' + demo.href.nodeType + '<br />');document.write('注釋節(jié)點(diǎn)的nodeType是: ' + document.body.childNodes[4].nodeType + '<br />');document.write('文檔節(jié)點(diǎn)的nodeType是: ' + document.nodeType + '<br />');document.write('文檔聲明的nodeType是: ' + document.doctype.nodeType + '<br /><br />');document.write('使用innerHTML訪問(wèn)文本值: ' + demo.innerHTML + '<br />');document.write('使用nodeValue訪問(wèn)文本值: ' + demo.firstChild.nodeValue + '<br />');demo.firstChild.nodeValue = '百度一下';document.write('使用索引+nodeValue訪問(wèn)文本值: ' + demo.childNodes[0].nodeValue + '<br />');document.write('元素節(jié)點(diǎn)的nodeValue是: ' + demo.nodeValue + '<br />');document.write('屬性節(jié)點(diǎn)的nodeValue是: ' + demo.href.nodeValue);</script></body> </html>

19.2. 效果圖

總結(jié)

以上是生活随笔為你收集整理的088_DOM导航的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

_DOM

上一篇： 097_事件监听器
下一篇： 089_DOM节点动态创建、添加和删除