JavaScript DOM元素常见操作详解【添加、删除、修改等】

JavaScript DOM元素常见操作详解

1. 获取DOM元素

使用 JavaScript 可以轻松地操作页面的 DOM 元素。在对 DOM 进行任何更改之前，必须首先将元素获取到。

获取 DOM 元素有多种方式，下面介绍最常用的两种方法：

1.1 通过 ID 获取元素

可以使用以下代码来获取指定 id 的元素：

const element = document.getElementById("myid");

1.2 通过 class 获取元素

有两种方法获取指定 class 的一组元素：

1.2.1 getElementsByClassName()

使用 getElementsByClassName() 方法可以返回一个 HTMLCollection，其中包含有匹配指定 class 的所有 DOM 元素。例如：

const elements = document.getElementsByClassName("myclass");

1.2.2 querySelectorAll()

可以使用 querySelectorAll() 方法来获取匹配指定 class 的所有 DOM 元素，该方法的用法以 CSS 选择器的方式进行。例如：

const elements = document.querySelectorAll(".myclass");

2. 添加和删除元素

2.1 添加元素

在 DOM 中，添加新元素一般使用以下两个方法：

2.1.1 createElement()

可以使用 createElement() 方法创建一个新的元素，例如：

const newElement = document.createElement("div");

2.1.2 appendChild()

要将创建的新元素添加到 DOM 中，可以使用 appendChild() 方法将其加入到指定元素的子节点列表中。例如：

document.body.appendChild(newElement);

2.2 删除元素

在删除元素时，可以使用以下方法：

2.2.1 removeChild()

可以使用 removeChild() 方法删除指定元素的子节点。例如：

const element = document.getElementById("myid");
element.removeChild(childElement);

2.2.2 parentNode.removeChild()

可以使用 parentNode.removeChild() 方法删除指定元素。例如：

const element = document.getElementById("myid");
element.parentNode.removeChild(element);

3. 修改元素

修改 DOM 元素时，有多种方式可以实现。以下为其中的几种：

3.1 修改属性

可以使用 JavaScript 来修改元素的属性。例如：

const element = document.getElementById("myid");
element.setAttribute("class", "myclass");

3.2 修改文本内容

可以使用 textContent 或 innerHTML 属性来修改元素的文本内容，例如：

const element = document.getElementById("myid");
element.textContent = "Hello World!";
// 或者
element.innerHTML = "<b>Hello World!</b>";

综上所述

我们可以使用 JavaScript 提供的 DOM 操作方法来轻松地添加、删除和修改网页元素，这对于实现动态网页效果非常有用。