JS 操作节点的使用

àì夳堔傛蜴生んèń 2023-10-05 08:34 15阅读 0赞

<table> 
 <tbody> 
  <tr> 
   <td> <p>名称</p> </td> 
   <td> <p>描述</p> </td> 
  </tr> 
  <tr> 
   <td> <p>&nbsp;document.createElement(“元素名”)</p> </td> 
   <td> <p>创建元素节点</p> </td> 
  </tr> 
  <tr> 
   <td> <p>document.createTextNode(“文本”)</p> </td> 
   <td> <p>&nbsp;创建文本节点</p> </td> 
  </tr> 
  <tr> 
   <td> <p>A.appendChild(&nbsp;B)</p> </td> 
   <td> <p>&nbsp;把B节点追加至A节点的末尾</p> </td> 
  </tr> 
  <tr> 
   <td> <p>insertBefore(&nbsp;A,B&nbsp;)</p> </td> 
   <td> <p>&nbsp;把A节点插入到B节点之前</p> </td> 
  </tr> 
  <tr> 
   <td> <p>&nbsp;cloneNode(deep)</p> </td> 
   <td> <p>&nbsp;复制某个指定的节点</p> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> <p>父节点.removeChild(&nbsp;子节点)</p> </td> 
   <td> <p>删除指定的节点</p> </td> 
  </tr> 
  <tr> 
   <td> <p>父节点.replaceChild(&nbsp;newNode,&nbsp;oldNode)&nbsp;</p> </td> 
   <td> <p>&nbsp;用其他的节点替换指定的节点</p> </td> 
  </tr> 
 </tbody> 
</table>

#### 效果： ####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 5][]

#### HMTL页面： ####

<html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    
    			ul {
    				width: 40%;
    				display: flex;
    			}
    
    			li {
    				flex: 1;
    				list-style: none;
    				background: gray;
    				margin: 0px 5px;
    				height: 35px;
    				line-height: 35px;
    				text-align: center;
    				color: white;
    				font-weight: bolder;
    				border-radius: 10px;
    			}
    
    			li:hover {
    				background: palevioletred;
    			}
    			/* 图片大小 */
    			img{
    				width: 150px;
    				height: 150px;
    			}
    		</style>
    	</head>
    	<body>
    		<ul>
    			<li id="add">添加</li>
    			<li id="ins">插入</li>
    			<li id="copy">克隆</li>
    			<li id="del">删除</li>
    			<li id="rep">替换</li>
    		</ul>
    
    		<div id="box">
    			<img src="img/1.jpg"  id="mm">
    			<img src="img/6.png"  id="stu">
    		</div>
    
     
    	</body>
    </html>

#### JS 脚本 ####

//1)添加 appendChild(新节点)
    document.getElementById("add").onclick=function(){
    	//（1）创建节点 <img>
    	var imgNew=document.createElement("img");
    	//(2)节点元素的属性src <img src="img/1.jpg">
    	imgNew.setAttribute("src","img/2.jpg");
    	//(3)放在body中
    	document.body.appendChild(imgNew);
    }
    
    //2）插入（指定位置） insertBefore(新节点，旧节点)
    document.getElementById("ins").onclick=function(){
    	//（1）创建节点 <img>
    	var imgNew=document.createElement("img");
    	//(2)节点元素的属性src <img src="img/3.jpg">
    	imgNew.setAttribute("src","img/3.jpg");
    	
    	//（3）指定参考点 rabbit
    	var rabbit = document.getElementById("mm");
    	
    	//(4)指定div
    	var div=document.getElementById("box");
    	
    	//(5)添加
    	div.insertBefore(imgNew,rabbit);
    	
    }
    
    //克隆==>复制 cloneNode(true:复制所有的节点)
    document.getElementById("copy").onclick=function(){
    	//1.找到要复制的节点
    	var rabbit =document.getElementById("mm").cloneNode(true);
    	
         //2放在body中
    	document.body.appendChild(rabbit);
    }
    
    //删除   父节点. removeChild(删除的节点)
    document.getElementById("del").onclick=function(){
    	//1.找到要删除的节点
    	var stu = document.getElementById("stu");
    	
    	//2.删除
    	document.getElementById("box").removeChild(stu);
    	
    }
    
    
    //替换  父节点.replaceChild(新节点,要替换的节点)
    document.getElementById("rep").onclick=function(){
    	//1.新节点
    	var imgNew =document.createElement("img");
    	imgNew.setAttribute("src","img/change.jpg");
    	imgNew.setAttribute("id","mm")
    	
    	//2.要替换的节点
    	var rabbit = document.getElementById("mm");
    	
    	//3.操作替换
    	document.getElementById("box").replaceChild(imgNew,rabbit);
    	
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200817171009275.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200817171051451.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200817171121870.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200817171155546.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200817171236932.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200817171306445.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70