获取节点、父节点、兄弟节点

最新推荐文章于 2024-02-01 10:33:18 发布

java_zhaoyanli

最新推荐文章于 2024-02-01 10:33:18 发布

阅读量6.8k

点赞数

分类专栏： web-javascript 文章标签： javascript DOM 父节点兄弟节点

本文链接：https://blog.csdn.net/java_zhaoyanli/article/details/50776484

版权

web-javascript 专栏收录该内容

93 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>
  <meta charset="utf-8" />
	<script>
		function getNodes(){
			var d1 = document.getElementById("d1");
			var nodes = d1.childNodes;
			console.log(nodes);
		}
		
		/**
		 * 获取 p1 的父节点
		 */
		function getP1Parent(){
			var p1 = document.getElementById("p1");
			var parent = p1.parentNode;
			console.log(parent);
		}
		
		/**
		 * 获取 p1 的下一个兄弟元素
		 */
		function getP1Sibling(){
			var p1 = document.getElementById("p1");
			var next = p1.nextElementSibling;
			console.log(next);
		}
	</script>

 </head>

 <body>
	<button οnclick="getNodes()">点</button>
	<button οnclick="getP1Parent()">父节点</button>
	<button οnclick="getP1Sibling()">兄弟</button>
	<div id="d1">
		<p id="p1">子元素1</p>
		<p>子元素2</p>
		<p>子元素3</p>
		<p>子元素4</p>
	</div>  
 </body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

java_zhaoyanli

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
获取节点、父节点、兄弟节点

new document function getNodes(){ var d1 = document.getElementById("d1"); var nodes = d1.childNodes; console.log(nodes); } /** * 获取 p1 的父节点 */ function getP1Parent(){
复制链接

扫一扫