JavaScript中Dom操作实例详解

什么是Dom

• Dom，即Document Object Model，指的是文档对象模型。
• 它是一个用于HTML和XML文档的编程接口，可以改变或者操作文档的内容、结构和样式。
• 通过Dom，我们可以像操作HTML页面一样，动态地修改页面上的内容和样式，实现网页的交互和动态效果。

Dom元素的选取

• 通过Dom元素的选取，我们可以获取到一个或者多个元素，方便后续的操作。
• Dom提供了多种选取和查找元素的方式。

getElementById

• 通过元素的id属性选取元素，返回一个元素对象。
• 示例代码：

let element = document.getElementById("demo");

getElementsByClassName

• 通过元素的class属性选取元素，返回一个元素对象数组。
• 示例代码：

let elements = document.getElementsByClassName("demo");

getElementsByTagName

• 通过元素的标签名选取元素，返回一个元素对象数组。
• 示例代码：

let elements = document.getElementsByTagName("div");

querySelector

• 通过CSS选择器选取元素，返回一个元素对象。
• 示例代码：

let element = document.querySelector("#demo .demo");

querySelectorAll

• 通过CSS选择器选取元素，返回一个元素对象数组。
• 示例代码：

let elements = document.querySelectorAll("#demo .demo");

Dom元素的操作

• 获取到Dom元素之后，我们就可以对其进行各种操作。

改变元素的内容

• 通过修改元素的innerHTML属性，可以动态改变元素的内容。
• 示例代码：

let element = document.getElementById("demo");
element.innerHTML = "Hello World!";

改变元素的样式

• 通过修改元素的style属性，可以动态改变元素的样式。
• 示例代码：

let element = document.getElementById("demo");
element.style.color = "red";

示例说明

示例一

• 把页面上所有class属性为demo的元素的内容全部修改为"Hello World!"。

let elements = document.getElementsByClassName("demo");
for (let i = 0; i < elements.length; i++) {
  elements[i].innerHTML = "Hello World!";
}

示例二

• 把页面上id属性为demo的元素的背景色修改为灰色，字体颜色修改为白色。

let element = document.getElementById("demo");
element.style.backgroundColor = "gray";
element.style.color = "white";