前端js通过关系获取节点

最新推荐文章于 2024-05-06 02:35:52 发布

钱端攻城狮

最新推荐文章于 2024-05-06 02:35:52 发布

阅读量569

点赞数

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

本文链接：https://blog.csdn.net/m0_54932975/article/details/123599461

版权

js 专栏收录该内容

86 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		测试测试测试
		<!--这是一个注释-->
		<div id="one">哈哈哈</div>
		<p>这是一个段落标签</p><span>这是一个span标签</span><div id="box">
			<span>娃娃鱼</span>
			<span>托儿所</span>
		</div>
		<!--ul>li{列表$}*3-->
		<ul>
			<li>列表1</li>
			<li>列表2</li>
			<li>列表3</li>
		</ul>
	</body>
</html>
<script type="text/javascript">
	//获取节点
	//1.childNodes 获取的是子节点 会得到一个节点数组
	var a1=document.body.childNodes;
	console.log(a1);
	//2.parentNode 获取到某个节点的父节点(节点的父节点只有一个)
	var a2= document.querySelector("#box").parentNode;
	console.log(a2);
	//3.firstChild 获取某个节点中的第一个子节点
	console.log(document.body.firstChild);
	//4.lastChild 获取某个节点中的最后一个子节点
	console.log(document.body.lastChild);
	//5.获取某个节点的上一个兄弟节点
	console.log(document.querySelector("span").previousSibling);
	//6.获取某个节点的下一个兄弟节点
	console.log(document.querySelector("span").nextSibling);
	//-------------仅仅获取标签节点 重点使用最多
	//1.获取某个节点的所有 元素子节点
	console.log(document.body.children);
	//2.获取某个节点的 父元素节点
	console.log(document.querySelector("div").parentElement);
	//3.获取某个节点中的 第一个元素节点
	console.log(document.querySelector("ul").firstElementChild);
	//4.获取box中的最后一个元素节点
	var box =document.querySelector("#box");
	console.log(box.lastElementChild);
	//5.获取box标签的上一个兄弟元素节点
	console.log(box.previousElementSibling);
	//6.获取box标签的下一个兄弟元素节点
	console.log(box.nextElementSibling);
	//7.获取某个节点中 子元素节点的个数(子标签个数)
	console.log(box.childElementCount);
	
	
	
	
	
</script>

运行结果:
在这里插入图片描述

钱端攻城狮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端js通过关系获取节点

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> 测试测试测试  <div id="one">哈哈哈</div> <p>这是一个段落标签</p><span>这是一个spa
复制链接

扫一扫

专栏目录