HTML - 文件物件模型

HTML 文件物件模型 (DOM)

HTML 文件物件模型（簡稱 HTML DOM）以分層順序（或樹狀結構）表示 HTML 文件的所有元素。其中此樹的每個節點都代表 HTML 文件中的一個元素。

訪問和修改 HTML DOM

使用 HTML DOM 方法，我們可以訪問樹並修改相應 HTML 文件的結構或內容。我們還可以將事件附加到節點。

HTML DOM 樹結構

例如，如果您的 HTML 文件包含諸如 <html>、<head>、<body>、<title>、<link>、<img> 和 <p> 等元素，則瀏覽器將建立 HTML 文件的 DOM 樹，可以表示如下所示的圖中 -

請注意，每個 HTML 文件都包含 <html>、<head> 和 <body> 標籤。根元素是 <html>，<head> 和 <body> 標籤是其子元素。

什麼是文件物件模型？

文件物件模型 (DOM) 是一種程式設計介面，充當網頁和指令碼或程式語言之間的橋樑。它將網頁文件（如 HTML 或 XML）表示為物件的樹，其中樹的每個分支都以節點結尾，並且每個節點都包含物件。

單擊下面給出的按鈕以正確理解它。它將生成一個 DOM 樹。

DOM 樹示例 - 技術教學

DOM 提供了一組方法，允許諸如 JavaScript 等程式語言訪問 DOM 樹。使用這些方法，您可以更改文件的結構、樣式或內容。它使網頁具有互動性和動態性。

DOM 不是一種程式語言，它被設計為與語言無關。大多數 Web 開發人員透過 JavaScript 使用 DOM，但是，可以為任何語言構建 DOM 的實現。

HTML DOM 與 JavaScript DOM

我們使用 HTML 來構建網頁，並使用 JavaScript 使其具有互動性。但是，JavaScript 無法直接理解網頁。它藉助 HTML DOM。當 HTML 頁面載入時，瀏覽器會建立頁面的物件模型，然後 JavaScript 可以與之互動以操縱頁面的內容、結構和樣式。

JavaScript 可以藉助物件模型執行以下操作 -

訪問和替換 HTML 元素。
訪問和替換 HTML 屬性。
更改頁面中的所有 CSS 樣式。
響應使用者事件。
為網頁新增動畫。

下表說明了 HTML DOM 和 JavaScript DOM 之間的區別 -

HTML DOM	JavaScript DOM
HTML DOM 是 HTML 的物件模型，它以樹狀結構表示 HTML 文件的所有元素。	HTML DOM 是 JavaScript 的 API，有助於新增、更改和替換 HTML 文件的元素、屬性和事件。

DOM 方法參考

以下是重要 DOM 方法的列表 -

序號	方法和描述
1.	toString() 它用於將 HTML 元素轉換為字串格式。
2.	setAttribute() 此方法允許您為特定元素定義屬性。
3.	setAttributeNode() 此方法允許您在特定元素上定義特定屬性節點。
4.	scrollIntoView() 它確保可滾動容器的網頁上的特定元素透過調整滾動位置變得可見。
5.	querySelector() 它用於選擇和訪問文件中與給定 CSS 選擇器匹配的第一個 HTML 元素。
6.	querySelectorAll() 此方法允許您選擇和訪問文件中與給定 CSS 選擇器匹配的所有 HTML 元素。
7.	remove() 此方法可以完全從網頁中刪除元素。
8.	removeAttribute() 此方法用於刪除已在 DOM 結構中的 HTML 元素上設定的任何屬性。
9.	removeAttributeNode() 它允許您從元素中刪除特定屬性節點。
10.	removeChild() 它用於從其父元素中刪除選定的子元素。
11.	removeEventListener() 此方法允許您刪除先前分配給元素的事件偵聽器。
12.	replaceChild() 此方法使我們能夠用另一個子元素替換父元素中的一個子元素。
13.	hasAttribute() 它用於檢查 HTML 元素中是否存在屬性。
14.	hasAttributes() 此方法檢查 HTML DOM 中的元素是否具有屬性。
15.	hasChildNodes() 它用於檢查 HTML 元素內部是否有任何子元素。

點選這裡檢視所有方法列表…… chevron

序號	方法和描述
16.	getAttribute() 它返回屬於 HTML 元素的指定屬性的值。
17.	getBoundingClientRect() 此方法用於獲取元素的大小及其相對於視口的定位。
18.	closest() 此方法返回當前元素（或當前元素本身）與給定 CSS 選擇器匹配的最接近的祖先。如果不存在這樣的祖先，則返回 null。
19.	contains() 您可以使用此方法檢查 DOM 元素是否在其子樹中包含另一個元素。
20.	click() click() 方法在元素上啟用滑鼠點選。
21.	normalize() 它用於透過刪除任何空文字節點來組合 HTML 元素內的相鄰文字節點。
22.	isDefaultNamespace() 它用於檢查特定的名稱空間 URI 是否是文件或元素中元素的預設名稱空間。
23.	isEqualNode() 此方法透過比較它們的屬性、型別和子節點來檢查兩個節點是否相等。
24.	isSameNode() 它檢查兩個節點引用是否指向 HTML 文件中的同一節點物件。
25.	isSupported() 此方法用於檢查 Web 瀏覽器是否可以支援或處理網頁上的特定功能或功能。
26.	insertAdjacentElement() 此方法允許您在網頁上相對於另一個元素的位置準確插入新的 HTML 元素。
27.	insertBefore() 此方法允許您在父元素內新增新的子元素，指定其相對於另一個子元素的位置。
28.	blur() 此方法允許您動態地從 HTML DOM 中的元素中移除焦點。
29.	matches() 此方法檢查元素是否與給定的 CSS 選擇器匹配。
30.	insertAdjacentHTML() 它可以幫助您在相對於呼叫此方法的元素的特定位置插入指定的 HTML 程式碼。
31.	addEventListener() 它用於向元素註冊事件處理程式。
32.	cloneNode() 它複製節點，包括其屬性和子節點。
33.	appendChild() 此方法用於將一個新的子節點（元素）作為指定父節點的最後一個子節點新增。
34.	compareDocumentPosition() 透過比較兩個 DOM 元素（節點）的位置來理解文件結構，並返回一個位掩碼（數值）。
35.	focus() 此方法將焦點設定到特定的網頁元素。
36.	getAttributeNode() 用於獲取屬性節點物件。
37.	getElementsByClassName() 此方法檢索一個即時 HTMLCollection，其中包含在文件或特定元素內與指定類名匹配的元素。
38.	getElementsByTagName() 檢索一個即時 HTMLCollection，其中包含與指定標籤名匹配的元素。
39.	insertAdjacentText() 允許您在相對於呼叫此方法的元素的特定位置插入文字內容。
40.	namedItem() 用於獲取集合中第一個 ID 或名稱與引數中提到的名稱匹配的元素。
41.	item() 返回引數中指定索引位置的 HTMLCollection 中的元素。
42.	entries() 此方法檢索一個迭代器，允許我們遍歷物件中的所有鍵/值對。
43.	forEach() 此方法根據插入順序，對列表中的每個值對呼叫引數中提到的回撥函式一次。
44.	item() 此方法從引數中指定的索引處檢索 NodeList 中的節點。
45.	keys() 此方法檢索一個迭代器，允許我們遍歷 NodeList 中包含的所有鍵。
46.	writeln() 此方法提供將 HTML 或 JavaScript 表示式直接寫入文件的功能。它在每個語句後新增一個換行符。
47.	write() 此方法提供將 HTML 或 JavaScript 表示式直接寫入文件的功能。
48.	hasFocus() 用於確定文件或文件內的任何元素是否具有焦點。
49.	renameNode() 用於重新命名節點。
50.	open() 此方法開啟文件以進行寫入。
51.	normalizeDocument() 此方法規範化整個 HTML 文件。
52.	normalize() 它刪除空文字節點，並將父節點中的相鄰文字節點連線起來。
53.	adoptNode() 此方法將來自另一個文件的節點採用到當前文件中。
54.	addEventListener() 用於設定一個函式，每當指定的事件傳遞到目標時，就會呼叫該函式。
55.	execCommand() 此方法用於在使用者選擇的可編輯部分上執行指定的命令。
56.	createTextNode() 用於使用指定的文字建立一個文字節點。
57.	createEvent() 用於建立一個事件物件，其事件型別在引數中指定。
58.	createDocumentFragment() 建立一個新的空文件片段，該片段駐留在記憶體中。
59.	createComment() 此方法用於使用給定的文字建立註釋節點。
60.	createAttribute() 用於使用 JavaScript 為 HTML 元素建立具有特定名稱的屬性，並返回 Attr 物件。
61.	close() 關閉輸出流。
62.	getElementsByTagName() 這是一個只讀方法，用於獲取文件中所有具有引數中指定標籤名的元素的集合。
63.	getElementsByName() 此方法用於返回具有引數中指定的 name 屬性的元素集合。
64.	getElementsByClassName() 此方法用於獲取文件中所有具有指定類名的元素的集合。
65.	getElementById() 返回給定 ID 的元素。
66.	createElement() 此方法根據標籤名或元素名建立 HTML 元素。
67.	add() 此方法將引數中指定的一個或多個標記新增到 DOMTokenList 中。
68.	contains() 此方法檢查列表是否包含指定的標記，並相應地返回布林值。
69.	entries() 此方法返回一個迭代器，允許遍歷所有鍵/值對。
70.	forEach() 此方法根據插入順序，對列表中的每個值對呼叫引數中提到的回撥函式一次。
71.	item() 此方法返回引數中指定索引處的 DOMTokenList 中的標記。
72.	keys() 此方法返回一個迭代器，允許您遍歷標記列表中包含的所有鍵。
73.	remove() 此方法從 DOMTokenList 中刪除引數中指定的一個或多個標記。
74.	replace() 此方法用引數中指定的新標記替換 DomTokenList 中現有的標記。
75.	supports() 此方法檢查引數中指定的標記是否在 DOMTokenList 中受支援。
76.	toggle() 此方法動態地向元素的 class 屬性新增或刪除標記或類。
77.	values() 此方法返回一個迭代器，允許我們遍歷標記列表中包含的所有值。

DOM 屬性參考

以下是重要的 DOM 屬性列表：

序號	方法和描述
1.	title 它幫助我們訪問和更新儲存在元素的 title 屬性中的值。
2.	textContent 此屬性用於訪問和更新 HTML 元素及其所有子元素的文字內容，作為一個字串。
3.	tagName 它以大寫形式提供定義網頁上元素的 HTML 標籤的名稱。
4.	style 使用此屬性，您可以獲取直接為特定元素設定的 CSS 樣式。
5.	tabIndex 用於訪問和更新元素的 tabIndex 屬性的值。
6.	scrollLeft 此屬性用於訪問和更新元素內容水平滾動的距離。
7.	scrollTop 用於訪問和更新元素內容垂直滾動的距離。
8.	scrollWidth 此屬性以畫素為單位提供元素內容的總水平寬度。
9.	scrollHeight 您可以使用此屬性以畫素為單位獲取元素內容的總垂直高度。
10.	id id 屬性用於設定和檢索元素的 id 屬性的值。
11.	innerText 它允許我們檢索或更改網頁上 HTML 元素內的可見文字內容。
12.	isContentEditable 用於檢查網頁元素是否可以由使用者直接編輯。
13.	lang lang 屬性是 HTML 元素的屬性，用於指定語言程式碼。
14.	lastChild lastChild 屬性返回一個指向特定父元素的最後一個子節點的節點。
15.	lastElementChild 它返回一個包含父元素的最後一個子元素的節點。

點選這裡檢視所有方法列表…… chevron

序號	屬性和描述
16.	namespaceURI 元素的 namespaceURI 屬性提供分配給該元素的名稱空間 URI。
17.	nextElementSibling 使用此屬性，您可以獲取特定元素序列中的下一個節點。
18.	nextSibling 用於訪問 DOM 樹中當前節點之後的下一個節點。
19.	nodeName 此屬性用於根據節點的內容識別節點的型別和名稱。
20.	nodeType nodeType 屬性返回一個整數，表示節點的型別。
21.	nodeValue 用於訪問和更新節點的值。
22.	offsetHeight 此屬性用於獲取網頁上該元素的完整可見高度，包括其垂直填充和邊框，以畫素為單位。
23.	offsetLeft 它返回從元素的左邊界到其最近的定位父元素的左邊界的距離（以畫素為單位）。
24.	offsetParent 用於查詢影響另一個元素定位的最近的祖先元素。
25.	offsetWidth 元素的 offsetWidth 屬性提供網頁上該元素的總可見寬度。
26.	outerHTML outerHTML 屬性獲取元素的整個 HTML 程式碼。
27.	outerText 此屬性可以訪問或更新 HTML 元素的文字內容，包括其所有巢狀的文字和元素。
28.	ownerDocument 它提供包含特定元素的文件節點的物件。
29.	parentElement 它允許您訪問 HTML 元素中特定元素的直接父元素。
30.	parentNode 此屬性用於訪問 HTML 元素中特定節點的直接父節點。
31.	classList 它充當一個活動的容器，儲存分配給元素的 class 屬性的 CSS 類集合。
32.	childNodes 用於檢索元素的所有子節點，包括元素、文字節點和註釋。
33.	className 您可以使用此屬性訪問或修改元素的 class 屬性的值。
34.	clientTop 用於在網頁佈局中獲取準確的元素定位和大小計算。
35.	firstElementChild 它提供給定父元素中的第一個子元素。
36.	offsetTop 使用此屬性，您可以獲取從元素頂部邊緣到其最近的定位祖先元素頂部邊緣的垂直距離（以畫素為單位）。
37.	attributes 它返回包含 HTML 元素屬性集合的“NameNodeMap”。
38.	accesskey 此屬性允許您為網頁上的元素分配鍵盤快捷鍵。
39.	firstChild 它幫助您訪問 HTML DOM 中給定父元素的第一個子節點。
40.	innerHTML 此屬性允許我們讀取元素的現有 HTML 內容並使用新的 HTML 內容更新它。
41.	dir 它提供訪問許可權，用於設定和檢索 HTML 中任何元素的 dir 屬性的值。
42.	contentEditable 您可以使用此屬性使 HTML 元素內的文字內容可編輯。
43.	clientWidth 它返回元素的寬度，包括填充，但不包括邊距、邊框或捲軸寬度。
44.	clientLeft 此屬性用於獲取元素的左邊框寬度，不包括左填充或邊距。
45.	clientHeight 用於獲取元素的內部高度，包括填充，但不包括邊距、邊框或捲軸寬度。
46.	children 此屬性返回子元素的集合。
47.	childElementCount 它返回指定元素的直接子元素的數量。
48.	src 此屬性用於 <img>、<script> 或 <iframe> 等元素，以獲取或設定源 URL。
49.	href 此屬性用於錨 <a> 元素，以獲取或設定超連結引用。
50.	checked 此屬性用於獲取或設定複選框或單選按鈕的選中狀態。
51.	disabled 此屬性用於獲取或設定輸入元素的停用狀態。
52.	length 它返回 HTMLCollection 中元素的數量。
53.	length 此方法返回 NodeList 中專案的數量。
54.	value 此屬性用於設定或獲取屬性的值。
55.	specified 它檢查是否指定了提到的屬性。
56.	name 用於獲取元素上使用屬性的名稱。
57.	isId 此屬性用於確定 HTML 屬性是否為“id”屬性。
58.	URL 這是一個只讀屬性，返回文件的完整 URL，包括協議。
59.	title 此屬性用於設定或獲取文件的標題。
60.	strictErrorChecking 用於確定文件是否強制執行嚴格錯誤檢查。
61.	scripts 這是一個只讀屬性，用於將 HTML 文件中存在的所有指令碼元素作為集合返回。
62.	links links 是一個只讀屬性，它返回與具有 href 屬性的 a 和 area 元素相對應的所有連結的集合。
63.	lastModified 此屬性返回當前文件上次修改時的日期和時間。
64.	inputEncoding inputEncoding 屬性返回一個字串，表示文件的字元編碼。
65.	implementation 這將返回與當前文件關聯的 DOMImplementation 物件。
66.	images 這是一個只讀屬性，用於將 HTML 文件中存在的所有 img 元素作為集合返回。
67.	head head 屬性返回 HTML head 元素。
68.	forms forms 是一個只讀屬性，用於將 HTML 文件中存在的所有表單元素作為集合返回。
69.	embeds 這是一個只讀屬性，它返回 HTML 文件中存在的所有嵌入元素的集合。
70.	domConfig 此屬性已棄用，因此在所有新瀏覽器中都將返回 undefined。
71.	documentURI 此屬性用於設定或返回文件的位置。
72.	documentMode documentMode 屬性是 IE8 屬性，用於確定瀏覽器使用的渲染模式。
73.	documentElement 它將 documentElement 作為元素物件返回。
74.	doctype 此屬性返回與當前 HTML 文件關聯的 DTD（文件型別宣告）。
75.	designMode 它可以幫助我們確定整個文件是否可編輯。
76.	defaultView 用於返回文件的視窗物件。
77.	cookie HTML DOM document cookie 屬性用於建立、讀取和刪除 cookie。
78.	charset 它返回 HTML 文件的字元編碼。
79.	applets 用於返回文件中所有 applet 元素的列表，但此屬性現已棄用。
80.	characterSet 此屬性用於獲取文件的字元編碼。
81.	anchors anchors 屬性是一個只讀屬性，列出文件中所有具有 name 屬性的“a”標籤。
82.	baseURI 用於返回文件的基本統一資源識別符號 (URI)。
83.	length 此方法返回令牌列表中的令牌數。
84.	value 此方法將 DOMTokenList 序列化為字串。
85.	domain 用於獲取當前正在執行文件的伺服器的域名。

關於 DOM 的常見問題

關於 DOM 有幾個常見問題 (FAQ)，本節嘗試簡要回答其中一些問題。

DOM 的全稱是什麼？ chevron

DOM 的全稱是文件物件模型。

為什麼在 JavaScript 中使用 DOM？ chevron

在 JavaScript 中，DOM 用於與 HTML 網頁互動並操作頁面的內容、結構和樣式。

DOM 是一種程式語言嗎？ chevron

不，DOM 不是一種程式語言。它是一個將網頁連線到程式語言的程式設計介面。

什麼是 DOM 介面？ chevron

DOM 介面提供各種方法和屬性來互動和操作網頁。一些常見的介面包括 Document、Element、Event 等等。

列印頁面