HTML DOM 節(jié)點
在 HTML DOM 中,所有事物都是節(jié)點。DOM 是被視為節(jié)點樹的 HTML。
DOM Nodes
DOM 節(jié)點
根據(jù) W3C 的 HTML DOM 標準,HTML 文檔中的所有內容都是節(jié)點:
整個文檔是一個文檔節(jié)點
每個 HTML 元素是元素節(jié)點
HTML 元素內的文本是文本節(jié)點
每個 HTML 屬性是屬性節(jié)點
注釋是注釋節(jié)點
HTML DOM 節(jié)點樹
HTML DOM 將 HTML 文檔視作樹結構。這種結構被稱為節(jié)點樹:
HTML DOM 樹實例
節(jié)點父、子和同胞
節(jié)點樹中的節(jié)點彼此擁有層級關系。
父(parent)、子(child)和同胞(sibling)等術語用于描述這些關系。父節(jié)點擁有子節(jié)點。同級的子節(jié)點被稱為同胞(兄弟或姐妹)。
在節(jié)點樹中,頂端節(jié)點被稱為根(root)
每個節(jié)點都有父節(jié)點、除了根(它沒有父節(jié)點)
一個節(jié)點可擁有任意數(shù)量的子
同胞是擁有相同父節(jié)點的節(jié)點
下面的圖片展示了節(jié)點樹的一部分,以及節(jié)點之間的關系:
請看下面的 HTML 片段:
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
</html>
從上面的 HTML 中:
<html> 節(jié)點沒有父節(jié)點;它是根節(jié)點
<head> 和 <body> 的父節(jié)點是 <html> 節(jié)點
文本節(jié)點 "Hello world!" 的父節(jié)點是 <p> 節(jié)點
并且:
<html> 節(jié)點擁有兩個子節(jié)點:<head> 和 <body>
<head> 節(jié)點擁有一個子節(jié)點:<title> 節(jié)點
<title> 節(jié)點也擁有一個子節(jié)點:文本節(jié)點 "DOM 教程"
<h1> 和 <p> 節(jié)點是同胞節(jié)點,同時也是 <body> 的子節(jié)點
并且:
<head> 元素是 <html> 元素的首個子節(jié)點
<body> 元素是 <html> 元素的最后一個子節(jié)點
<h1> 元素是 <body> 元素的首個子節(jié)點
<p> 元素是 <body> 元素的最后一個子節(jié)點
警告!
DOM 處理中的常見錯誤是希望元素節(jié)點包含文本。
在本例中:<title>DOM 教程</title>,元素節(jié)點 <title>,包含值為 "DOM 教程" 的文本節(jié)點。
可通過節(jié)點的 innerHTML 屬性來訪問文本節(jié)點的值。
您將在稍后的章節(jié)中學習更多有關 innerHTML 屬性的知識。