js DOM获取元素方式详解

thinkyou 发表于 2022-1-13 20:56

本帖最后由 thinkyou 于 2022-1-13 21:05 编辑

一.JS获取DOM元素的方法（常用8种）你可以记住,Element加s的是获取集合
/*通过ID获取*/          getElementById
/*通过name属性*/       getElementsByName
/*通过标签名*/          getElementsByTagName//加了Tag的是获取标签名的
/*通过类名*/          getElementsByClassName
/*获取html的方法*/    document.documentElement
/*获取body的方法*/    document.body

/*通过选择器获取一个元素*/    querySelector
/*通过选择器获取一组元素*/    querySelectorAll

//用法
//用集合获取第一个
let box = document.getElementsByClassName('box');
//querySelector获取第一个
let li = document.querySelector('选择器');
//let li = document.querySelector('.box');
//let li = document.querySelector('li');
//let li = document.querySelector('#logo');
//如果是querySelectorAll获取集合需要遍历

二.querySelectorAll与getElementByTagName的区别

这两个方法都是用来获取元素的DOM方法，不同的是 querySelectorAll 方法返回的是一个 NodeList 节点列表，
而 getElementByTagName 方法返回的是一个 HTMLCollection 集合。

两个方法的区别就在于 NodeList 与 HTMLCollection 的区别。
NodeList 是一个静态对象，从捕获到这个对象开始，里面的元素就是固定不变的。
HTMLCollection 是一个动态集合，里面的元素是动态变化的。

这么说可能有些人会一头雾水，举例说明就一目了然了，上代码：
<body>
<ul id="demo">
   <li></li>
   <li></li>
   <li></li>
   <li></li>
</ul>
<script>
   //获取id
   let ul = document.getElementById('demo');
   //获取标签集合
   let get = ul.getElementsByTagName('li');
   // 获取标签集合
   var quer = ul.querySelectorAll('li');

   // 插入元素li
   let li1 = document.createElement('li');
   ul.appendChild(li1);

   console.log(get.length, quer.length); // 5, 4

   // 插入元素
   let li2 = document.createElement('li');
   ul.appendChild(li2);

   console.log(get.length, quer.length); // 6, 4
   console.log(get,quer); //打印集合进行比较
</script>
</body>

querySelectorAll 获取到的是到这个方法执行为止之前的元素，之后即使再有元素变化，quer中始终只有之前的4个元素。
而getElementsByTagName则不同，get里面的元素数量是动态变化的，会随着实际元素数量的变化而实时更新

三.querySelector相比getElement(s)在性能上的区别

首先，getElement(s) By 在性能上是劣势,querySelector在性能上是优势
getElement(s)By系列获取到的集合是动态的，每次访问都相当于对查询范围内进行一次重新查询，因此就算你避免了死循环，每次访问集合时，它在 DOM 查询这块仍然会消耗不少时间。
querySelectorAll 到的是一个"快照"，它在获取后，如果你再用js代码新增了元素,querySelectorAll是不会动态更新获取到的元素的，因此它的访问效率必然更快。

开发中我那个用的多一些?
答:querySelector
因为更加灵活性能更好
如果你要考虑实时更新获取元素你可以用getElement

喵啊发表于 2022-1-13 21:28

我怎么有点怀疑你是为同学了？太可怕了，嗯主要是看了你记录

罗婷发表于 2022-1-13 21:42

一般能引用就直接引用 JQ

singledog 发表于 2022-1-13 22:34

讲的不错，请问是自己总结的还是在什么书上面看到的，js入门这块有什么比较好的书推荐吗？

thinkyou 发表于 2022-1-13 22:51

singledog 发表于 2022-1-13 22:34
讲的不错，请问是自己总结的还是在什么书上面看到的，js入门这块有什么比较好的书推荐吗？

都是自己总结的,,js看书的话建议看<javascript高级程序设计>就是红色封面的书,作者Matt Frisbie写的,
在js里面这本书还是很有权威性的

bly27984 发表于 2022-1-13 22:54

感谢分享奥还是以前看的js红皮书第三版呢都快忘了

singledog 发表于 2022-1-14 00:11

thinkyou 发表于 2022-1-13 22:51
都是自己总结的,,js看书的话建议看就是红色封面的书,作者Matt Frisbie写的,
在js里面这本书还是很有权威 ...

多谢解答。{:301_991:}

wan1330 发表于 2022-1-14 09:59

querySelectorAll()传的是css选择器，比TagName获取范围大。

thinkyou 发表于 2022-1-14 19:25

罗婷发表于 2022-1-13 21:42
一般能引用就直接引用 JQ

确实,还是jq香:Dweeqw

yan_97 发表于 2022-1-14 21:58

话说网页视频中途不定时的弹窗答题怎么做到一直检测？

页: [1] 2

吾爱破解 - 52pojie.cn's Archiver

js DOM获取元素方式详解