dom基础5

傷城~ 2022-01-19 01:11 214阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>DOM</title>
    </head>
    <body>
    	<div id="parentDiv">
    		父div内容
    		<div id="d1">第一个div</div><div id="d2">第二个div</div>
    		<div id="d3">第三个div</div>
    	</div>
    	<button onclick="showParent()">递归父节点</button>
    	<script>
    		var node = null;
    		function showParent(){ 
    			if(null==node){ 
    				node = document.getElementById("parentDiv");
    			}
    			if(document == node){ 
    				alert("已是根节点，document");
    			}else{ 
    				alert(node.parentNode);
    				node = node.parentNode;
    			}
    		}
    	</script>
    	
    	<script>
    		function showPre(){ 
    			var d2 = document.getElementById("d2");
    			alert(d2.previousSibling.innerHTML);//第一个div
    		}
    		function showNext(){ 
    			var d2 = document.getElementById("d2");
    			alert(d2.nextSibling.nodeName);//#text，div2和div3之间有空格换行
    		}
    	</script>
    	<br>
    	<button onclick="showPre()">获取前一个同胞</button>
    	<button onclick="showNext()">获取后一个同胞</button>
    	<br>
    	
    	
    	<script type="text/javascript">
    		var div = document.getElementById("parentDiv");
    		function getFirst(){ 
    			alert(div.firstChild.nodeName);//#text
    		}
    		function getLast(){ 
    			alert(div.lastChild.nodeName);//#text
    		}
    		function showAll(){ 
    			alert(div.childNodes.length);//6
    		}
    		function show(){ 
    			var ds = div.childNodes;
    			var s = ds[0]+"<br>";
    			for(var i = 1; i<ds.length; i++){ 
    				s += ds[i]+"<br>"
    			}	
    			document.getElementById("message").innerHTML = s;
    		}
    	</script>
    	<br>
    	<button onclick="getFirst()">获取第一个子</button>
    	<button onclick="getLast()">获取最后一个子</button>
    	<button onclick="showAll()">获取子的长度</button>
    	<br>
    	<button onclick="show()">打印所有节点</button>
    	<div id="message">打印出所有节点</div>
    	<br>
    </body>
    </html>