【EASYDOM系列教程】之DOM 樹結構

時間 2019-11-05

標籤 EASYDOM系列教程 dom 結構欄目 HTML 简体版

原文原文鏈接

DOM 樹結構

DOM 之因此能夠訪問和更新 HTML 頁面中的內容、結構和樣式，是由於 DOM 將 HTML 頁面解析爲一個 樹結構。html

例以下面這段代碼是一個簡單的 HTML 頁面源代碼:瀏覽器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例頁面</title>
</head>
<body>
<h2>這是一個示例頁面</h2>
<p id="p" title="this is p.">這是一個段落內容.</p>
</body>
</html>

將上面的 HTML 頁面繪製成 DOM 樹結構，以下效果:網絡

經過上面的 DOM 樹結構，咱們能夠看到，Document 對象是做爲 DOM 樹結構的入口。再根據 DOM 樹結構的特色，咱們就能夠定位到 HTML 頁面中任意一個元素、屬性或文本內容。學習

瀏覽器加載並運行 HTML 頁面時，會建立 DOM 樹結構這個模型。而且 DOM 樹結構模型會被存儲在瀏覽器的內存中。this

當 HTML 頁面內容過於龐大和複雜時，生成的 DOM 樹結構就越複雜。進而，瀏覽器加載 HTML 頁面的耗時就越長。spa

什麼是節點

節點（Node）本來是網絡術語，表示網絡中的鏈接點。一個網絡是由一些節點構成的集合。code

在 DOM 樹結構中，節點也是很重要的一個概念。簡單來講，節點做爲 DOM 樹結構中的鏈接點，最終構成了完整的 DOM 樹結構。htm

DOM 樹結構中的節點

在 DOM 樹結構中，主要由如下 4 種節點組成:對象

節點名稱	含義	描述
文檔節點	表示整個 HTML 頁面（至關於 document 對象）	當須要訪問任何標籤、屬性或文本時，均可以經過文檔節點進行導航
元素節點	表示 HTML 頁面中的標籤（即 HTML 頁面的結構）	當訪問 DOM 樹時，須要從查找元素節點開始
屬性節點	表示 HTML 頁面中的開始標籤包含的屬性
文本節點	表示 HTML 頁面中的標籤所包含的文本內容

除了上面 4 種常見的節點類型之外，DOM 樹結構中還具備不少節點類型。blog

還有一些節點類型，目前已被廢棄（再也不使用）。

DOM 節點樹結構

經過節點概念，咱們能夠將本來的 DOM 樹結構改爲 DOM 節點樹結構進行表示。

在 DOM 的標準規範中，提供了 Node 對象。該對象主要依靠 DOM 節點樹結構中的常見 4 種節點類型，來訪問和更新 HTML 頁面中的內容。

關於 Node 對象，咱們會在後面的章節中學習。

節點之間的關係

DOM 中的 M 表示 Model（模型），也能夠用來表示 DOM 節點樹結構中節點之間的關係。

在 DOM 節點樹結構中，主要具備如下三層關係。

父級與子級

若是咱們將 HTML 頁面中某一個元素做爲父級的話，那包含在該元素內的第一層全部元素均可以稱爲該元素的子級。

例如，咱們來看一下下面這個 DOM 節點樹結構:

在上面的 DOM 節點樹結構中，<html> 元素做爲父級，<head> 和 <body> 元素做爲子級。

祖先與後代

若是咱們將 HTML 頁面中某一個元素做爲祖先的話，那包含在該元素內的全部元素（除子級以外的）均可以稱爲該元素的後代。

例如，咱們來看一下下面這個 DOM 節點樹結構:

在上面的 DOM 節點樹結構中，<html> 元素做爲祖先，<meta>、<title>、<h2> 和 <p> 元素做爲後代。

兄弟關係

具備相同父級元素的兩個或幾個元素之間就是兄弟關係。例如，咱們來看一下下面這個 DOM 節點樹結構:

在上面的 DOM 節點樹結構中，<meta> 和 <title> 元素就是兄弟關係。由於它們具備相同的父級元素 <head>。

值得注意的是: <title> 和 <h2> 元素並非兄弟關係。由於它們的父級元素並非相同元素。

DOM 訪問和更新 HTML 頁面中的內容，主要依靠 DOM 節點樹結構中這三種節點關係完成。

本教程免費開源，任何人均可以避免費學習、分享，甚至能夠進行修改。但須要註明做者及來源，而且不能用於商業。

本教程採用知識共享署名-非商業性使用-禁止演繹 4.0 國際許可協議進行許可。

相關文章

相關標籤/搜索

EASYDOM系列教程

HighCharts系列教程

zabbix教程系列

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<