JavaScript删除节点

最新推荐文章于 2024-06-25 20:43:11 发布

mysql996

最新推荐文章于 2024-06-25 20:43:11 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/u010572493/article/details/53507993

JavaScript 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个JavaScript函数clearText()，该函数用于清除指定HTML节点内的所有子节点内容。通过获取节点并遍历其子节点，使用removeChild()方法逐个删除，实现了节点内容的清空。

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

删除节点：

任务

试一试，定义clearText()函数，完成节点内容的删除。

1. 删除该节点的内容，先要获取子节点。

2. 然后使用循环遍历每个子节点。

3. 使用removeChild()删除节点。

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
</head>

<body>
<div id="content">
    <h1>html</h1>
    <h1>php</h1>
    <h1>javascript</h1>
    <h1>jquery</h1>
    <h1>java</h1>
</div>

<script type="text/javascript">
    function clearText() {
        var content=document.getElementById("content");
        // 在此完成该函数
        /*
        这里i如果从0开始循环则会出现不能一次删除完成的现象，从最后一个删会一次删除
        这是因为chrom浏览器输出的子节点的长度是11(包括了空白的文本节点)，从前开始删每次删除一个元素
        子元素的长度改变，i增加后是指新的子元素的中的下标
         var node = content.childNodes;
         for(var i=0； i<node.lengthi;i++){
         content.removeChild(node[i]);
         }
         */
        var node = content.childNodes;
           for(var i=node.length-1;i>=0;i--){
            content.removeChild(node[i]);
        }

    }

</script>

<button onclick="clearText()" onclick="clearText()">清除节点内容</button>



</body>
</html>