DOM：揭秘网页世界的神奇构架与魔法操作

今天，我们来学习一下 DOM（文档对象模型）这个神奇的构架，它如同网页世界的神经系统和魔法森林，让我们一起揭开它的神秘面纱，探寻其中的无限可能吧！

是什么

首先，让我们来理解 DOM 的本质。DOM 是浏览器将网页内容表示为树形结构的方式，它将网页中的每个元素（如文字、图像、表单等）都抽象成一个对象，并且这些对象之间以父子节点关系相互连接，形成了一棵"DOM 树"。这颗树在网页加载时被构建起来，成为我们操纵网页的核心。

常见的DOM操作

现在，让我们深入研究常见的 DOM 操作，这些操作是我们在网页开发中经常使用的工具，让我们能够创造出丰富多彩的交互体验：

选择元素 ：通过各种选择器方法（如 getElementById、getElementsByClassName、querySelector 等）可以准确定位到页面上的元素，从而对其进行后续操作。

js 复制代码

// 通过 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）可以动态改变元素的内容，实现文字更新、数据展示等效果。

js 复制代码

// 修改元素的 HTML 内容
myElement.innerHTML = '新的内容';

// 修改元素的文本内容
myElement.innerText = '新的文本';

// 修改元素的纯文本内容
myElement.textContent = '新的纯文本';

修改样式 ：通过操作元素的 style 属性，可以实现对元素样式的实时调整，包括颜色、大小、字体等，让页面呈现出更加吸引人的外观。

js 复制代码

// 修改元素的样式
myElement.style.color = 'red';
myElement.style.fontSize = '20px';
myElement.style.backgroundColor = 'yellow';

添加/删除元素 ：使用 createElement、appendChild、removeChild 等方法可以动态地添加或删除页面上的元素，实现动态展示或隐藏功能。

js 复制代码

// 创建新元素并添加到页面中
let newElement = document.createElement('div');
newElement.textContent = '新的元素';
// 将元素挂载在body的末尾
document.body.appendChild(newElement);

// 从页面中移除元素
document.body.removeChild(myElement);

事件处理 ：通过 addEventListener 方法，可以为元素添加各种事件监听器，实现点击、鼠标移入移出等交互功能，让用户与页面互动更加流畅。

js 复制代码

// 添加点击事件监听
myElement.addEventListener('click', function() {
  console.log('点击事件触发了！');
});

// 添加鼠标移入事件监听
myElement.addEventListener('mouseover', function() {
  console.log('鼠标移入了该元素！');
});

通过这些操作，我们可以在网页上实现各种动态效果，我们可以通过它们深入到网页的内部世界，操控元素、改变样式、实现交互。

假如您也和我一样，在准备春招。欢迎加我微信shunwuyu，这里有几十位一心去大厂的友友可以相互鼓励，分享信息，模拟面试，共读源码，齐刷算法，手撕面经。来吧，友友们！