document.querySelectorAll和querySelector用法
💡
原文中文，约1400字，阅读约需4分钟。
📝
内容提要
querySelectorAll和querySelector是选择文档中匹配CSS选择器的元素的方法，querySelector返回第一个匹配的元素，querySelectorAll返回所有匹配的元素数组。可以使用通配符选择所有标签，也可以根据父元素、class、id、属性等进行选择。还可以使用伪类选择特定条件下的元素，如选择索引为偶数的tr标签。
🎯
关键要点
- querySelector() 方法返回文档中匹配指定 CSS 选择器的第一个元素。
- querySelectorAll() 方法返回所有匹配的节点并返回数组。
- 可以使用通配符选择所有标签，如 document.querySelectorAll('*')。
- 可以根据父元素选择标签，如 document.head.querySelectorAll('*')。
- 可以选择特定标签，如 document.body.querySelectorAll('div')。
- 可以选择第一个匹配的标签，如 document.body.querySelector('div')。
- 可以根据 class 选择标签，如 document.querySelectorAll('.box')。
- 可以根据 id 选择标签，如 document.querySelectorAll('#box')。
- 可以选择具有特定属性的标签，如 document.querySelectorAll('*[name=sex]')。
- 可以选择具有多个条件的标签，如 document.querySelectorAll('p.txt[name]')。
- 可以选择特定结构的标签，如 document.querySelectorAll('div.test>p:first-child')。
- 可以使用属性选择器选择 id 属性以特定字符串开头、结尾或包含的标签。
- 可以使用伪类选择特定条件下的元素，如选择索引为偶数或奇数的 tr 标签。
➡️
