js怎样获取元素节点怎样获取某个元素下的第一个节点获取相邻的兄弟节点

最新推荐文章于 2021-09-15 17:12:55 发布

woshidamimi0

最新推荐文章于 2021-09-15 17:12:55 发布

阅读量4k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/woshidamimi0/article/details/102505033

版权

js 专栏收录该内容

68 篇文章 4 订阅

订阅专栏

本文介绍了在不使用jQuery的情况下，如何使用原生JavaScript获取元素节点，包括获取某个元素下的第一个节点以及相邻的兄弟节点。虽然一些API可能不完全兼容IE浏览器。

摘要由CSDN通过智能技术生成

有时候不需要使用jquery，而如果需要用原生js获取节点就比较麻烦了

以下是一些比较常用的api，记录一下。

不一定兼容ie

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
	</head>
	<body>
		<div id="box">
			<p>first</p>
			<p>two</p>
			<p>three</p>
			<p>four</p>
			<p>last</p>
		</div>
	</body>
</html>
<script type="text/javascript">
	// 通过id获取节点
	var dom0 = document.getElementById('box');
	console.log(dom0);
	// 也可以用querySelector
	let dom = document.querySelector('#box');
	console.log(dom);
	// 获取到子节点
	console.log('children', dom.children);
	// firstChild会获取到换行(如果有)
	console.log('firstChild', dom.firstChild);
	// firstElementChild会去掉换行
	console.log('firstElementChild', dom.firstElementChild);
	console.log('children下标获取', dom.children[0].innerHTML);

	// 获取紧挨着的同级元素
	console.log('nextSibling', dom.children[0].nextSibling);
	// nextElementSibling
	console.log('nextElementSibling', dom.children[0].nextElementSibling);
	
</script>