DOM 查找元素

DOM 提供了很多实用的方法操作元素，本文展示了在 HTML 页面中查找和访问 HTML 元素的方法。

通常，使用 JavaScript 来操作 HTML 元素的时候，必须先找到要操作的元素。

在 DOM 中查找元素有很多种方法：

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

按 ID 查找 HTML 元素

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

此示例查找 id 为 intro 的元素：

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

如果找到该元素，该方法会将元素作为对象返回，并赋值给 element 变量。

如果未找到该元素，则 element 变量的值为 null .

按标签名称查找 HTML 元素

getElementsByTagName() 方法通过标签名查找元素，返回一个 HTMLCollection 对象包含所有符合的元素。

查找所有 <p> 元素：

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

查找 id="main" 的元素，然后在找到的元素中查找所有 <p> 元素：

const x = document.getElementById("main");
const y = x.getElementsByTagName("p");

按类名查找 HTML 元素

如果要查找具有相同类名的所有 HTML 元素，请使用 getElementsByClassName()，返回一个 HTMLCollection 对象包含所有符合的元素。

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

const x = document.getElementsByClassName("intro");

通过 CSS 选择器查找 HTML 元素

如果要查找与指定 CSS 选择器（id、类名、类型、属性、属性值等）匹配的所有 HTML 元素，请使用该 querySelectorAll() 方法。

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

const x = document.querySelectorAll("p.intro");

通过 HTML 对象集合查找 HTML 元素

此示例在 forms 集合中查找 id="frm1" 的表单对象，并显示表达中所有元素的值：

const x = document.forms["frm1"];
let text = "";
for (let i = 0; i < x.length; i++) {
  text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;