[TOC] #### JS 选择器 --- JavaScript 选择器是用于从 HTML 文档中选取特定 DOM 元素的工具，通过这些选择器可以操作元素的样式、内容、绑定事件，从而实现动态交互 JavaScript 选择器总结 ```javascript // 查找 id 为 cate 的元素，返回值 HTMLElement|null document.getElementById('cate') // 查找 class 为 item 的所有元素，返回值 HTMLCollection document.getElementsByClassName('item') // 查找标签名为 p 的所有元素，返回值 HTMLCollection document.getElementsByTagName('p') // 查找 name 为 gender 的所有元素，返回值 NodeList document.getElementsByName('gender') // 查找满足条件的第一个元素，返回值 Element|null document.querySelector('.item') // 查找满足条件的所有元素，返回值 NodeList[] document.querySelectorAll('.item') ``` NodeList 对象可以通过 forEach 进行遍历 ```javascript const ele = document.getElementsByName('gender') ele.forEach(item => { }) ``` HTMLCollection 对象无法通过 forEach 进行遍历，因为它不是一个真正的数组。可以先使用数组解构再进行遍历 ```javascript const ele = document.getElementsByClassName('item'); // 错误写法，会报错 Uncaught TypeError: ele.forEach is not a function // ele.forEach(val => { }); // 正确写法，先使用数组解构，然后再进行遍历 [...ele].forEach(val => { }) ``` HTMLCollection 对象虽然无法通过 forEach 进行遍历，但是可以通过 for 循环遍历 ```javascript const ele = document.getElementsByClassName('item'); for (let i = 0; i < ele.length; i++) { console.log(ele[i]); } ``` #### 基础选择器 --- ##### id 选择器 ```html <div id="cate">id选择器</div> ``` ```javascript // 查找 id 为 cate 的元素，返回值 HTMLElement | null const ele = document.getElementById('cate') console.log(ele); // <div id="cate">id选择器</div> ``` ##### class 选择器 ```html <ul> <li class="item">张三</li> <li class="item">李四</li> <li class="item">王五</li> </ul> ``` ```javascript // 查找 class 为 item 的所有元素，返回值 HTMLCollection const ele = document.getElementsByClassName('item'); console.log(ele); // HTMLCollection(3) [li.item, li.item, li.item] ``` ##### name 选择器 ```html <form action=""> 男 <input name="gender" type="radio" value="1"> 女 <input name="gender" type="radio" value="0"> </form> ``` ```javascript // 查找 name 为 gender 的所有元素，返回值 NodeList const ele = document.getElementsByName('gender') console.log(ele); // NodeList(2) [input, input] ``` ##### 标签名选择器 ```html <div> <p>周一晴天</p> <p>周二多云</p> <p>周三小雨</p> </div> ``` ```javascript // 查找标签名为 p 的所有元素，返回值 HTMLCollection const ele = document.getElementsByTagName('p') console.log(ele); // HTMLCollection(3) [p, p, p] ``` #### 高级选择器 --- 高级选择器基于 CSS 选择器语法，提供更灵活的定位方式 `querySelector()` 和 `querySelectorAll()` 是 DOM Selector API 中的核心方法，基于 CSS 选择器查找元素，它们在返回值、使用场景、性能特性上存在关键差异 工作方式和返回值 ```javascript // 查找满足条件的第一个元素，返回值 Element|null const single = document.querySelector('.lists .item') // 查找满足条件的所有元素，返回值 NodeList[] const multiple = document.querySelectorAll('.lists .item') ``` 高级选择器的用法比较多，更多用法实际开发可以自行查询相关资料，使用示例： ```javascript // 根据 层级选择器 选取元素 document.querySelectorAll('.item > p') document.querySelectorAll('.lists .item') // 根据 属性选择器 选取元素 document.querySelectorAll('[name="gender"]') ```