節(jié)點(diǎn)與節(jié)點(diǎn)樹

節(jié)點(diǎn)與節(jié)點(diǎn)樹的概念

HTML 文檔中的每項(xiàng)內(nèi)容都是一個(gè)節(jié)點(diǎn)，包括 HTML標(biāo)簽、標(biāo)簽屬性、文本內(nèi)容、注釋、空格或tab 等。

HTML 文檔中的所有節(jié)點(diǎn)組成了一個(gè)節(jié)點(diǎn)樹（或文檔樹）。HTML 文檔中的每個(gè)元素、屬性、文本等都代表著樹中的一個(gè)節(jié)點(diǎn)。樹起始于文檔節(jié)點(diǎn)，并由此繼續(xù)伸出枝條，直到處于這棵樹最低級(jí)別的所有文本節(jié)點(diǎn)為止。

節(jié)點(diǎn)與節(jié)點(diǎn)的關(guān)系

DOM節(jié)點(diǎn)之間都有等級(jí)關(guān)系，包括父節(jié)點(diǎn)、子節(jié)點(diǎn)、兄弟節(jié)點(diǎn)（同輩節(jié)點(diǎn)）、后代、父輩等。

<html>
<head>
    <title>DOM節(jié)點(diǎn)之間的關(guān)系</title>
</head>
<body>
    <h1>這是標(biāo)題</h1>
    <p>這是內(nèi)容</p>
</body>
</html>

從上面的代碼可以看出：

除文檔節(jié)點(diǎn)（根節(jié)點(diǎn)）之外的每個(gè)節(jié)點(diǎn)都有父節(jié)點(diǎn)。
例如，<head> 和 <body> 的父節(jié)點(diǎn)是 <html> 節(jié)點(diǎn)，文本節(jié)點(diǎn)“ 這是內(nèi)容 ”的父節(jié)點(diǎn)是 <p> 節(jié)點(diǎn)。

大部分元素節(jié)點(diǎn)都有子節(jié)點(diǎn)。
例如，<head> 節(jié)點(diǎn)有一個(gè)子節(jié)點(diǎn)：<title> 節(jié)點(diǎn)；<title> 節(jié)點(diǎn)也有一個(gè)子節(jié)點(diǎn)：文本節(jié)點(diǎn)“ 這是標(biāo)題 ”。

當(dāng)節(jié)點(diǎn)擁有共同的父節(jié)點(diǎn)時(shí)，它們就是兄弟節(jié)點(diǎn)（同輩節(jié)點(diǎn)）。
例如，<h1> 和 <p>是兄弟節(jié)點(diǎn)，它們的父節(jié)點(diǎn)均是 <body> 節(jié)點(diǎn)。

節(jié)點(diǎn)也可以擁有后代，后代指某個(gè)節(jié)點(diǎn)的所有子節(jié)點(diǎn)，或者這些子節(jié)點(diǎn)的子節(jié)點(diǎn)，以此類推。
例如，所有的文本節(jié)點(diǎn)都是 <html>節(jié)點(diǎn)的后代，而第一個(gè)文本節(jié)點(diǎn)是 <head> 節(jié)點(diǎn)的后代。

節(jié)點(diǎn)也可以擁有先輩。先輩是某個(gè)節(jié)點(diǎn)的父節(jié)點(diǎn)，或者父節(jié)點(diǎn)的父節(jié)點(diǎn)，以此類推。
例如，所有的文本節(jié)點(diǎn)都可把 <html> 節(jié)點(diǎn)作為先輩節(jié)點(diǎn)。

繼續(xù)學(xué)習(xí)