JavaScript元素节点的增删改查

68 阅读 0 评论 45 点赞

我是靠谱客的博主美丽山水，最近开发中收集的这篇文章主要介绍JavaScript元素节点的增删改查，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

对于元素节点，我们是用createElement()来创建一个元素节点。对于文本节点，可以使用creatTextNode()来创建文本节点。然后将其组装成我们看到的有文本内容的元素。

这种创建的元素被称为动态Dom。相比于静态Dom,动态Dom实际上一开始是不存在的。

1.创建一个简单的元素。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="content"></div>
</body>
<script>
function func() {
var oDiv = document.getElementById("content");
var oStrong = document.createElement("strong");
var oTxt = document.createTextNode("博客园学习");
// 将文本节点插入strong元素
oStrong.appendChild(oTxt);
// 将strong元素插入div元素
oDiv.appendChild(oStrong);
}
func()
</script>
</html>

2.创建复杂的元素

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
function func() {
var oInput = document.createElement("input");
oInput.id = "submit";
oInput.type = "button";
oInput.value = "提交";
document.body.appendChild(oInput);
}
func()
</script>
</html>

3.动态地创建图片

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
function func() {
var oImg = document.createElement("img");
// 注意这里不是class而是className,因为class是保留字
oImg.className = "pic";
oImg.src = "img/example.jpg";
oImg.style.border = "1px solid sliver";
document.body.appendChild(oImg);
}
func()
</script>
</html>

把文本节点插入元素节点和组装好的元素插入到已有的元素中都是appendChild()。

4.实现一个动态地插入元素。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<input id="txt" type="text"/><input
id="btn" type="button" value="输入"/>
</body>
<script>
function func() {
var oBtn = document.getElementById("btn");
oBtn.onclick = function () {
var oUl = document.getElementById("list");
var oTxt = document.getElementById("txt");
// 将文本框的内容转化为文本节点
var textNode = document.createTextNode(oTxt.value);
var oli = document.createElement("li");
oli.appendChild(textNode);
oUl.appendChild(oli);
}
}
func()
</script>
</html>

效果如图：

输入Vue.js

insertBefore()将一个新的元素插入到父元素中的某一个子元素之前。（比如说第一个）

A.insertBofore(B, A.firstElementChild);

5.removeChild()删除元素。

A表示父元素，B表示父元素的某个子元素。

A.removeChild(B)

删除最后一个元素：

A.removeChild(A.lastElementChild)

删除整个列表：

document.body.removeChild(A）;

完整的例子：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<input
id="btn" type="button" value="删除"/>
</body>
<script>
function func() {
var oBtn = document.getElementById("btn");
oBtn.onclick = function () {
var oUl = document.getElementById("list");
document.body.removeChild(oUl);
}
}
func()
</script>
</html>

6 A.cloneNode(bool)复制元素：

bool是布尔值，1或true表示复制元素本身以及自己所有的子元素，0或false仅仅复制元素本身。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<input
id="btn" type="button" value="复制"/>
</body>
<script>
function func() {
var oBtn = document.getElementById("btn");
oBtn.onclick = function () {
var oUl = document.getElementById("list");
document.body.appendChild(oUl.cloneNode(1));
}
}
func()
</script>
</html>

7.替换元素

语法：

A.replacechild(new, old)

例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>JavaScript</p>
<hr/>
输入标签：<input id="tag" type="text"/><br/>
输入内容：<input id="txt" type="text"/><br/>
<input id="btn" type="button" value="替换"/>
</body>
<script>
function func() {
var oBtn = document.getElementById("btn");
oBtn.onclick = function () {
var oFirst = document.querySelector("body *:first-child");
var oTag = document.getElementById("tag");
var oTxt = document.getElementById("txt");
// 根据两个文本框的值来创建新的节点
var oNewTag = document.createElement(oTag.id);
var oNewTxt = document.createTextNode(oTxt.value);
oNewTag.appendChild(oNewTxt);
document.body.replaceChild(oNewTag, oFirst);
}
}
func()
</script>
</html>

如图：