在 JavaScript 中按型別獲取元素

1. 在 JavaScript 中通過 querySelectorAll() 獲取元素
2. 在 JavaScript 中通過 getElementsByTagName() 獲取元素

JavaScript 提供了多種獲取元素的方法，例如 getElementById() 和 getElementByClass()。但是如果你想選擇/處理所有特定型別的元素怎麼辦？JavaScript 提供了 querySelectorAll() 方法或 getElementsByTagName() 方法來執行這樣的任務。

在本文中，我們將學習如何在 JavaScript 中按型別獲取元素。

在 JavaScript 中通過 querySelectorAll() 獲取元素

這是一個內建的 document 方法，由 JavaScript 提供並返回其 selectors 匹配指定選擇器的元素物件/NodeList。也可以傳遞多個選擇器。querySelectorAll() 和 querySelector() 之間有一個區別。對於第一個，返回匹配元素的所有物件，然後對於第二個，它是單個匹配元素物件。如果傳遞了無效的選擇器，則會發出 SyntaxError。

語法

document.querySelectorAll($selectors);

引數

• $selectors：這是一個強制引數，指定必須匹配的 HTML 屬性的 selector。可以通過逗號分隔傳遞多個選擇器。例如，document.querySelectorAll("p") 查詢所有 p 標籤元素。

返回值

如果找到對應的元素，則返回對應的 DOM 元素物件；否則，它返回空的 NodeList。

示例程式碼：

<div>
  <label>FirstName</label>
  <input type="text" id="firstName" value="John">
</div>
<div>
  <label>Last Name</label>
  <input type="text" id="lastName" value="Doe">
</div>

const selectors = document.querySelectorAll('input[type=text]');
console.log(selectors.length, selectors[0].value, selectors[1].value);

輸出：

2
John
Doe

在 JavaScript 中通過 getElementsByTagName() 獲取元素

這是 JavaScript 提供的內建 document 方法，並返回其 tag 與指定標籤名稱匹配的元素 objects/NodeList。根節點也包含在搜尋中，並返回實時 HTML 集合。

語法

document.getElementsByTagName($name);

引數

• $name：這是一個強制引數，指定必須匹配的 HTML 屬性的 tagName。

返回值

如果找到對應的元素，則返回對應的 DOM 元素物件；否則，它返回 null。

getElementsByTagName 和 querySelectorAll 之間的唯一區別是第一個只選擇指定標籤名稱與給定標籤名稱匹配的元素。相比之下，querySelectorAll 可以使用任何選擇器，這為其提供了更大的靈活性和功能。

此外，getElementsByTagName 返回活動節點列表，而 querySelectorAll 返回靜態節點列表。活動節點列表有助於在 DOM 更改時立即更新結果，並且不需要你觸發查詢。

示例程式碼：

<div>
  <label>FirstName</label>
  <input type="text" id="firstName" value="John">
</div>
<div>
  <label>Last Name</label>
  <input type="text" id="lastName" value="Doe">
</div>

const inputs = document.getElementsByTagName('input');

for(let i = 0; i < inputs.length; i++) {
    if(inputs[i].type.toLowerCase() == 'text') {
        console.log(inputs[i].value);
    }
}

輸出：

John
Doe