JavaScript HTML DOM 元素

本页面教你如何在 HTML 页面中查找和访问 HTML 元素。

查找 HTML 元素

通常情况下，在 JavaScript 中，您可能希望操作 HTML 元素。

为此，您需要先找到这些元素。有几种方法可以做到这一点。

• 通过 ID 查找 HTML 元素
• 通过标签名查找 HTML 元素
• 通过类名查找 HTML 元素
• 通过 CSS 选择器查找 HTML 元素
• 通过 HTML 对象集合查找 HTML 元素

通过 ID 查找 HTML 元素

在 DOM 中查找 HTML 元素最简单的方法是使用元素 ID。

此示例查找具有 id="intro" 的元素

如果找到元素，该方法将返回该元素作为对象（在元素中）。

如果未找到元素，则元素将包含 null。

通过标签名查找 HTML 元素

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

此示例查找具有 id="main" 的元素，然后查找 "main" 内部的所有 <p> 元素

通过类名查找 HTML 元素

如果您要查找具有相同类名的所有 HTML 元素，请使用 getElementsByClassName()。

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

通过 CSS 选择器查找 HTML 元素

如果您要查找与指定 CSS 选择器匹配的所有 HTML 元素（ID、类名、类型、属性、属性值等），请使用 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>