JavaScript DOM 操作：如何动态更改网站内容

现代网站很少是静态的。它们响应点击，即时更新内容，并允许用户在不刷新页面的情况下进行交互。所有这些都是通过DOM 操作实现的， DOM 操作是 JavaScript在网页加载后更改和控制网页的方式。

在构建交互式功能之前，您需要了解如何选择元素、更新其内容以及响应用户操作。本指南将使用简单易懂、适合初学者的示例，逐步指导您完成整个过程。

您将学到什么

阅读完本文后，您将：

• 了解如何选择 DOM 中的元素。

• 学习动态更新文本、属性和样式。

• 了解如何创建、插入和删除元素。

• 添加与事件监听器的交互性。

• 遵循最佳实践，保持代码清洁且易于访问。

选择元素

DOM 操作总是从查找要更改的元素开始。

示例 HTML：

Hello

  A
  B

JavaScript 选择器：

const title = document.getElementById('title'); // select by ID
const firstItem = document.querySelector('.item'); // first match
const allItems = document.querySelectorAll('.item'); // all matches (static list)

把选择器想象成 HTML 元素的“地址”。一旦有了地址，你就可以直接与元素进行交互。

更改文本和 HTML

一旦选定，您就可以更改元素的显示内容。

title.textContent = 'Welcome to My Site'; // safe plain text
title.innerHTML = 'Dynamic Title'; // allows HTML

• 仅在更新文本时使用textContent。

• innerHTML仅在需要 HTML 标签时使用。

避免innerHTML使用用户输入进行设置，因为它可能会产生安全风险。

更新属性和样式

您还可以更改元素属性，如链接、图像和内联样式。

const link = document.querySelector('a');
link.setAttribute('href', 'https://example.com');
link.textContent = 'Go to Example';

使用类（优于内联样式）：

const box = document.querySelector('.box');
box.classList.add('active'); // add a class
box.classList.remove('hidden'); // remove a class
box.classList.toggle('open'); // switch on/off

最佳做法是将视觉样式保留在 CSS 中，并仅使用 JavaScript 切换类。

创建和删除元素

DOM 操作还允许您动态构建内容。

const ul = document.querySelector('.items');
const li = document.createElement('li');
li.textContent = 'New item';
li.className = 'item';
ul.appendChild(li); // adds to the end

删除元素同样简单：

li.remove();

对于更大的更新，使用 DocumentFragment 来有效地添加多个项目。

添加与事件的交互

当您响应用户操作时，DOM 操作的真正威力就显现出来了。

const btn = document.getElementById('changeBtn');
btn.addEventListener('click', () => {
  title.textContent = 'Title updated!';
});

您还可以使用事件委托来通过一个监听器处理多个元素：

const ul = document.querySelector('.items');
ul.addEventListener('click', (e) => {
  const li = e.target.closest('.item');
  if (li) 
    li.classList.toggle('selected');
});

这种方法非常有效，即使后来添加了新项目也能有效。

迷你项目：动态待办事项列表

让我们把所有东西放在一起。

HTML源代码：

Add

JavaScript源代码：

const input = document.getElementById('newText');
const addBtn = document.getElementById('addBtn');
const todo = document.getElementById('todo');
addBtn.addEventListener('click', () => {
  const text = input.value.trim();
  if (!text) return;
  const li = document.createElement('li');
  li.textContent = text;
  li.className = 'item';
  todo.appendChild(li);
  input.value = ''; // clear input
});

这个小应用程序演示了单个流程内的选择、内容更新、元素创建和事件处理。

初学者的最佳实践

• 用于textContent安全文本更新并保留innerHTML可信内容。

• 依靠classListCSS 来设置样式而不是内联样式。

• 使用data-*属性（如data-js）作为 JavaScript 钩子，而不是样式类。

• 保持代码有序：选择一次，重用变量，并避免深度嵌套的选择器。

• 考虑可访问性、更新 ARIA 标签并在动态更改内容时管理焦点。

结论

DOM    操作是打造动态交互网站的核心。通过学习如何选择元素、更新元素内容、修改属性以及响应用户操作，您将能够将静态页面转换为动态应用程序。即使是切换主题或创建待办事项列表等简单项目，也能帮助您巩固这些概念，并为更高级的工作做好准备。通过练习，DOM    操作将会变得自然流畅，您将能够探索更深入的主题，例如动画、表单处理以及使用 JavaScript 构建完整的应用程序。