关于获取DOM节点js方法document.querySelectorAll与常规获取的区别-CSDN博客

本文链接：https://blog.csdn.net/majiang8823/article/details/109608486

本文探讨了JavaScript中使用document.querySelectorAll()方法与常规DOM获取方法（如getElementsByTagName和getElementById）的区别。querySelectorAll接受CSS选择器，但在元素动态变化时，其返回的集合不会自动更新。相比之下，常规方法如getElementsByTagName在元素移除后会反映这些变化。在学习中querySelectorAll方便，但在实际项目中，考虑实时性通常选择常规DOM获取方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

			<!--body里面的代码-->
			<ul>
			        <li>洪山区</li>
			        <li id="wuchang">武昌区</li>
			        <li>汉阳区</li>
			    </ul>

一、document.querySelectorAll获取节点方法

document.querySelectorAll（）方法在学习中我们会经常用到，特别的方便，当我们要获取DOM节点的时候接收的参数是一个 CSS 选择符。需要注意的是，querySelectorAll 所接收的参数是必须严格符合 CSS 选择符规范的。所以下面这种写法，将会抛出异常

代码如下（document.querySelectorAll（）获取）：

				<script>
			        var li = document.querySelectorAll("li");
			        var li1= document.querySelectorAll("#wuchang");
			        console.log(li,li1)
			    </script>

输出结果如下
在这里插入图片描述

二、常规获取DOM节点方法

代码如下（常规获取）：

			var li = document.getElementsByTagName("li");
			var wuchang = document.getElementById("wuchang");
			console.log(li,wuchang)

输出结果如下
在这里插入图片描述

2.分析区别

通过上面的document.querySelectorAll()方法能够获取到节点，document.getElementsByTagName()方法和document.getElementById()方法等这些常规方法也能获取到DOM节点，但是我们在工作和项目开发中要用常规的DOM获取方法来获取了？

我们用代码来做一个小实验。

		var li = document.querySelectorAll("li");
         var li1 = document.getElementsByTagName("li");
         var wuchang = document.getElementById("wuchang");
		 wuchang.remove()
		 console.log('document.querySelectorAll()方法获取',li)
		 console.log('常规方法获取',li1)

首先我们同时用这两个方法获取li标签，同时获取id为wuchang的li标签，然后移出id为wuchang的li标签，看看输出的结果是什么

输出结果如下
在这里插入图片描述
我们发现，武昌这个li标签已经被移出掉了，我们在看看控制台打印的内容

控制台输出结果
在这里插入图片描述
此时，用querySelectorAll()方法获取的方法在控制台打印的内容被移出的id名为wuchang的li标签还在，
而常规获取的方法中，被移出的标签的以不在打印出来，只有两个标签

总结

在学习中，我们可以用querySelectorAll()方法来进行获取节点，但是，在工作中，我们都会用常规的方法来获取DOM节点，getElement* 的实时性体现在返回集合的时候，我们知道getElementsBy*和querySelectorAll返回的都是一个节点集合，类似于数组，两种方法的区别就在于这个集合会不会自动更新。