前端学习-获取DOM对象(二十一)

目录

前言

目标

提问

学习路径

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

其他获取DOM元素的方法

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

选择匹配的第一个元素

语法

示例

参数

返回值

选择匹配的多个元素语法

参数

字符串返回值

示例

补充

其它获取DOM元素方法

根据id获取一个元素

[根据 标签获取一类元素 获取页面 所有div](#根据 标签获取一类元素 获取页面 所有div)

[根据 类名获取元素 获取页面 所有类名为 w的](#根据 类名获取元素 获取页面 所有类名为 w的)

总结


前言

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


目标

能获取/查找DOM对象

提问

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

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

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

学习路径

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

其他获取DOM元素的方法

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

选择匹配的第一个元素

语法

html 复制代码
document.querySelector('css选择器');

示例

html 复制代码
<!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对象

选择匹配的多个元素语法

html 复制代码
:document.querySelectorAll('css选择器')

参数

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

字符串返回值

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

示例

html 复制代码
<!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>

补充

document.querySelectorAll('css选择器')得到的是一个伪数组有长度有索引号的数组但是没有 pop() push() 等数组方法想要得到里面的每一个对象,则需要遍历(for)的方式获得。

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

其它获取DOM元素方法

根据id获取一个元素

document.getElementById('nav')

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

document.getElementsByTagName('div')

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

document.getElementsByClassName('w')


总结

我很久以前很喜欢的一个人告诉我她恋爱了,我却只能恭喜恭喜

相关推荐
roamingcode3 分钟前
AI Agent开发框架分析:前端视角
前端·人工智能·ai agent
LaughingZhu5 分钟前
PH热榜 | 2025-03-10
前端·人工智能·经验分享·搜索引擎·产品运营
没资格抱怨7 分钟前
基于类型的声明接收props
前端·vue.js
秋天的一阵风20 分钟前
客户非得要求新开一个标签进行通信,那就写!一次性写够八种方案,够不够!
前端·javascript·vue.js
charlie11451419129 分钟前
从0开始的操作系统手搓教程33:挂载我们的文件系统
学习·系统架构·操作系统·教程·文件系统·手搓教程
MediaTea31 分钟前
Ae 效果详解:VR 颜色渐变
前端·vr
九思x33 分钟前
Node.js和Vue CLI 安装指南(Windows 系统)
前端·vue.js·windows
你我哈38 分钟前
Vue.js 与 Axios 实现音乐自由
前端·javascript·vue.js
九丶黎1 小时前
爬虫案例十一js逆向数位观察网
开发语言·javascript·爬虫
uhakadotcom1 小时前
Next.js 高并发场景下的性能优化技巧
前端·面试·github