js dom-node方法

灰太狼 2021-07-24 14:45 425阅读 0赞

.appendChild(节点)
    	插入节点作为最后一个子节点
    
    .hasChildNodes()
    	返回一个布尔值，表示当前节点是否有子节点,空文本等也算子节点
    
    .cloneNode(布尔值)
    	返回被克隆的节点，false只复制当前节点，true复制当前节点和其内的所有节点
    
    .insertBefore()
    	父节点.insertBefore(待插入节点,父节点的子节点); 
    		第一个参数为插入节点，第二个参数为插入到哪个子节点之前，为null则表示插入到最后
    		
    .removeChild(删除的节点对象)
    	删除父节点中的指定子节点，返回值为删除的节点对象
    
    .replaceChild(替换子节点,被替换子节点)
    	第二个参数将被第一个参数替换，并且第一个参数替换后，原位置空间消失
    	返回值是被替换的节点
    
    .contains(子节点对象)
    	判断指定节点是否为当前节点的子节点，返回值为布尔值
    
    .isEqualNode(指定节点)
    	判断指定节点是否和当前节点相等

代码示例：

<html>
    	<head>
    		<meta charset="utf-8">
    		<title>js node常用方法</title>
    		<style type="text/css">
    			.box{ 
    				height:400px;
    				width:400px;
    				border:solid 1px red;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="box">
    			<p id="p1">123</p>
    			<p id="p2"><a href="">ww</a></p>
    			<p>323</p>
    			<p>423</p>
    			<p>523</p>
    		</div>
    		
    		<script>
    			var h1=document.createElement("h1");
    			h1.innerHTML="h111111";
    			document.body.appendChild(h1);
    			var box=document.querySelector(".box");
    			var p2=document.querySelector("#p2");
    			var p1=document.querySelector("#p1")
    			console.log(document.querySelector(".box").firstChild.nextSibling.hasChildNodes())
    			
    			var cbox=document.querySelector(".box").cloneNode(true);
    			console.log(cbox.firstChild.nextSibling.nextSibling.nextSibling.hasChildNodes());
    			
    			var h1=document.createElement("h1");
    			h1.innerHTML="待插入"
    			
    			box.insertBefore(h1,p2);
    			
    // box.removeChild(p2);
    			
    			box.replaceChild(p1,p2);
    			
    			console.log(box.contains(p1));
    			
    		</script>
    	</body>
    </html>