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技术站
微信扫一扫 
支付宝扫一扫 