JavaScript HTML DOM 元素

本頁教您如何在 HTML 頁面中查詢和訪問 HTML 元素。

查詢 HTML 元素

通常，您會使用 JavaScript 來操作 HTML 元素。

要做到這一點，您必須先找到這些元素。有幾種方法可以實現：

• 按 id 查詢 HTML 元素
• 按標籤名查詢 HTML 元素
• 按類名查詢 HTML 元素
• 按 CSS 選擇器查詢 HTML 元素
• 按 HTML 物件集合查詢 HTML 元素

按 Id 查詢 HTML 元素

在 DOM 中查詢 HTML 元素最簡單的方法是使用元素的 id。

此示例查詢 id="intro" 的元素

如果找到了元素，該方法將返回該元素物件（在 element 中）。

如果未找到元素，element 將包含 null。

按標籤名查詢 HTML 元素

此示例查詢所有 <p> 元素

此示例查詢 id="main" 的元素，然後查詢 "main" 中的所有 <p> 元素

按類名查詢 HTML 元素

如果您想查詢具有相同類名的所有 HTML 元素，請使用 getElementsByClassName()。

此示例返回所有 class="intro" 的元素的列表。

按 CSS 選擇器查詢 HTML 元素

如果您想查詢所有匹配指定 CSS 選擇器（id、類名、型別、屬性、屬性值等）的 HTML 元素，請使用 querySelectorAll() 方法。

此示例返回所有 class="intro" 的 <p> 元素的列表。

按 HTML 物件集合查詢 HTML 元素

此示例查詢表單集合中 id="frm1" 的表單元素，並顯示所有元素的值

以下 HTML 物件（和物件集合）也是可訪問的

• document.anchors
• document.body
• document.documentElement
• document.embeds
• document.forms
• document.head
• document.images
• document.links
• document.scripts
• document.title

<p id="demo"></p>

<script>
 = "Hello";
</script>