24-原生 JavaScript 操作 DOM：从创建元素到事件处理

htmledit_views">

笔记+分享

在现代 Web 开发中，我们通常会使用各种框架和库（如 React、Vue.js）来简化 DOM 操作，但在某些情况下，理解和使用原生 JavaScript（也称为 Vanilla JS）操作 DOM 仍然是非常重要的技能。这不仅有助于你理解 Web 的核心原理，还能让你在需要优化性能、减少依赖时拥有更多控制力。

本文将详细介绍如何使用原生 JavaScript 操作 DOM，包括创建元素、修改内容、添加事件处理程序等基本操作。

什么是 DOM？

DOM（Document Object Model，文档对象模型）是浏览器对 HTML 或 XML 文档的编程接口，它允许开发者通过编程来操作文档的结构、样式和内容。在 JavaScript 中，DOM 提供了许多方法来动态地添加、修改和删除页面中的元素和内容。

使用原生 JavaScript 操作 DOM

接下来我们将分步骤介绍如何使用原生 JavaScript 操作页面的 DOM。

1. 创建并插入元素

使用 document.createElement() 方法可以动态创建一个新的 HTML 元素，随后我们可以通过 appendChild() 方法将该元素添加到页面中。

// 创建一个 <div> 元素
let newDiv = document.createElement('div');// 为 <div> 添加文本内容
newDiv.textContent = '这是一个新创建的 div 元素';// 将该元素添加到 body 中
document.body.appendChild(newDiv);

在上面的代码中，newDiv 是我们创建的元素。我们通过 textContent 为元素添加文本内容，最后用 appendChild() 方法将其添加到页面的 body 中。

2. 为元素添加属性与样式

在创建元素后，你可能需要为它设置一些属性或样式。这可以通过直接设置元素的属性或使用 style 对象来实现。

// 设置元素的 id 和类名
newDiv.id = 'myDiv';
newDiv.className = 'my-class';// 为元素添加样式
newDiv.style.color = 'white';
newDiv.style.backgroundColor = 'blue';
newDiv.style.padding = '10px';

3. 查找页面元素

你可以使用多种方法来查找页面中的元素，例如通过 getElementById()、getElementsByClassName() 或 querySelector()。

// 根据 id 查找元素
let elementById = document.getElementById('myDiv');// 根据类名查找多个元素
let elementsByClass = document.getElementsByClassName('my-class');// 使用 querySelector 查找第一个匹配的元素
let firstDiv = document.querySelector('div');// 使用 querySelectorAll 查找所有匹配的元素
let allDivs = document.querySelectorAll('div');

4. 事件处理：监听与移除

事件处理是 Web 开发中不可或缺的部分。你可以使用 addEventListener() 方法为元素添加事件监听器，如 click、mouseover等。

// 为元素添加点击事件
newDiv.addEventListener('click', function() {alert('你点击了新创建的 div 元素！');
});

如果需要移除事件监听，可以使用 removeEventListener() 方法：

function handleClick() {alert('你点击了该元素');
}// 添加事件
newDiv.addEventListener('click', handleClick);// 移除事件
newDiv.removeEventListener('click', handleClick);

5. 修改元素的内容

你可以动态修改元素的文本或 HTML 内容：

// 修改文本内容
newDiv.textContent = '这是修改后的文本内容';// 修改 HTML 内容
newDiv.innerHTML = '<strong>新的内容</strong>';

textContent 会修改元素的纯文本，而 innerHTML 则允许你插入 HTML 标签。

6. 删除元素

通过 remove() 方法，你可以从页面中删除一个元素：

// 删除元素
newDiv.remove();

7. 动态创建多个元素

如果你需要批量创建多个元素，可以使用循环来生成这些元素，并依次添加到页面中。例如，我们创建一个包含 3 个列表项的 ul列表：

let ul = document.createElement('ul');for (let i = 1; i <= 3; i++) {let li = document.createElement('li');li.textContent = `第 ${i} 个列表项`;ul.appendChild(li);
}document.body.appendChild(ul);

8. 操作表单元素的值

你可以轻松获取或修改表单元素的值，例如 input 或 textarea：

// 获取 input 的值
let inputValue = document.querySelector('input').value;// 修改 input 的值
document.querySelector('input').value = '新的输入值';

9. 防止表单的默认行为

在处理表单提交时，通常你希望阻止默认的提交行为，例如在客户端验证之前防止表单被提交：

document.querySelector('form').addEventListener('submit', function(event) {event.preventDefault(); // 阻止默认提交行为alert('表单提交已被阻止');
});

总结

通过本文的学习，我们掌握了使用原生 JavaScript 操作 DOM 的基础知识，包括创建和插入元素、修改属性和内容、事件处理、动态生成列表等。掌握这些基础技能对理解html" title=前端>前端开发非常重要，即使在使用框架时，它们也能帮助你编写更高效的代码。

虽然现代html" title=前端>前端框架使得这些操作更加方便，但在某些场景下（如性能优化或开发简易页面时），使用原生 JavaScript 操作 DOM 依然是很有必要的。