前端学习-获取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')


总结

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

相关推荐
虫虫rankourin1 天前
在 create-react-app (CRA) 创建的应用中使用 react-router-dom v7以及懒加载的使用方法
前端·react.js
小刘鸭地下城1 天前
Web安全必备:关键 HTTP 标头解析
前端
yddddddy1 天前
html基本知识
前端·html
不要再敲了1 天前
JavaScript与jQuery:从入门到面试的完整指南
javascript·面试·jquery
荣达1 天前
koa洋葱模型理解
前端·后端·node.js
兔子不吃草~1 天前
Transformer学习记录与CNN思考
学习·cnn·transformer
reembarkation1 天前
使用pdfjs-dist 预览pdf,并添加文本层的实现
前端·javascript·pdf
reembarkation1 天前
vue-pdf 实现blob数据的预览
javascript·vue.js·pdf
李明卫杭州1 天前
JavaScript中的dispatchEvent方法详解
javascript
KenXu1 天前
F2C-PTD工具将需求快速转换为代码实践
前端