今天，我们来学习一下 DOM（文档对象模型）这个神奇的构架，它如同网页世界的神经系统和魔法森林，让我们一起揭开它的神秘面纱，探寻其中的无限可能吧！
是什么
首先，让我们来理解 DOM 的本质。DOM 是浏览器将网页内容表示为树形结构的方式，它将网页中的每个元素（如文字、图像、表单等）都抽象成一个对象，并且这些对象之间以父子节点关系相互连接，形成了一棵“DOM 树”。这颗树在网页加载时被构建起来，成为我们操纵网页的核心。
常见的DOM操作
现在，让我们深入研究常见的 DOM 操作，这些操作是我们在网页开发中经常使用的工具，让我们能够创造出丰富多彩的交互体验：
- 选择元素：通过各种选择器方法（如
getElementById、getElementsByClassName、querySelector等）可以准确定位到页面上的元素，从而对其进行后续操作。
// 通过 ID 选择元素
let myElement = document.getElementById('myId');
// 通过类名选择元素
let elementsByClass = document.getElementsByClassName('myClass');
// 通过标签名选择元素
let elementsByTag = document.getElementsByTagName('div');
// 通过 CSS 选择器选择元素
let elementByQuery = document.querySelector('.myClass');
- 修改内容：通过操作元素的属性（如
innerHTML、innerText、textContent）可以动态改变元素的内容，实现文字更新、数据展示等效果。
// 修改元素的 HTML 内容
myElement.innerHTML = '新的内容';
// 修改元素的文本内容
myElement.innerText = '新的文本';
// 修改元素的纯文本内容
myElement.textContent = '新的纯文本';
- 修改样式：通过操作元素的
style属性，可以实现对元素样式的实时调整，包括颜色、大小、字体等，让页面呈现出更加吸引人的外观。
// 修改元素的样式
myElement.style.color = 'red';
myElement.style.fontSize = '20px';
myElement.style.backgroundColor = 'yellow';
- 添加/删除元素：使用
createElement、appendChild、removeChild等方法可以动态地添加或删除页面上的元素，实现动态展示或隐藏功能。
// 创建新元素并添加到页面中
let newElement = document.createElement('div');
newElement.textContent = '新的元素';
// 将元素挂载在body的末尾
document.body.appendChild(newElement);
// 从页面中移除元素
document.body.removeChild(myElement);
- 事件处理：通过
addEventListener方法，可以为元素添加各种事件监听器，实现点击、鼠标移入移出等交互功能，让用户与页面互动更加流畅。
// 添加点击事件监听
myElement.addEventListener('click', function() {
console.log('点击事件触发了！');
});
// 添加鼠标移入事件监听
myElement.addEventListener('mouseover', function() {
console.log('鼠标移入了该元素！');
});
通过这些操作，我们可以在网页上实现各种动态效果，我们可以通过它们深入到网页的内部世界，操控元素、改变样式、实现交互。
假如您也和我一样，在准备春招。欢迎加我微信shunwuyu，这里有几十位一心去大厂的友友可以相互鼓励，分享信息，模拟面试，共读源码，齐刷算法，手撕面经。来吧，友友们！
原文链接：https://juejin.cn/post/7335760933075288091 作者：小白234
