dom基础5

最新推荐文章于 2023-04-22 17:47:07 发布

taojYang

最新推荐文章于 2023-04-22 17:47:07 发布

阅读量93

点赞数

分类专栏： dom 文章标签： dom 各节点关系

本文链接：https://blog.csdn.net/weixin_43293451/article/details/91420853

版权

dom 专栏收录该内容

8 篇文章 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>
	<!--子节点-->
	<!--注：childNodes会包含文本节点，而，children会排出文本节点-->
	<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>