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


总结

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

相关推荐
安冬的码畜日常18 分钟前
【CSS in Depth 2 精译_084】第 14 章:CSS 蒙版、形状与剪切概述 + 14.1:CSS 滤镜
前端·css·css3·html5·滤镜·css滤镜·滤镜特效
落日弥漫的橘_22 分钟前
vue项目 中 asstes文件夹 与 static文件夹 的联系与区别
前端·javascript·vue.js·前端框架
tester Jeffky42 分钟前
深入探索Vue.js中的插值表达式:数据绑定的艺术
前端·javascript·vue.js
m0_7482453443 分钟前
Vue3父子组件传属性和方法调用Demo
前端·javascript·vue.js
知识分享小能手1 小时前
Java学习教程,从入门到精通,Java LinkedList(链表)语法知识点及案例代码(62)
java·大数据·开发语言·学习·链表·intellij-idea·大数据开发
爱吃西瓜的小菜鸡1 小时前
【C语言】贪心吃糖
c语言·开发语言·学习·算法
ybq195133454311 小时前
javaEE--计算机是如何工作的-1
java·前端·java-ee
赵大仁1 小时前
从零开始掌握Vue.js组件开发:详解原理与实践
前端·javascript·vue.js·经验分享·vscode·程序人生·前端框架
White graces1 小时前
掌握HTML, 从零开始的网页设计
开发语言·前端·windows·edge·html·visual studio code
亭墨2 小时前
linux0.11源码分析第二弹——setup.s内容
linux·驱动开发·学习·系统架构