JavaScript - DOM 方法與屬性

在 JavaScript 中，DOM 方法用於對 HTML 元素執行特定操作。DOM 使用邏輯樹表示 HTML 文件或網頁。在樹中，每個分支都以一個節點結束，每個節點都包含物件。DOM 方法允許我們以程式設計方式訪問該樹。使用 DOM 方法，您可以更改文件的結構、樣式或內容。

例如，您可以使用 DOM 方法透過 id、屬性、標籤名稱、類名等訪問 HTML 元素，向文件或 HTML 元素新增事件，向 DOM 新增新的 HTML 元素等。

語法

以下是訪問和執行 JavaScript 中 DOM 方法的語法：

window.document.methodName();
OR
document.methodName();

您可以選擇使用或不使用“window”物件來訪問文件物件的 method。

在這裡，我們解釋了一些 HTML DOM 方法並舉例說明，並在參考中涵蓋了其他方法。

JavaScript document.getElementById() 方法

JavaScript 文件物件的 getElementById() 方法是最流行的方法，用於使用 id 訪問 HTML 元素。

語法

請按照以下語法使用 document.getElementById() 方法。

const ele = document.getElementById("id");

getElementById() 方法將 HTML 元素的 id 作為引數。

示例

在下面的程式碼中，“div”元素的 id 為“output”。

在 JavaScript 中，我們使用 document.getElementById() 方法透過其 id 訪問 div 元素。

此外，我們使用元素的“innerHTML”屬性向“div”元素新增額外的 HTML。

<html>
<body>
   <button onclick = "accessEle()"> Access output and write </button>
   <p id = "output"> </p>
   <script>
      function accessEle() {
         document.getElementById("output").innerHTML = 
			"Hello User! You have just clicked the button!";
      }
   </script>
</body>
</html>

JavaScript document.addEventListener() 方法

addEventListener() 方法用於向文件新增事件。

語法

請按照以下語法使用帶有文件的 addEventListener() 方法。

document.addEventListener('mouseover', function () {
// Perform action on the document.
});

addEventListener() 方法將事件名稱作為第一個引數，將回調函式作為第二個引數。

示例

在下面的程式碼中，我們向文件添加了“mouseover”事件。每當您將滑鼠懸停在文件上時，它都會將文件正文的背景顏色更改為紅色。

<html>
<body>
   <h3>JavaScript – document.addEventListener() Method </h3>
   <p> Hover over here to change background color </p>
   <script>
      document.addEventListener('mouseover', function () {
         document.body.style.backgroundColor = 'red';
      });
   </script>
</body>
</html>

JavaScript document.write() 方法

document.write() 方法將文字或 HTML 新增到文件中。它用作為方法引數傳遞的 HTML 替換文件的內容。

語法

請按照以下語法使用 document.write() 方法。

document.write(HTML)

您可以用文字或 HTML 替換“HTML”引數。

示例

在下面的程式碼中，當您單擊按鈕時，我們將執行 writeText() 函式。

在函式中，我們使用 document.write() 方法向網頁新增 HTML。它替換整個網頁的 HTML。

<html>
<body>
   <button onclick = "writeText()"> Add HTML </button>
   <script>
      function writeText() {
         document.write("<p>Hello Users, Text is written using the document.write() method. </p>");
      }
   </script>
</body>
</html>

DOM 方法列表

在下表中，我們列出了與 HTML 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 元素內部是否有任何子元素。
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.	getBoundingClientRect() 此方法用於獲取元素的大小及其相對於視口的位置。
38.	getElementsByClassName() 此方法檢索與文件或特定元素中指定的類名匹配的元素的活動 HTMLCollection。
39.	getElementsByTagName() 它檢索與指定標籤名匹配的元素的活動 HTMLCollection。
40.	insertAdjacentText() 它允許您在相對於呼叫此方法的元素的特定位置插入文字內容。
41.	namedItem() 它用於獲取集合中第一個 ID 或名稱與引數中提到的名稱匹配的元素。
42.	item() 它返回引數中指定索引位置的 HTMLCollection 中的元素。
43.	entries() 此方法檢索一個迭代器，它允許我們遍歷物件中的所有鍵/值對。
44.	forEach() 此方法根據插入順序，對列表中的每個值對呼叫引數中提到的回撥函式一次。
45.	item() 此方法從引數中指定的索引處檢索 NodeList 中的節點。
46.	keys() 此方法檢索一個迭代器，它允許我們遍歷 NodeList 中包含的所有鍵。
47.	writeln() 此方法提供將 HTML 或 JavaScript 表示式直接寫入文件的功能。它在每個語句後新增一個換行符。
48.	write() 此方法提供將 HTML 或 JavaScript 表示式直接寫入文件的功能。
49.	hasFocus() 它用於確定文件或文件中的任何元素是否具有焦點。
50.	renameNode() 它用於重新命名節點。
51.	open() 此方法開啟文件以進行寫入。
52.	normalizeDocument() 此方法規範化整個 HTML 文件。
53.	normalize() 它刪除空文字節點，並將父節點中的相鄰文字節點連線起來。
54.	adoptNode() 此方法將另一個文件中的節點採用到當前文件中。
55.	addEventListener() 它用於設定一個函式，該函式將在指定事件傳遞到目標時被呼叫。
56.	execCommand() 此方法用於對使用者選擇的可編輯部分執行指定的命令。
57.	createTextNode() 它用於使用指定的文字建立文字節點。
58.	createEvent() 它用於建立事件物件，其事件型別在引數中指定。
59.	createDocumentFragment() 它建立一個新的空文件片段，該片段駐留在記憶體中。
60.	createComment() 此方法用於使用給定文字建立註釋節點。
61.	createAttribute() 它用於使用 JavaScript 為 HTML 元素建立具有特定名稱的屬性，並返回 Attr 物件。
62.	close() 它關閉輸出流。
63.	getElementsByTagName() 它是一個只讀方法，用於獲取文件中所有具有引數中指定標籤名的元素的集合。
64.	getElementsByName() 此方法用於返回具有引數中指定名稱屬性的元素集合。
65.	getElementsByClassName() 此方法用於獲取文件中所有具有指定類名的元素的集合。
66.	getElementById() 它返回給定 ID 的元素。
67.	createElement() 此方法建立由標籤名或元素名指定的 HTML 元素。
68.	add() 此方法將引數中指定的令牌新增到 DOMTokenList 中。
69.	contains() 此方法檢查列表是否包含指定的令牌，並相應地返回布林值。
70.	entries() 此方法返回一個迭代器，允許遍歷所有鍵/值對。
71.	forEach() 此方法根據插入順序，對列表中的每個值對呼叫引數中提到的回撥函式一次。
72.	item() 此方法從引數中指定的索引處返回 DOMTokenList 中的令牌。
73.	keys() 此方法返回一個迭代器，允許您遍歷令牌列表中包含的所有鍵。
74.	remove() 此方法從 DOMTokenList 中刪除引數中指定的令牌。
75.	replace() 此方法用引數中指定的新的令牌替換 DomTokenList 中現有的令牌。
76.	supports() 此方法檢查引數中指定的令牌是否在 DOMTokenList 中受支援。
77.	toggle() 此方法動態地向元素類屬性新增或刪除令牌或類。
78.	values() 此方法返回一個迭代器，允許我們遍歷令牌列表中包含的所有值。

DOM 屬性列表

下表顯示了與 HTML 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 它返回一個節點，該節點包含父元素的最後一個子元素。
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 文件中存在的所有 embed 元素的集合。
70.	domConfig 此屬性已棄用，因此將在所有新瀏覽器中返回 undefined。
71.	documentURI 此屬性用於設定或返回文件的位置。
72.	documentMode documentMode 屬性是 IE8 屬性，它確定瀏覽器使用的呈現模式。
73.	documentElement 它將 documentElement 作為 Element 物件返回。
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 它用於獲取當前正在執行文件的伺服器的域名。

列印頁面