高唐企业做网站推广/神起网络游戏推广平台
上一篇：Web API 基本认知
一、获取DOM对象
目标：能查找/获取DOM对象
提问：我们想要操作某个标签首先做什么？
- 肯定首先选中这个标签，跟 CSS选择器类似，选中标签才能操作
- 查找元素DOM元素就是选择页面中标签元素
学习路径：
1. 根据CSS选择器来获取DOM元素 (重点)
2. 其他获取DOM元素方法（了解）
1. 根据CSS选择器来获取DOM元素 (重点)
1.1 选择匹配的第一个元素
语法：
参数:
包含一个或多个有效的CSS选择器 字符串
返回值：
CSS选择器匹配的第一个元素,一个 HTMLElement对象。
如果没有匹配到，则返回null。
多参看文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector
1.2 选择匹配的多个元素
语法：
参数:
包含一个或多个有效的CSS选择器 字符串
返回值：
CSS选择器匹配的NodeList 对象集合
例如：
思考
1. 获取一个DOM元素我们使用谁？
☞ querySelector()
2. 获取多个DOM元素我们使用谁？
☞ querySelectorAll()
3. querySelector() 方法能直接操作修改吗？
√ 可以
4. querySelectorAll() 方法能直接修改吗？ 如果不能可以怎么做到修改？
× 不可以， 只能通过遍历的方式一次给里面的元素做修改
得到的是一个伪数组：
- 有长度有索引号的数组
- 但是没有 pop() push() 等数组方法
想要得到里面的每一个对象，则需要遍历（for）的方式获得。
注意事项
注意：哪怕只有一个元素，通过querySelectAll() 获取过来的也是一个伪数组，里面只有一个元素而已
练习：请控制台依次输出 3个 li 的 DOM对象
2. 其他获取DOM元素方法（了解）
本篇小结
1. 获取页面中的标签我们最终常用那两种方式？
- querySelectorAll()
- querySelector()
2. 他们两者的区别是什么？
- querySelector() 只能选择一个元素， 可以直接操作
- querySelectorAll() 可以选择多个元素，得到的是伪数组，需要遍历得到每一个元素
3. 他们两者小括号里面的参数有神马注意事项？
- 里面写css选择器
- 必须是字符串，也就是必须加引号
下篇预告：设置/修改DOM元素内容 和元素属性
黑马前端专栏干货多多，关注再学，好方便~
2022年前端学习路线图：课程、源码、笔记，技术栈 另外此线路图实时更新！需要课后资料的友友们，可以直接告诉我。
