JavaScript基础小总结（三之查找元素）

最新推荐文章于 2024-10-07 00:04:50 发布

LF、小苏

最新推荐文章于 2024-10-07 00:04:50 发布

阅读量278

点赞数

分类专栏： JavaScript基础小总结（三之查找元素）文章标签： javascript

本文链接：https://blog.csdn.net/lfxiaosu/article/details/108598561

版权

JavaScript基础小总结（三之查找元素）专栏收录该内容

1 篇文章 0 订阅

订阅专栏

JavaScript基础小总结（三之查找元素）；

接着前面的几篇博客，今天小小的总结以下查找元素的方法

我们都知道原生JavaScript 直接获取元素无非就那几种
		1：document.getElementsByClassName()/通过/类名
		2：document.getElementsByName()//通过name
		3：document.getElementById()//通过Id
		4：document.getElementsByTagName()//通过标签

比如说 1：获取到ul元素下的li标签；

	<ul id="box">
		<li>要获取我</li>
		<li>我也是</li>
	</ul>
<script>
	/**
		获取子元素的方法总共有四个；
			1:childNodes；//不是很推荐，因为它可以获取到空格之类的
			2：children；//推荐，直接返回元素的子元素集合；
			3：firstElementChild和lastElementChild//分别是获取当前元素下的第一个子元素和最后一个
			   子元素；
			4：querySelector函数；//很方便  参数跟css选择器一样；返回当前元素下的第一个子元素；
				<1>:querySelectorAll();//返回当前元素下所有的子元素。
	*/
	//举个板栗；
	let box = document.getElementByiD("box");
	console.log(box.childNodes)//NodeList(5) [text, li, text, li, text]
	console.log(box.children)//HTMLCollection(2) [li, li]
	console.log(box.lastElementChild)//<li>我也是</li>
	console.log(document.querySelector("#box li"))//<li>要获取我</li>
	console.log(document.querySelectorAll("#box li"))//NodeList(2) [li, li]
</script>

比如说 2：获取到li元素的父元素；

	<body>
	 	<ul>
			<li>要获取我</li>
			<li id="li_tag">我也是</li>
		</ul>
		<script>
			/**
				获取当前元素的父节点总共有三种方法
					1:parentNode //获取父节点
					2:parentElement //也是获取父节点，它是ie的标准，我用着都一样
					3:offsetParent //获取body（包含body）以下的所有标签。
					用法跟上面的板栗差不多自己去测试一下。
			 */
			let li_tag = document.getElementById("li_tag");
			console.log(li_tag.offsetParent);
		</script>
	</body>

比如说 3：获取当前元素的兄弟元素；

	/**
		获取当前元素的上一个元素或者说获取当前元素的下一个元素
			1:previousSibling;//获取当前元素的上一个兄弟元素；会匹配到空格之类的字符
			2:previousElementSibling;//获取当前元素的上一个兄弟元素节点；
			3:nextSibling;//获取当前元素的xia一个兄弟元素；会匹配到空格之类的字符
			4:nextElementSibling//获取当前元素的下一个兄弟元素节点；
	*/
   <ul >
		<li>11</li>
		<li id="li1">22</li>
		<li>33</li>
	</ul>
	<script>
		var li1=document.getElementById("li1");
		console.log(li1.previousSibling)//#text
		console.log(li1.previousElementSibling)//<li>11</li>
		console.log(li1.nextElementSibling)//<li>33</li>
		console.log(li1.nextSibling)//#text
	</script>