子舒的博客
·
getElementBy 系列和 querySelector 系列的区别
💡
原文中文，约1300字，阅读约需4分钟。
📝
内容提要
querySelector和querySelectorAll与getElementBy系列的主要区别在于获取元素的方式。getElementBy获取动态集合，而querySelector获取静态集合。使用for循环时，直接使用动态集合可能导致死循环，通过将动态集合静态化可以避免此问题，确保获取的元素数量不受后续动态添加的影响。
🎯
关键要点
- querySelector和querySelectorAll获取元素的方式与getElementBy系列不同。
- getElementBy获取的是动态集合，而querySelector获取的是静态集合。
- 使用动态集合时，可能导致死循环，通过将其静态化可以避免此问题。
- 在for循环中，使用i < li.length会导致死循环，需将其改为i < 3以静态化li标签数组。
- querySelectorAll获取的静态集合不会受到后续动态添加元素的影响。
❓
延伸问答
getElementBy系列和querySelector系列的主要区别是什么？
getElementBy系列获取的是动态集合，而querySelector系列获取的是静态集合。
使用getElementBy系列时可能会遇到什么问题？
使用getElementBy系列时，可能会导致死循环，因为每次循环都会重新获取动态集合。
如何避免使用动态集合时出现死循环？
可以通过将动态集合静态化，例如将循环条件改为i < 3，来避免死循环。
querySelectorAll获取的集合有什么特点？
querySelectorAll获取的静态集合不会受到后续动态添加元素的影响。
在for循环中如何正确使用li标签的长度？
在for循环中，应避免使用li.length作为条件，而是使用静态化的值，如i < 3。
为什么querySelector和querySelectorAll需要带上符号？
querySelector和querySelectorAll需要带上符号是为了选择特定的元素，如类名或ID。
🏷️
标签
➡️
