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

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

HTML 文件中的每項(xiàng)內(nèi)容都是一個節(jié)點(diǎn)，包括 HTML標(biāo)籤、標(biāo)籤屬性、文字內(nèi)容、註解、空格或tab 等。

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

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

DOM節(jié)點(diǎn)之間都有等級關(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)）之外的每個節(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)有一個子節(jié)點(diǎn)：<title> 節(jié)點(diǎn)；<title> 節(jié)點(diǎn)也有一個子節(jié)點(diǎn)：文字節(jié)點(diǎn)「這是標(biāo)題」。

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

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

節(jié)點(diǎn)也可以擁有先輩。先輩是某個節(jié)點(diǎn)的父節(jié)點(diǎn)，或是父節(jié)點(diǎn)的父節(jié)點(diǎn)，以此類推。
例如，所有的文字節(jié)點(diǎn)都可把 &??lt;html> 節(jié)點(diǎn)當(dāng)作先輩節(jié)點(diǎn)。

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