当前位置：首页 > news >正文

前端学习-获取DOM对象（二十一）

news 2025/7/8 4:56:38

前言

目标

提问

学习路径

根据CSS选择器来获取DOM元素

其他获取DOM元素的方法

根据CSS选择器来获取DOM元素

选择匹配的第一个元素

语法

示例

参数

返回值

选择匹配的多个元素语法

参数

字符串返回值

示例

补充

其它获取DOM元素方法

根据id获取一个元素

根据标签获取一类元素获取页面所有div

根据类名获取元素获取页面所有类名为 w的

总结

前言

雄关漫道真如铁，而今迈步从头越

目标

能获取/查找DOM对象

提问

我们想要操作某个标签首先做什么？

肯定首先选中这个标签，跟 CSS选择器类似，选中标签才能操作

查找元素DOM元素就是利用 js 选择页面中标签元素

学习路径

根据CSS选择器来获取DOM元素

其他获取DOM元素的方法

根据CSS选择器来获取DOM元素

选择匹配的第一个元素

语法

document.querySelector('css选择器');

示例

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><style>.box { width: 100px; height: 100px;}</style><body><div class="box"></div><script> //获取匹配的第一个元素 const box = document.querySelector('div'); console.dir(box); console.log(box);</script></body></html>

参数

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

返回值

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

选择匹配的多个元素语法

:document.querySelectorAll('css选择器')

参数

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

字符串返回值

CSS选择器匹配的NodeList 对象集合document.queryselectorAll('ul li')

示例

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><style>.box { width: 100px; height: 100px;}</style><body><div class="box"></div><ul> <li>1</li> <li>2</li> <li>3</li></ul></ul><script> const box = document.querySelectorAll('ul li'); console.dir(box); console.log(box);</script></body></html>