本帖最后由 thinkyou 于 2022-1-13 21:05 编辑
一.JS获取DOM元素的方法（常用8种）你可以记住,Element加s的是获取集合
[JavaScript] 纯文本查看 复制代码 /*通过ID获取*/ getElementById
/*通过name属性*/ getElementsByName
/*通过标签名*/ getElementsByTagName //加了Tag的是获取标签名的
/*通过类名*/ getElementsByClassName
/*获取html的方法*/ document.documentElement
/*获取body的方法*/ document.body
/*通过选择器获取一个元素*/ querySelector
/*通过选择器获取一组元素*/ querySelectorAll
//用法
//用集合获取第一个
[JavaScript] 纯文本查看 复制代码 let box = document.getElementsByClassName('box')[0];
//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 是一个动态集合，里面的元素是动态变化的。
这么说可能有些人会一头雾水，举例说明就一目了然了，上代码：
[JavaScript] 纯文本查看 复制代码 <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 20:56
|
发表于 2022-1-13 22:51
