<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM</title>
</head>
<body>
<script>
function remove(){
var parentDiv = document.getElementById("parentDiv");
var div2 = document.getElementById("div2");
parentDiv.removeChild(div2);//删除元素节点
}
function removeHref(){
var link = document.getElementById("link");
link.removeAttribute("href");//删除属性节点
}
function removeDiv1(){
var div = document.getElementById("div");
var textNode = div.childNodes[0];//获得文本节点
div.removeChild(textNode);//删除文本节点
}
function removeDiv2(){
var div = document.getElementById("div");
div.innerHTML = "";//内容置空
}
function recover(){
var div = document.getElementById('div');
div.innerHTML = "这是一个恢复的文本";
}
</script>
<div id = "parentDiv">
<div id="div1">div1</div>
<div id="div2">div2</div>
</div>
<button onclick="remove()">删除节点</button>
<br>
<a href="http://12306.com" id="link">http://12306.com</a><br>
<button onclick="removeHref()">删除超链接href属性</button><br>
<br>
<div id="div">这是一个文本</div>
<button onclick="removeDiv1()">通过removeChild删除div下的文本节点</button>
<button onclick="removeDiv2()">通过innerHTML让内容置空</button>
<button onclick="recover()">回复文本</button>
</body>
</html>
dom基础7
最新推荐文章于 2023-04-22 17:47:07 发布