JS-删除节点removeChild()/替换元素节点replaceChild()/创建元素节点createElement/创建文本节点createTextNode/浏览器窗口可视区域大小/网页......

最新推荐文章于 2023-10-18 18:51:24 发布

Jennyni1122

最新推荐文章于 2023-10-18 18:51:24 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/qq_41121204/article/details/92995964

版权

删除节点removeChild()

removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。

语法:

nodeObject.removeChild(node)
参数:

node ：必需，指定需要删除的节点。

我们来看看下面代码，删除子点。

image.png

运行结果:

HTML
删除节点的内容: javascript

注意: 把删除的子节点赋值给 x，这个子节点不在DOM树中，但是还存在内存中，可通过 x 操作。

如果要完全删除对象，给 x 赋 null 值，代码如下:

image.png

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

删除该节点的内容，先要获取子节点。
然后使用循环遍历每个子节点。
使用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");
  // 在此完成该函数
  
  //法一,一次性清除节点内容
  for(var i=0;i<content.childNodes.length;i++){
      if(content.childNodes[i].nodeType!=1){   
         continue;  
      }else{
         content.removeChild(content.childNodes[i]);    
      }
         
      }

  //法二,一次性清除节点内容
/*   
   for(var i=content.childNodes.length-1;i>=0;i--){
      var chnode=content.childNodes[i];
      content.removeChild(chnode);  
   }
*/ 

  //法三,多次方清除节点内容
/*
   for(var i=0;i<content.childNodes.length;i++){
    var chnode=content.childNodes[i];
    content.removeChild(chnode);  
  }
*/
 
  }
 
</script>
<button onclick="clearText()">清除节点内容</button>
</body>
</html>

替换元素节点replaceChild()

replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。

语法：

node.replaceChild (newnode,oldnew )
参数：

newnode : 必需，用于替换 oldnew 的对象。
oldnew : 必需，被 newnode 替换的对象。

我们来看看下面的代码:

image.png

效果: 将文档中的 Java 改为 JavaScript。

注意:

当 oldnode 被替换时，所有与之相关的属性内容都将被移除。
newnode 必须先被建立。

任务
试一试，补充函数 replaceMessage() 代码，实现将 b 标签替换成 i 标签。

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

最低0.47元/天解锁文章

Jennyni1122

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS-删除节点removeChild()/替换元素节点replaceChild()/创建元素节点createElement/创建文本节点createTextNode/浏览器窗口可视区域大小/网页......

删除节点removeChild()removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。语法:nodeObject.removeChild(node)参数:node ：必需，指定需要删除的节点。我们来看看下面代码，删除子点。image.png运行结果:HT...
复制链接

扫一扫