javascript 改变dom

JavaScript 作为一种流行的脚本语言，常被用于修改 HTML 文档的 DOM 结构，包括添加、删除、替换或修改元素的属性值等。这种改变 DOM 的能力让 JavaScript 成为 web 开发中不可缺少的一部分。下面就来看看使用 JavaScript 如何改变 DOM。

1. 通过 getElementById 方法获取元素

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

这个例子中，我们使用了 document 对象的 getElementById 方法，通过传入元素的 ID（在 HTML 中以 id 属性定义），获取了指定的元素。然后，我们通过修改元素的 innerHTML 属性来改变元素的内容。

2. 通过 getElementsByTagName 方法获取元素

let elements = document.getElementsByTagName("p");for (let i = 0; i< elements.length; i++) {elements[i].style.color = "red";}

这个例子中，我们使用了 document 对象的 getElementsByTagName 方法，通过传入标签名（如 "p"）获取了所有指定标签的元素，并通过遍历所有元素，修改了它们的样式。

3. 通过 querySelector 方法获取元素

let element = document.querySelector("#example .item");element.classList.add("active");

这个例子中，我们使用了 document 对象的 querySelector 方法，通过传入 CSS 选择器（如 "#example .item"）选取了指定的元素，并通过修改元素的 classList 属性来添加类名（"active"）。

4. 创建新元素

let element = document.createElement("div");element.innerHTML = "New Element";document.body.appendChild(element);

这个例子中，我们使用了 document 对象的 createElement 方法创建了新的 div 元素，并通过修改其 innerHTML 属性添加了内容。然后，我们通过调用 document.body 的 appendChild 方法，将新创建的元素添加到文档中。

5. 删除元素

let element = document.getElementById("example");element.parentNode.removeChild(element);

这个例子中，我们使用了 document 对象的 getElementById 方法，通过传入元素的 ID 获取了要删除的元素，并通过调用 parentNode 的 removeChild 方法，将其从文档中移除。

6. 替换元素

let element = document.createElement("p");element.innerHTML = "New Text";document.getElementById("example").replaceWith(element);

这个例子中，我们创建了一个新的 p 元素，并设置其 innerHTML 属性。然后，我们调用 getElementById 方法选取要替换的元素（id 为 "example" 的元素），并通过调用 replaceWith 方法，将其替换成新创建的元素。

总结：

JavaScript 提供了多种方法用于改变 DOM，这些方法包括获取元素、创建新元素、删除元素、替换元素等。合理使用这些方法可以让我们轻松实现 web 开发中的各种功能。在编写 JavaScript 代码时，要注意避免频繁的 DOM 操作，以提高代码效率。

上一篇：javascript 提取链接的

下一篇：javascript 教程 第九