JavaScript DOM：选择 HTML 元素

构建网页时，您在浏览器中看到的内容以文档对象模型 (DOM)的形式表示。可以将 DOM 视为一个树状结构，其中 HTML    中的每个标签（例如标题、段落、按钮和列表）都成为 JavaScript 可以与之交互的对象。

但在更改页面上的任何内容之前，您需要先选择要处理的元素。这就是本指南的全部内容。

您将学到什么

阅读完本文后，您将了解：

• DOM 是什么以及它为何重要。

• 选择单个或多个元素的主要方法。

• 实时集合和静态列表之间的区别。

• 如何在现实世界的例子中使用这些选择。

• 初学者应避免的常见错误。

理解 DOM

DOM 充当 HTML 结构和与其交互的 JavaScript 代码之间的连接。它为 JavaScript 提供了对页面上每个元素的访问权限，允许您读取、更新或响应用户操作。

例如：

• 更改标题的文本。

• 隐藏或显示某个部分。

• 为按钮添加点击事件。

这一切都始于正确选择元素。

选择单个元素

getElementById

获取具有唯一 ID 的元素的最简单、最快捷的方法。

const title = document.getElementById('site-title');
title.textContent = 'Hello, world!';

querySelector

更强大，因为它接受任何 CSS 选择器。它返回找到的第一个匹配项。

const firstLink = document.querySelector('.nav a');
firstLink.setAttribute('aria-current', 'page');

提示：使用 getElementById 进行快速查找，当您需要更多灵活性时使用 querySelector。

选择多个元素

getElementsByClassName

查找具有特定类的所有元素。返回一个活动集合。

const cards = document.getElementsByClassName('card');
console.log(cards.length); // updates if new cards are added

getElementsByTagName

查找特定标签的所有元素（如p或div）。

querySelectorAll

使用 CSS 选择器查找所有匹配项。返回一个静态 NodeList。

const items = document.querySelectorAll('.item');
items.forEach((el, i) => {
  el.textContent = Item ${i + 1};
});

主要区别：HTMLCollections 自动更新（实时），而 NodeLists 保持不变（静态）。

实时与静态示例

  A
  B

const live = document.getElementsByClassName('item'); // live
const staticList = document.querySelectorAll('.item'); // static
// Add new list item
const li = document.createElement('li');
li.className = 'item';
li.textContent = 'C';
document.getElementById('list').appendChild(li);
console.log(live.length); // 3
console.log(staticList.length); // 2

整合所有内容（小项目）

这是一个将所有内容联系在一起的简单示例。

HTML：

Welcome
  
    One
    Two
 
Change Title

JavaScript：

// Select elements
const title = document.getElementById('site-title');
const btn = document.querySelector('#changeBtn');
const listItems = document.querySelectorAll('.item');
// Change title when button is clicked
btn.addEventListener('click', () => {
  title.textContent = 'Title changed!';
});
// Update list items
listItems.forEach((li, index) => {
  li.textContent = ${index + 1}. ${li.textContent};
});

初学者的最佳实践

• 使用前检查：始终确认元素存在（if (element) { ... }）。

• 使用数据属性：对于 JavaScript 钩子，使用data-js而不是 CSS 类。

• 缓存选择器：如果要多次使用元素，则将其存储在变量中。

• 避免使用深层选择器：保持其简单且易于阅读。

• 使用事件委托：不要附加许多事件监听器，而是将一个事件监听器附加到父元素并处理内部的点击。

结论

在 DOM 中选择元素是实现任何网页交互的基础。通过学习诸如getElementById、querySelector和    `querySelectorAll '    等方法，您现在可以定位特定元素并自信地操作它们。您还将了解实时集合和静态列表之间的区别，这有助于您在处理元素组时选择正确的方法。
通过在更改文本、更新列表或响应按钮点击等小型项目中实践这些概念，您将掌握必要的技能，从而掌握更高级的主题，例如    DOM 操作、样式设置和事件处理。您探索得越多，选择和操作元素就会越自然，而这正是您迈向熟练掌握 JavaScript 的重要一步。