原生Javascript中getElement系列与querySelector系列的区别

in 前端技术 with 1 comment

CdnBIP.md.jpg

part.1 文字描述

原生Javascript中

getElement系列选择器:

querySelector系列选择器:

两组选择器都可以用来选择指定的元素,二者功能大致相同,然而仍存在一定区别:

getElement系列获得的是动态集合,querySelector系列获取的是静态集合

通俗解释就是说,getElement系列获取的元素集合,会跟随文档中元素发生变化而变化,而querySelector则不会跟随文档变化而变化

part.2 代码演示

前期准备:
在文档中一个无序列表ul,包含8个列表项li

//使用getElement获取所有列表项li
const getLi = document.getElementsByTagName('li');
//使用querySelector获取所有列表项li
const queryLi = document.querySelectorAll('li');

console.log(getLi.length); //8
console.log(queryLi.length); //8

queryLi[0].remove(); //移除其中一个li

console.log(getLi.length); //7
console.log(queryLi.length); //8

可见,移除了一个li后,getLi集合中只剩下7个列表项,而queryLi集合中仍保持8个列表项

Responses
  1. KoiCarrot

    BeNice

    Reply