【HTML DOM】关于直接删改操作body标签中子元素的问题

最新推荐文章于 2024-05-28 17:19:17 发布

yangwenrui_only

最新推荐文章于 2024-05-28 17:19:17 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： web开发经验文章标签： html5 html javascript dom操作 dom

本文链接：https://blog.youkuaiyun.com/weixin_45602529/article/details/119988460

经验同时被 2 个专栏收录

7 篇文章

订阅专栏

web开发

2 篇文章

订阅专栏

本文探讨了如何在JavaScript中删除<body>标签内的直接子元素，通过实验对比了getElementById和parentNode方法，并揭示了HTMLBodyElement接口的作用。重点在于理解节点层次和父元素的选择过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在想要删除<body>中直接的一级父元素时，给body标签添加id名并进行如下操作：

<...>
<body id="body">
<div id="div1">
</div>
<script>
var test=document.getElementById("body");
var child=document.getElementByid("div1");
body.removeChild(child);
</script>
</body>
</...>

会发现操作无效。

这时候用parentNode可以实现目的：

<...>
<body id="body">
<div id="div1">
</div>
<script>
var test=document.getElementById("body");
var child=document.getElementByid("div1");
child.parentNode.removeChild(child);
</script>
</body>
</...>

使用parentNode可以获取目标子元素的父元素再对目标子元素执行removeChild()操作。

这里刨根问底，使用document.write()可以得到究竟父元素为哪个——哪个父元素被我们调用了：

<...>
<body id="body">
<div id="div1">
</div>
<script>
var test=document.getElementById("body");
var child=document.getElementByid("div1");
child.parentNode.removeChild(child);
document.write(child.parentNode);
</script>
</body>
</...>

得到结果为：