JavaScript 实现HTML DOM增删改查操作的常见方法详解

1. DOM简介

DOM全称“Document Object Model”，中文翻译为文档对象模型，是一种对文档结构化的方式表达，即将文档中的每一个元素都抽象成为一个对象，便于JavaScript等脚本语言进行操作。

DOM是Web页面的编程接口，可以使用JavaScript、VBScript等动态语言实现对页面元素进行增删改查等操作，最终实现页面动态效果。

2. 常见的DOM操作方法

（1）获取元素

获取元素是DOM操作中的基础，常见的获取元素的方法有以下两种：

1. 通过ID获取元素

在HTML页面中，可以通过在元素中设置id属性来唯一标识一个元素，使用getElementById方法可获取该元素。示例如下：

var ele = document.getElementById("test"); // 获取id为test的元素

2. 通过标签名获取元素

还可以通过标签名来获取元素，使用getElementsByTagName方法即可。示例如下：

var eleList = document.getElementsByTagName("div"); // 获取所有div元素

（2）增加元素

增加元素可以使用createElement方法创建一个新元素，然后使用appendChild方法将新元素追加到指定的父元素中。示例如下：

var parentEle = document.getElementById("parent");
var newEle = document.createElement("div"); // 创建一个div元素
newEle.innerHTML = "这是新元素"; // 给新元素设置内容
parentEle.appendChild(newEle); // 将新元素添加到parent元素中

（3）修改元素

修改元素可以使用innerHTML属性，它可以获取或设置元素的内容。另外，也可以使用setAttribute方法设置元素的属性。示例如下：

var ele = document.getElementById("test");
ele.innerHTML = "这是修改后的内容"; // 修改元素的内容为“这是修改后的内容”
ele.setAttribute("class", "newClass"); // 设置元素的class属性为newClass

（4）删除元素

删除元素可以使用removeChild方法，该方法可以将指定的子元素从父元素中删除。示例如下：

var parentEle = document.getElementById("parent");
var childEle = document.getElementById("child");
parentEle.removeChild(childEle); // 将child元素从parent元素中删除

3. DOM操作的实际应用

示例1：动态添加新列表项

<!DOCTYPE html>
<html>
<head>
  <title>测试DOM操作</title>
  <meta charset="utf-8">
</head>
<body>
  <ul id="list"></ul>
  <script>
    var listEle = document.getElementById("list");
    for (var i = 1; i <= 5; i++) {
      var newEle = document.createElement("li");
      newEle.innerHTML = "列表项" + i;
      listEle.appendChild(newEle);
    }
  </script>
</body>
</html>

该示例中，我们通过JavaScript动态添加了5个新列表项，实现了页面的动态效果。

示例2：使用单击事件删除元素

<!DOCTYPE html>
<html>
<head>
  <title>测试DOM操作</title>
  <meta charset="utf-8">
</head>
<body>
  <ul id="list">
    <li>列表项1<button onclick="del(this)">删除</button></li>
    <li>列表项2<button onclick="del(this)">删除</button></li>
    <li>列表项3<button onclick="del(this)">删除</button></li>
  </ul>
  <script>
    function del(ele) {
      var parentEle = ele.parentNode;
      parentEle.parentNode.removeChild(parentEle);
    }
  </script>
</body>
</html>

该示例中，我们给每个列表项后面添加了一个删除按钮，使用onclick事件触发del方法，来删除对应的列表项。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript 实现HTML DOM增删改查操作的常见方法详解 - Python技术站