有多种方法可以使用 JavaScript 删除 DOM 节点的所有子元素。
innerHTML
清除 innerHTML 很简单，但是，它可能不适合高性能应用程序，因为它会调用浏览器的 HTML 解析器：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
<style>
#divId {
height: 100px;
width: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id='divId'>
<span>Welcome to onitroad</span>
</div>
<button id='buttonId'>Remove via innerHTML</button>
<script>
buttonId.onclick = () => {
const myNode = document.getElementById("divId");
myNode.innerHTML = '';
}
</script>
</body>
</html>
textContent
第二种方法是清除 textContent。
它类似于上面的方法。
这种方法比innerHTML 快得多。
使用 textContent 浏览器不会调用 HTML 解析器并立即用单个 #text 节点替换元素的所有子元素：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
<style>
#divId {
height: 100px;
width: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id='divId'>
<span>Welcome to onitroad</span>
</div>
<button id='buttonId'>通过textContent删除元素</button>
<script>
buttonId.onclick = () => {
const myNode = document.getElementById("divId");
myNode.textContent = '';
}
</script>
</body>
</html>
lastChild
不是删除 firstChild，而是使用 lastChild，它可以更快地删除最后一个元素。
循环将检查 firstChild 以防检查 firstChild 比 lastChild 更快：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
<style>
#divId {
height: 100px;
width: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id='divId'>
<span>Welcome to onitroad</span>
</div>
<button id='buttonId'>通过最后一个子元素循环删除</button>
<script>
buttonId.onclick = () => {
const myNode = document.getElementById("divId");
while(myNode.firstChild) {
myNode.removeChild(myNode.lastChild);
}
}
</script>
</body>
</html>
lastElementChild
循环删除每个 lastElementChild 方法会保留所有非元素，（例如 #text 节点和 <!-comments →）父级（不是后代）的子级：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
</head>
<body>
<div id='divId' style="height: 100px; width: 200px; border: 1px solid red;">
<!-- This comment won't be removed -->
<span>
Welcome to onitroad <!-- This comment WILL be removed -->
</span>
<!-- But this one won't. -->
</div>
<button id='buttonId'>Remove via lastElementChild-loop</button>
<script>
buttonId.onclick = () => {
const myNode = document.getElementById("divId");
while(myNode.lastElementChild) {
myNode.removeChild(myNode.lastElementChild);
}
}
</script>
</body>
</html>
DOM 节点
文档对象模型 (DOM) 是一种表示 HTML 和 XML 文档的编程接口的方式。
DOM 表示在逻辑树中说明的文档，其中每个分支都以一个节点结束，并且这些节点中的每一个都包含对象。
每个节点都可以引用其他节点，子节点。
他们也可以有自己的孩子。
日期：2020-06-02 22:16:24 来源：oir作者：oir