節點與節點樹

節點與節點樹的概念

HTML 文件中的每項內容都是一個節點,包括 HTML標籤、標籤屬性、文字內容、註解、空格或tab 等。

HTML 文件中的所有節點組成了一個節點樹(或文件樹)。 HTML 文件中的每個元素、屬性、文字等都代表著樹中的一個節點。樹起始於文檔節點,並由此繼續伸出枝條,直到處於這棵樹最低層級的所有文字節點為止。

節點與節點的關係

DOM節點之間都有等級關係,包括父節點、子節點、兄弟節點(同儕節點)、後代、父輩 等。

<html>
<head>
    <title>DOM节点之间的关系</title>
</head>
<body>
    <h1>这是标题</h1>
    <p>这是内容</p>
</body>
</html>

從上面的程式碼可以看出:

除文檔節點(根節點)之外的每個節點都有父節點。
例如,<head> 和 <body> 的父節點是 <html> 節點,文字節點「 這是內容 」的父節點是 <p> 節點。

大部分元素節點都有子節點。
例如,<head> 節點有一個子節點:<title> 節點;<title> 節點也有一個子節點:文字節點「 這是標題 」。

當節點擁有共同的父節點時,它們就是兄弟節點(同儕節點)。
例如,<h1> 和 <p>是兄弟節點,它們的父節點都是 <body> 節點。

節點也可以擁有後代,後代指某個節點的所有子節點,或這些子節點的子節點,以此類推。
例如,所有的文字節點都是 <html>節點的後代,而第一個文字節點是 <head> 節點的後代。

節點也可以擁有先輩。先輩是某個節點的父節點,或是父節點的父節點,以此類推。
例如,所有的文字節點都可把 &​​lt;html> 節點當作先輩節點。


繼續學習
||
<html> <head> <title>DOM节点之间的关系</title> </head> <body> <h1>这是标题</h1> <p>这是内容</p> </body> </html>