菜鸟看前端（JS获取DOM二）

最新推荐文章于 2024-12-06 13:07:24 发布

中庸之为德也，其至矣乎

最新推荐文章于 2024-12-06 13:07:24 发布

阅读量186

点赞数

文章标签： js dom

本文链接：https://blog.csdn.net/weixin_45891146/article/details/112851532

版权

JS获取DOM二

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul>
			<li>111111</li>
			<li>222222</li>
			<li id="li">333333</li>
			<li>444444</li>
			<li>555555</li>
			<li>666666</li>
		</ul>
	</body>
	<script type="text/javascript">
		
		// childNodes // 获取所有的子节点
		// children  // 获取所有的子元素节点 (常用)
		// firstElementChild   获取第一个元素
		// lastElementChild  获取最后一个元素
		// parentNode	获取当前节点的父节点
		// previousElementSibling	获取当前节点的前一个兄弟元素
		// nextElementSibling 获取当前节点的后一个兄弟元素
		
		// 获取元素
		let ul = document.getElementsByTagName('ul')[0]
		
		console.log(ul.childNodes) // childNodes返回的是节点的子节点集合，包括元素节点、文本节点还有属性节点,返回的有text和li
		console.log(ul.children) // children返回的只是节点的元素节点集合 返回的只有li
		
		console.log(ul.firstElementChild) // 返回第一个子元素
		console.log(ul.lastElementChild) // 返回最后一个子元素
		
		// li是ID名，为了方便直接使用
		console.log(li.parentNode) // 获取父节点
		
		console.log(li.previousElementSibling) // 获取当前节点的前一个兄弟元素
		
		console.log(li.nextElementSibling) // 获取当前节点的后一个兄弟元素
		
		

		
	</script>
</html>