JS-DOM深入操作（二）_replace all replacechild-CSDN博客

本文链接：https://blog.csdn.net/gogaogao/article/details/129532940

本文介绍了JavaScript中对DOM元素的操作，包括使用replaceChild方法替换元素，removeChild删除子元素（仅限第一层），以及remove方法删除自身元素。同时，还讲解了如何通过innerHTML属性获取和设置元素内容，以及注意事项和示例代码。

摘要由CSDN通过智能技术生成

一、替换元素 replaceChild

第一个参数是要替换的元素，第二个参数是被替换的元素

<body>
   <div id="outNode">
   	  <span>11111</span>
   </div>
</body>
<script type="text/javascript">
//点击屏幕后，input替换span标签
	document.onclick=function(){
		var oIpt=document.createElement('input');
	    outNode.replaceChild(oIpt,outNode.children[0]);
	}
</script>

二、删除子级元素 removeChild

<body>
   <div id="outNode">
   	  <span id="oSpan">11111</span>
   </div>
</body>
<script type="text/javascript">
	// removeChild 删除子级元素
	outNode.removeChild(oSpan)
</script>

只能删除子级第一层的元素

错误示例

<body>
   <div id="outNode">
   	  	<span id="oSpan">
   	  		<span id="span2"></span>
   	  	</span>
   </div>
</body>
<script type="text/javascript">
     outNode.removeChild(span2)
</script>

在这里插入图片描述

<body>
   <div id="outNode">
      <span></span>
   	  <span></span>
   </div>
</body>
<script type="text/javascript">
     outNode.removeChild(span)
</script>

在这里插入图片描述

<body>
   <div id="outNode">
      <span>11111</span>
   	  <span>22222</span>
   </div>
</body>
<script type="text/javascript">
     var allSpan=document.getElementsByTagName('span');
     outNode.removeChild(allSpan);
</script>

在这里插入图片描述

正确示例-循环删除

<body>
   <div id="outNode">
      <span>11111</span>
   	  <span>22222</span>
   </div>
</body>
<script type="text/javascript">
     var allSpan=document.getElementsByTagName('span');
    for(var i=0;i<2;i++){
    //allSpan[i],i=0 => i=1，删除的是子级的第一层的元素，
      outNode.removeChild(allSpan[0]);
    }

三、删除自身元素 remove

父级删除后，子级也不会存在。如：删除outNode后，两个span也会删除

<body>
   <div id="outNode">
      <span>11111</span>
   	  <span id="oSpan">22222</span>
   </div>
</body>
<script type="text/javascript">
// remove 删除自身
	oSpan.remove();
	outNode.children[0].remove();
</script>

四、返回或设置元素内容 innerHTML

1.返回元素里面的内容

<body>
  <div id="div1">
  	<span></span>
  	<p></p>
  	<div></div>
  </div>
</body>
<script type="text/javascript">
    console.log(div1.innerHTML);
</script>

在这里插入图片描述

2. 如果赋值，就是先清空里面的内容，再加上新内容

<body>
  <div id="div1">
  	<span></span>
  	<p></p>
  	<div></div>
  </div>
</body>
<script type="text/javascript">
    div1.innerHTML='<span>123</span>';
</script>

在这里插入图片描述