在Web开发中，DOM（文档对象模型，Document Object Model） 是一个非常重要的概念。它提供了一种结构化的方式来表示和操作网页上的所有元素。通过JavaScript与DOM交互，开发者可以动态地更新内容、样式以及结构，从而创造出更加互动的用户体验。本文将带你深入了解DOM的基础知识，并展示如何利用JavaScript来操作DOM。
一、什么是DOM？
DOM是一种跨平台和语言无关的应用程序接口（API），允许程序和脚本动态访问和更新文档的内容、结构和样式。简单来说，DOM是HTML或XML文档的一个树形表示，其中每个节点代表文档的一部分，比如元素、属性或者文本。
（一）DOM树
当你打开一个网页时，浏览器会解析HTML代码并构建出一个DOM树。这个树的根节点通常是<html>标签，接着是<head>和<body>等子节点，每个节点又可以包含更多的子节点，形成一棵完整的树状结构。
二、访问DOM元素
使用JavaScript操作DOM的第一步就是选择需要操作的元素。以下是几种常用的方法：
（一）通过ID获取元素
var element = document.getElementById('uniqueId');（二）通过类名获取元素集合
var elements = document.getElementsByClassName('className');（三）通过标签名获取元素集合
var elements = document.getElementsByTagName('tagName');（四）使用CSS选择器
- querySelector()：返回匹配的第一个元素。
var element = document.querySelector('.className'); - querySelectorAll()：返回所有匹配的元素组成的NodeList。
var elements = document.querySelectorAll('.className');
三、修改DOM元素
一旦选定了目标元素，就可以对其进行各种修改了。
（一）修改内容
可以通过.innerHTML属性直接替换或添加新的HTML内容。
element.innerHTML = '<p>新内容</p>';（二）修改属性
可以直接设置或获取元素的属性值，如链接的目标URL。
element.href = 'https://www.example.com';
console.log(element.getAttribute('href'));（三）修改样式
可以通过.style属性直接修改元素的内联样式。
element.style.color = 'blue';
element.style.fontSize = '16px';四、创建和删除DOM元素
除了修改现有的元素外，还可以使用JavaScript动态地创建或删除DOM元素。
（一）创建新元素
var newElement = document.createElement('div');
newElement.innerHTML = '这是一个新的div';（二）插入新元素
可以使用.appendChild()方法将新创建的元素添加到指定位置。
parentElement.appendChild(newElement);（三）删除元素
要从DOM中移除一个元素，首先需要找到它的父节点，然后调用.removeChild()方法。
parentElement.removeChild(childElement);五、事件处理
DOM元素能够响应用户的操作，例如点击、输入等。通过为这些元素添加事件监听器，可以让页面根据用户的行为做出相应的反应。
（一）简单的事件监听器
buttonElement.addEventListener('click', function() {
alert('按钮被点击了!');
});（二）事件冒泡与捕获
当事件发生时，它会在DOM树中向上或向下传播。理解事件冒泡（bubbling）和捕获（capturing）的概念对于编写高效且无误的事件处理代码至关重要。
六、结语
感谢您的阅读！如果你有任何疑问或想要分享的经验，请在评论区留言交流！
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
