本文介绍了JavaScript中用于获取DOM元素的querySelector和querySelectorAll方法，讲解了它们的选择器功能、返回值类型（单个元素或伪数组）以及如何处理多选元素。重点强调了在处理多个元素时的遍历技巧。
-
选取第一个元素
- 语法：
+<body> <ul> <li>测试1</li> <li>测试2</li> <li>测试3</li> </ul> <script> const li=document.querySelector('ul li:first-child') console.log(li) <!-- 选择所有小li --> const lis=document.querySelectorALL('ul li') console.log(lis) </script> </body> - 参数：
- 包含一个或多个有效的CSS选择器字符串
- 返回值
- CSS选择器匹配的第一个元素，一个HTMLElement对象
- 如果没有匹配到，则返回null
- 语法：
-
选取匹配的多个元素
- 语法：
+const lis=document.querySelectorAll('ul li') console.log(lis) - 参数：
- 包含一个或多个有效的CSS选择器字符串
- 返回值
- CSS选择器匹配的NodeList对象组合
- 补充：
- 获取一个DOM元素可以直接操作修改
- 获取多个DOM元素不可以直接修改，因为多个来的是数组，所以可以通过遍历的方法
-
通过CSS选择器来获取DOM元素（重点）
+document.querySelectorALL('css选择器')- 得到的是一个伪数组：
- 有长度有索引号的数组
- 但是没有pop() posh()等数组方法
- 想要得到里面的每一个对象，则需要遍历（for)的方式获得
- 哪怕只有一个元素，通过querySelectALL()获取过来也是一个伪数组，里面也只有一个元素而已
- 得到的是一个伪数组：
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
