本节包含以下3个知识点：
1、移除指定的节点
2、移除自身
3、移除节点属性
一、移除指定的节点
请看以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box">
<span id="span1">这是span1</span>
<span id="span2">这是span2</span>
<span id="span3">这是span3</span>
</div>
</body>
<script>
var oldnode=document.getElementById('span1');//获取要移除的节点
var funode=document.getElementById('box');//获取父节点
funode.removeChild(oldnode);//移除节点
</script>
</html>
在上面的代码中，我们通过removeChild命令成功将id为span1的span标签从页面中移除了。
二、移除自身
请看以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box">
<span id="span1">这是span1</span>
<span id="span2">这是span2</span>
<span id="span3">这是span3</span>
</div>
</body>
<script>
var oldnode=document.getElementById('span1');//获取要移除的节点
oldnode.remove();//移除节点自身
</script>
</html>
执行结果如下：
同样实现了移除id为span1的span标签的效果。
三、移除节点属性
请看以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box">
<span id="span1">这是span1</span>
<span id="span2">这是span2</span>
<span id="span3">这是span3</span>
</div>
</body>
<script>
var oldnode=document.getElementById('span1');//获取要移除的节点
oldnode.removeAttribute("id");//移除节点的id属性
</script>
</html>
执行结果如下：
执行后，原id为span1的span标签的id属性已经被我们移除了。
ok，以上操作请大家务必亲自动手测试一下，以加深印象，详细实现逻辑在代码中已经做了标注，请务必掌握。
|
窥视卡
雷达卡
发表于 2023-1-25 12:59:23
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-18 06:22:15
