获取节点或者元素

最新推荐文章于 2023-02-17 14:23:01 发布

萌新小吉

最新推荐文章于 2023-02-17 14:23:01 发布

阅读量934

点赞数 1

分类专栏： JaveScript 文章标签：前端 javascript es6

本文链接：https://blog.csdn.net/m0_48166663/article/details/121298580

版权

JaveScript 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>获取节点或者元素</title>
	</head>

	<body>
		<ul id="ul">
			<li>第1个</li>
			<li>第2个</li>
			<li>第3个</li>
			<li id="four">第4个</li>
			<li>第5个</li>
			<li>第6个</li>
			<li>第7个</li>
		</ul>
	</body>

	<script>
		//获取当前节点的父级节点
		console.log(document.getElementById("ul").parentNode);
		//获取当前节点的父级元素
		console.log(document.getElementById("ul").parentElement);
		//获取当前节点的子级节点
		console.log(document.getElementById("ul").childNodes);
		//获取当前节点的子级元素
		console.log(document.getElementById("ul").children);

		//获取当前节点的第一个子节点
		console.log(document.getElementById("ul").firstChild); //IE8中是第一个子元素
		//获取当前节点的第一个子元素
		console.log(document.getElementById("ul").firstElementChild); //IE8中不支持
		//获取当前节点的最后一个子节点
		console.log(document.getElementById("ul").lastChild); //IE8中是第一个子元素
		//获取当前节点的最后一个子元素
		console.log(document.getElementById("ul").lastElementChild); //IE8中不支持
		//获取当前节点的前一个兄弟节点
		console.log(document.getElementById("four").previousSibling); //IE8中是前一个子元素
		//获取当前节点的前一个兄弟元素
		console.log(document.getElementById("four").previousElementSibling); //IE8中不支持
		//获取当前节点的后一个兄弟节点
		console.log(document.getElementById("four").nextSibling); //IE8中是后一个子元素
		//获取当前节点的后一个兄弟元素
		console.log(document.getElementById("four").nextElementSibling); //IE8中不支持
	</script>

</html>

建议在浏览器中打开查看观察

萌新小吉

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
获取节点或者元素

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>获取节点或者元素</title> </head> <body> <ul id="ul"> <li>第1个</li> <li>第2个</li> <li>第3个</li>.
复制链接

扫一扫