0
点赞
收藏
分享

微信扫一扫

黑马前端-Web APIs—获取DOM元素


上一篇:Web API 基本认知  

一、获取DOM对象


目标:能查找/获取DOM对象


提问:我们想要操作某个标签首先做什么?


  •  肯定首先选中这个标签,跟 CSS选择器类似,选中标签才能操作
  •  查找元素DOM元素就是选择页面中标签元素

学习路径:


1. 根据CSS选择器来获取DOM元素 (重点)


2. 其他获取DOM元素方法(了解)



1. 根据CSS选择器来获取DOM元素 (重点)

1.1 选择匹配的第一个元素


语法:



黑马前端-Web APIs—获取DOM元素_CSS


 


参数:
 


包含一个或多个有效的CSS选择器 字符串
 


返回值:
 


CSS选择器匹配的 第一个元素 ,一个 HTMLElement对象。
 


如果没有匹配到,则返回null。

 


多参看文档:https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector


1.2 选择匹配的多个元素

语法:



黑马前端-Web APIs—获取DOM元素_html_02



参数:
 


包含一个或多个有效的CSS选择器 字符串
 


返回值:
 


CSS选择器匹配的 NodeList 对象集合
 


例如:
 



黑马前端-Web APIs—获取DOM元素_前端_03


 

思考


1. 获取一个DOM元素我们使用谁?


☞ querySelector()
 


2. 获取多个DOM元素我们使用谁?
 


☞  querySelectorAll()
 


3. querySelector() 方法能直接操作修改吗?
 


√  可以
 


4. querySelectorAll() 方法能直接修改吗? 如果不能可以怎么做到修改?
 


×  不可以, 只能通过遍历的方式一次给里面的元素做修改



黑马前端-Web APIs—获取DOM元素_选择器_04


得到的是一个 伪数组


  •  有长度有索引号的数组
  •  但是没有 pop() push() 等数组方法

想要得到里面的每一个对象,则需要遍历(for)的方式获得。


注意事项


注意:哪怕只有一个元素,通过querySelectAll() 获取过来的也是一个 伪数组 ,里面只有一个元素而已


练习:请控制台依次输出 3个 li 的 DOM对象

黑马前端-Web APIs—获取DOM元素_选择器_05

 

2. 其他获取DOM元素方法(了解)

本篇小结


1. 获取页面中的标签我们最终常用那两种方式?
 


  •  querySelectorAll()
  •  querySelector()

2. 他们两者的区别是什么?


  •  querySelector() 只能选择一个元素, 可以直接操作
  •  querySelectorAll() 可以选择多个元素,得到的是伪数组,需要遍历得到每一个元素

3. 他们两者小括号里面的参数有神马注意事项?
 


  •  里面写css选择器
  •  必须是字符串,也就是必须加引号
     

下篇预告:设置/修改DOM元素内容 和元素属性


举报

相关推荐

0 条评论