JavaScript - DOM 元素

DOM 元素

HTML DOM 元素是文件物件模型元素的首字母縮寫。使用 JavaScript，我們可以操作 HTM 元素。我們可以使用 id、屬性、標籤名稱、類名稱等訪問 HTML 元素。

當網頁在瀏覽器中載入時，它會建立一個DOM 樹來表示網頁的結構。網頁包含各種HTML 元素，您可以使用 JavaScript 中的屬性和方法來操作它們。在這裡，我們將討論訪問、修改或替換等 DOM 元素。

訪問 DOM 元素

您可以使用不同的方法來訪問 HTML 元素，如下所示。

使用其“id”獲取 HTML 元素

在網頁中，每個 HTML 元素都可以具有唯一的 id 值。您可以使用 getElementById() 方法使用 id 訪問 HTML 元素。

語法

請按照以下語法使用 getElemenetById() 方法使用其 id 訪問 HTML 元素。

document.getElementById('id')

在上述語法中，您需要將“id”替換為元素的實際 id。

示例

在下面的程式碼中，我們使用 id 訪問 div 元素，並使用“innerHTML”屬性更改其內部 HTML。

<html>
<body>
   <div id = "output"> </div>
   <script>
      document.getElementById('output').innerHTML = 
		"The element is accessed using the id.";
   </script>
</body>
</html>

輸出

The element is accessed using the id.

使用“name”獲取 HTML 元素

HTML 可以具有“name”屬性。您可以使用 getElementByName() 方法使用“name”屬性的值訪問 HTML 元素。

語法

請按照以下語法使用 getElementByName() 方法。

document.getElementsByName('name')

在這裡，您需要將“name”替換為元素的 name 屬性的值。

示例

在下面的程式碼中，我們使用 name 訪問 div 元素。它返回一個包含作為引數傳遞的 name 的節點陣列。

<html>
<body>
   <div name = "text"> Hello World! </div>
   <div id = "output">The content of the div elment is:  </div>
   <script>
      const divEle = document.getElementsByName('text');
      document.getElementById("output").innerHTML += divEle[0].innerHTML;
   </script>
</body>
</html>

輸出

Hello World!
The content of the div elment is: Hello World!

使用“className”獲取 HTML 元素

HTML 的 class 屬性包含字串值。單個 HTML 元素也可以具有多個類。您可以使用 getElementByClassName() 方法使用多個類中的任何一個類名訪問 HTML 元素。

語法

請按照以下語法使用 getElementByClassName() 方法。

document.getElementsByClassName('className');

在上述語法中，將“className”替換為 elment 的“class”屬性的值。

示例

在下面的程式碼中，我們使用類名訪問 div 元素。

<html>
<body>
   <div class = "fruit"> Apple </div>
   <div id = "output">The name of the fruit is: </div>
   <script>
      const divEle = document.getElementsByClassName('fruit');
      document.getElementById("output").innerHTML += divEle[0].innerHTML;
   </script>
</body>
</html>

輸出

Apple
The name of the fruit is: Apple

使用“tag”名稱獲取 HTML 元素

每個 HTML 元素都是使用 HTML 標籤定義的。您可以使用標籤 getElementByTagName() 方法使用標籤名稱訪問 HTML 元素。

語法

請按照以下語法使用 getElementByTagName() 方法。

document.getElementsByTagName('tag');

在以上語法中，將“tag”替換為 HTML 標籤，例如“p”、“a”、“img”等。

示例

在下面的程式碼中，我們使用 getElementTagName() 方法訪問 <p> 元素。

它返回 <p> 元素的 Nodelist。

<html>
<body>
<p>This is the first paragraph.</p>
<p>This is the second paragrraph.</p>
<div id = "output"> </div>
<script>
   const numbers = document.getElementsByTagName('p');
   document.getElementById("output").innerHTML = 
   "The first 'p' element is: " + numbers[0].innerHTML + "<br>" + 
   "The second 'p' element is: " + numbers[1].innerHTML;
</script>
</body>
</html>

輸出

This is the first paragraph.

This is the second paragrraph.

The first 'p' element is: This is the first paragraph.
The second 'p' element is: This is the second paragrraph.

修改 DOM 元素

JavaScript 允許您修改和替換 HTML DOM 元素。

在本節中，我們將介紹修改 DOM 元素的內容和替換子元素。

修改 DOM 元素的內容

您可以使用元素的“textContent”屬性來修改 HTML 元素的文字。但是，您可以使用其他屬性（如 innerHTML、outerHTML、outerText 等）來修改 HTML 元素的內容。

語法

請按照以下語法使用 textContent 屬性修改 HTML 元素的文字內容。

element.textContent = newText;

在以上語法中，我們將“newText”動態值分配給“textContent”屬性，以更新“element”的內容。

示例

在輸出中，當您單擊按鈕時，它將呼叫 updateText() 函式並使用 textContent 屬性更改 div 元素的文字。

<html>
<body>
   <button onclick = "updateText()"> Update Text </button>
   <p id = "text"> Hello World! </p>
   <script>
      function updateText() {
         document.getElementById("text").textContent = "This is updaetd text!";
      }
   </script>
</body>
</html>

替換子元素

在 JavaScript 中，您可以使用 replaceChild() 方法替換特定 HTML 元素的子元素。

語法

請按照以下語法在 JavaScript 中使用 replaceChild() 方法。

textDiv.replaceChild(newNode,replacableNode);

replaceChild() 方法將新節點作為第一個引數，將需要替換的節點作為第二個引數。

示例

在下面的程式碼中，我們使用 replaceChild() 方法將 div 元素的第二個子元素替換為一個新節點。在這裡，我們還使用了 createTextNode() 建立了一個包含“Hello World！”文字的新節點。

<html>
<body>
   <button onclick = "replaceText()"> Replace Child </button>
   <div id = "text">
      <p> Hi Users! </p>
   </div>
   <script>
      function replaceText() {
         let textDiv = document.getElementById("text");
         let newText = document.createTextNode("Hello World");
         textDiv.replaceChild(newText, textDiv.childNodes[1]);
      }
   </script>
</body>
</html>

向 DOM 元素新增事件

您可以使用 addEventListner() 方法向 DOM 元素新增事件，以與 HTML 元素進行互動。

語法

請按照以下語法使用 addEventListner() 方法。

element.addEventListener(eventName, callback);

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

示例

我們在下面的程式碼中為 div 元素添加了 click 事件。每當您單擊 div 元素時，它都會在網頁上列印一條訊息。

<html>
<body>
   <div id = "text" style = "background-color: red;color:white">
      <p> Some text </p>
      <p> Some other text </p>
   </div>
   <div id = "output"> </div>
   <script>
      let text = document.getElementById("text");
      text.addEventListener("click", function () {
         document.getElementById("output").innerHTML = 
			"You clicked on the div element";
      });
   </script>
</body>
</html>

JavaScript DOM 元素方法列表

下表顯示了 JavaScript 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() 它允許您在相對於呼叫此方法的元素的特定位置插入文字內容。

JavaScript DOM 元素屬性列表

下表包含 JavaScript 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 它返回指定元素的直接子元素的數量。

列印頁面