在 JavaScript 中，取得 HTML 元件可以使用幾種不同的方法

根據你想取得的元素特徵（例如 ID、類別、標籤等），以下是幾種常見的方式：

1. 根據 ID 取得元素

如果 HTML 元件有一個唯一的 id 屬性，你可以使用 document.getElementById 方法來取得它。

<div id="myDiv">Hello World</div>

const element = document.getElementById("myDiv");

console.log(element);  // 輸出: <div id="myDiv">Hello World</div>

2. 根據 class 取得元素

若 HTML 元件有 class 屬性，你可以使用 document.getElementsByClassName 方法來取得所有符合的元素。

<div class="myClass">Element 1</div>

<div class="myClass">Element 2</div>

const elements = document.getElementsByClassName("myClass");

console.log(elements);  // 輸出: HTMLCollection [<div class="myClass">Element 1</div>, <div class="myClass">Element 2</div>]

如果你只想取得某個特定元素，可以使用索引：

console.log(elements[0]);  // 輸出: <div class="myClass">Element 1</div>

3. 根據 tag 取得元素

使用 document.getElementsByTagName 方法，你可以取得頁面中所有指定標籤名稱的元素。

<p>Paragraph 1</p>

<p>Paragraph 2</p>

const paragraphs = document.getElementsByTagName("p");

console.log(paragraphs);  // 輸出: HTMLCollection [<p>Paragraph 1</p>, <p>Paragraph 2</p>]

4. 根據 CSS 選擇器 取得元素

使用 document.querySelector 或 document.querySelectorAll 方法，你可以基於 CSS 選擇器取得元素。

• querySelector 會返回第一個符合選擇器的元素
• querySelectorAll 會返回所有符合選擇器的元素（返回 NodeList）

<div class="container">

  <p class="myClass">Hello</p>

  <p class="myClass">World</p>

</div>

// 取得第一個符合的 p 元素

const firstParagraph = document.querySelector("p.myClass");

console.log(firstParagraph);  // 輸出: <p class="myClass">Hello</p>

// 取得所有符合的 p 元素

const allParagraphs = document.querySelectorAll("p.myClass");

console.log(allParagraphs);  // 輸出: NodeList(2) [<p class="myClass">Hello</p>, <p class="myClass">World</p>]

5. 根據 name 取得元素

如果 HTML 元件有 name 屬性，你可以使用 document.getElementsByName 來取得對應的元素。

<input type="text" name="username" />

const inputElement = document.getElementsByName("username");

console.log(inputElement);  // 輸出: NodeList [<input name="username" type="text">]