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>