js dom-node节点选择

Dear 丶 2021-07-25 01:33 394阅读 0赞

dom node
    	一切皆节点(对象、属性、空文本、文本、注释)
    	
    		通用属性
    		
    			.nodeName
    				返回节点的名称
    				
    			.nodeType
    				返回节点的常数值
    			
    		返回当前节点的相关节点属性
    			
    			.ownerDocument
    				获得顶层对象，即document
    			
    			.nextSibling
    				返回当前节点的后面的第一个同级节点,空白也算文本节点，无返回null
    			
    			.previousSibling
    				返回当前节点的前面的第一个同级节点
    		
    		返回子节点属性
    			
    			.firstChild
    				返回当前节点的第一个子节点
    			
    			.lastChild
    				返回当前元素的最后一个子节点
    			
    			.childNodes
    				返回所有子节点的集合,不包括孙子节点

代码示例：

<html>
    	<head>
    		<meta charset="utf-8">
    		<title>js node</title>
    		<style>
    			.box{ 
    				border:solid 1px red;
    			}
    		</style>
    	</head>
    	<body>
    
    		
    		
    		<div class="box">
    			
    			<p class="p1">123456</p>
    			<span class="sp1">456789</span>
    			<p>123456 <a href="">ww</a></p>
    			<a href="">bb</a>
    			<p>123456</p>
    			<p>123456</p>
    			<button id="bu" >点我</button>
    		</div>
    		
    		<script>
    			var box=document.querySelector(".box");
    			var p1=document.querySelector(".p1");
    			var sp1=document.querySelector(".sp1");
    			
    			console.log(document.nodeName,document.nodeType);
    			console.log(box.nodeName,box.nodeType);
    			
    			var attr=document.createAttribute("align");
    			console.log(attr.nodeName,attr.nodeType);
    			
    			console.log(box.ownerDocument,p1.ownerDocument,sp1.ownerDocument);
    			
    			console.log(p1.nextSibling.nextSibling);
    			console.log(sp1.previousSibling.previousSibling);
    			
    			console.log(box.firstChild.nextSibling);
    			
    			console.log(box.childNodes);
    			
    			var bt=document.querySelector("#bu");
    			
    			bt.onclick=function(){ 
    				var h1=document.createElement("h1");
    				h1.innerHTML="新增h1";
    				box.appendChild(h1);
    				console.log(box.childNodes)
    			}
    		</script>
    
    	</body>
    </html>