子舒的博客
·
getElementBy 系列和 querySelector 系列的区别
内容提要
querySelector和querySelectorAll与getElementBy系列的主要区别在于获取元素的方式。getElementBy获取动态集合，而querySelector获取静态集合。使用for循环时，直接使用动态集合可能导致死循环，通过将动态集合静态化可以避免此问题，确保获取的元素数量不受后续动态添加的影响。
关键要点
-
querySelector和querySelectorAll获取元素的方式与getElementBy系列不同。
-
getElementBy获取的是动态集合，而querySelector获取的是静态集合。
-
使用动态集合时，可能导致死循环，通过将其静态化可以避免此问题。
-
在for循环中，使用i < li.length会导致死循环，需将其改为i < 3以静态化li标签数组。
-
querySelectorAll获取的静态集合不会受到后续动态添加元素的影响。
延伸解读
动态与静态集合的理解
在前端开发中，理解动态集合与静态集合的区别至关重要。动态集合会随着DOM的变化而变化，而静态集合则在获取时固定不变。这意味着在处理动态内容时，使用静态集合可以避免意外的循环和性能问题。
避免死循环的技巧
在使用for循环遍历动态集合时，需特别小心。直接使用li.length作为循环条件可能导致死循环。通过将条件改为固定值，可以有效避免此类问题，确保代码的稳定性和可预测性。
querySelector与getElementBy的选择
选择使用querySelector或getElementBy时，应考虑具体需求。如果需要处理动态变化的元素，getElementBy可能更合适；而在需要稳定结果时，querySelector则是更好的选择。了解这两者的特性有助于优化代码。
延伸问答
getElementBy系列和querySelector系列的主要区别是什么？
getElementBy系列获取的是动态集合，而querySelector系列获取的是静态集合。
使用getElementBy系列时可能会遇到什么问题？
使用getElementBy系列时，可能会导致死循环，因为每次循环都会重新获取动态集合。
如何避免使用动态集合时出现死循环？
可以通过将动态集合静态化，例如将循环条件改为i < 3，来避免死循环。
querySelectorAll获取的集合有什么特点？
querySelectorAll获取的静态集合不会受到后续动态添加元素的影响。
在for循环中如何正确使用li标签的长度？
在for循环中，应避免使用li.length作为条件，而是使用静态化的值，如i < 3。
为什么querySelector和querySelectorAll需要带上符号？
querySelector和querySelectorAll需要带上符号是为了选择特定的元素，如类名或ID。
