document.querySelectorAll与常规获取的区别
<!--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返回的都是一个节点集合,类似于数组,两种方法的区别就在于这个集合会不会自动更新。