DOM Elements

JavaScript 和 HTML DOM 元素

本章解释了如何使用 JavaScript 在 HTML 文档中查找和访问 HTML 元素。这是动态网页操作的基础。

查找 HTML 元素

要使用 JavaScript 操作 HTML 元素（例如，更改它们的内容、样式或属性），你首先需要找到并获取对它们的引用。文档对象模型（DOM）为此提供了几种方法：

• 按唯一 ID 查找 HTML 元素（getElementById）
• 按标签名查找 HTML 元素（getElementsByTagName）
• 按类名查找 HTML 元素（getElementsByClassName）
• 使用 CSS 选择器查找 HTML 元素（querySelector，querySelectorAll）
• 通过 HTML 对象集合访问元素（例如，document.forms，document.images）

按 ID 查找 HTML 元素

查找单个特定 HTML 元素最常见和高效的方法是使用其 id 属性，该属性在文档中应该是唯一的。

document.getElementById(‘elementId’) 方法如果找到元素，则返回元素对象，如果不存在该 ID 的元素，则返回 null。

// 假设 HTML 结构为：<div id="intro">Hello World</div>
const introElement = document.getElementById("intro");

if (introElement) {
  // introElement 现在是对该 <div> 对象的引用
  console.log(introElement.textContent); // 输出: "Hello World"
} else {
  console.log("未找到 ID 为 'intro' 的元素。");
}

按标签名查找 HTML 元素

document.getElementsByTagName(‘tagName’) 返回一个实时（live）的 HTMLCollection，其中包含所有指定标签名（例如，‘p’，‘div’，‘img’）的元素。

HTMLCollection 是一个类似数组的对象。它是“实时”的，这意味着如果 DOM 中添加或删除了匹配选择器的元素，它会自动更新。

// 假设 HTML 中有多个 <p> 元素
const paragraphs = document.getElementsByTagName("p");
console.log(`找到了 ${paragraphs.length} 个段落元素。`);

// 你可以使用 for 循环遍历 HTMLCollection：
for (let i = 0; i < paragraphs.length; i++) {
  // paragraphs[i].style.color = "blue"; // 示例：改变文本颜色
}

// 要使用 forEach 等数组方法，将其转换为数组：
// Array.from(paragraphs).forEach(p => console.log(p.textContent));

你也可以在元素上调用 getElementsByTagName 来查找该元素的后代元素：

// 假设 HTML 结构为：<div id="main"><p>First</p><p>Second</p></div>
const mainDiv = document.getElementById("main");
if (mainDiv) {
  const paragraphsInMain = mainDiv.getElementsByTagName("p");
  console.log(`在 'main' div 内找到了 ${paragraphsInMain.length} 个段落。`); // 输出: 2
}

按类名查找 HTML 元素

document.getElementsByClassName(‘className’) 返回一个实时（live）的 HTMLCollection，其中包含所有具有指定类名的元素。

一个元素可以有多个类；如果指定类名是其中之一，这个方法就会找到该元素。

// 假设 HTML 结构为：<p class="info">Msg1</p> <div class="info warning">Msg2</div>
const infoElements = document.getElementsByClassName("info");
console.log(`找到了 ${infoElements.length} 个类名为 'info' 的元素。`); // 输出: 2

// 与 getElementsByTagName 返回的 HTMLCollection 类似，可以使用 for 循环遍历或转换为数组。
for (let i = 0; i < infoElements.length; i++) {
  // infoElements[i].style.fontWeight = "bold";
}

按 CSS 选择器查找 HTML 元素

现代 JavaScript 提供了使用 CSS 选择器查找元素的强大方法：

• document.querySelector(‘cssSelector’): 返回文档中匹配指定 CSS 选择器的 第一个 元素。如果没有找到匹配项，则返回 null。
• document.querySelectorAll(‘cssSelector’): 返回一个 静态（static，非实时）的 NodeList，其中包含文档中所有匹配指定 CSS 选择器的元素。如果没有找到匹配项，则返回一个空的 NodeList。

CSS 选择器可以很简单（例如，‘p.intro’），也可以很复杂（例如，‘div#main > ul li:nth-child(odd)’）。

// 使用 querySelector 的示例（查找第一个匹配项）
// HTML 结构：<p class="highlight">First highlight</p><p class="highlight">Second highlight</p>
const firstHighlight = document.querySelector(".highlight");
if (firstHighlight) {
  // firstHighlight.style.backgroundColor = "yellow";
}

// 使用 querySelectorAll 的示例（查找所有匹配项）
const allParagraphsWithIntroClass = document.querySelectorAll("p.intro");
console.log(`找到了 ${allParagraphsWithIntroClass.length} 个带有类名 'intro' 的 <p> 元素。`);

// NodeList 可以直接使用 forEach 遍历：
allParagraphsWithIntroClass.forEach(function(element) {
  // console.log(element.textContent);
});

// 或者使用 for...of 循环（更现代）：
for (const element of allParagraphsWithIntroClass) {
  // console.log(element.textContent);
}

querySelector 和 querySelectorAll 非常通用，由于它们的灵活性以及 querySelectorAll 返回的 NodeList 的静态特性（在某些情况下比实时集合更容易处理），因此通常更受欢迎。

按 HTML 对象集合查找 HTML 元素

DOM 还提供了对某些 HTML 元素集合的直接访问，例如表单、图像、链接等。

这些是 document 对象的属性，通常返回一个 HTMLCollection。

示例：访问表单元素：

// 假设 HTML 结构为：<form id="myForm"><input type="text" name="username"><input type="submit"></form>
const myForm = document.forms["myForm"]; // 或者使用 document.getElementById('myForm')
// const myForm = document.forms[0]; // 如果是第一个表单，可以通过索引访问

if (myForm) {
  let text = "表单元素： \n";
  // myForm.elements 是一个 HTMLFormControlsCollection 集合
  for (let i = 0; i < myForm.elements.length; i++) {
    const element = myForm.elements[i];
    text += `Name: ${element.name || 'N/A'}, Type: ${element.type}, Value: ${element.value}\n`;
  }
  console.log(text);
  // 要在 HTML 中显示（例如，在带有 id="demo" 的 <pre> 标签中）：
  // document.getElementById("demo").textContent = text.replace(/\n/g, "<br>"); // 如果要显示为带有换行的 HTML 内容
}

其他可访问的 HTML 对象集合包括：

• document.anchors （所有带有 name 属性的 元素 - 主要为历史遗留）
• document.body （ 元素）
• document.documentElement （根 元素）
• document.embeds （所有 元素）
• document.forms （所有
  元素）
• document.head （ 元素）
• document.images （所有 元素）
• document.links （所有带有 href 属性的 和 元素）
• document.scripts （所有
• document.title （

虽然这些集合可用，但在一般元素选择方面，使用 <code>getElementById</code>、<code>querySelector</code> 或 <code>querySelectorAll</code> 通常更一致和强大。

延伸阅读：MDN: 定位 DOM 元素