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

2.获取DOM元素

news 文章来源：https://blog.csdn.net/m0_74891783/article/details/131955391 2025/5/14 4:22:50

获取DOM元素就是利用JS选择页面中的标签元素

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

2.1.1选择匹配的第一个元素

语法:

document.querySelector( 'css选择器' )

参数:
包含一个或多个有效的CSS选择器字符串
返回值:
CSS选择器匹配的第一个元素，一个HTMLElement对象。
如果没有匹配到，则返回null。

2.1.2选择匹配的多个元素

语法:

document.querySelectorAll( 'css选择器' )

参数:
包含一个或多个有效的CSS选择器字符串
返回值:
CSS选择器匹配的 NodeList 对象集合

【示例】

<body><div class="box">abc</div><div class="box">123</div><p id="nav">导航栏</p><ul><li>1</li><li>2</li></ul><script>// 1.获取 div 匹配的第一个元素const box = document.querySelector('div')// const box = document.querySelector('.box')console.dir(box)// 2.获取 pconst nav = document.querySelector('p')// const nav = document.querySelector('#nav')console.dir(nav)// 3.获取第一个 liconst li = document.querySelector('ul li:first-child')console.dir(li)// 4.获取所有的 liconst lis = document.querySelectorAll('ul li')console.dir(lis)</script>
</body>

在这里插入图片描述

2.1.3伪数组

querySelectorAll() 得到的是一个伪数组
➢有长度、有索引号的数组
➢但是没有pop() push() 等数组方法
想要得到里面的每一个对象，需要遍历 (for) 的方式获得。
哪怕只有一个元素，通过querySelectAll()获取过来的也是一个伪数组，只是里面只有一个元素而已

遍历打印所有的小li ：
【示例代码】

<body><ul class="nav"><li>我的首页</li><li>产品信息</li><li>联系方式</li></ul><script>// 方法1const lis = document.querySelectorAll('.nav li')for (let i = 0; i < lis.length; i++) {console.dir(lis[i])}// 方法2// for (let i = 1; i <= 3; i++) {//     const li = document.querySelector(`ul li:nth-child(${i})`)//     console.dir(li)// }</script>
</body>

在这里插入图片描述
注意：
（1）获取一个DOM元素用querySelector()，能直接操作修改
（2）获取多个DOM元素用querySelectorAll()，不能直接操作修改，只能通过遍历的方式给里面的元素做修改

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

//根据id获取一个元素
document.getElementById( 'nav' )
//根据 标签 获取一类元素 获取页面所有div
document.getElementsByTagName( 'div' )
//根据 类名 获取元素 获取页面所有类名为w的
document.getElementsByClassName( 'w' )

2.获取DOM元素

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

2.1.1选择匹配的第一个元素

2.1.2选择匹配的多个元素

2.1.3伪数组

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

相关文章：

2.获取DOM元素

flask中redirect、url_for、endpoint介绍

《MySQL》第十二篇数据类型

Python与OpenCV环境中，借助SIFT、单应性、KNN以及Ransac技术进行实现的图像拼接算法详细解析及应用

苍穹外卖Day01项目日志

Netty学习（二）

ReactRouterv5在BrowserRouter和HashRouter模式下对location.state的支持

Aerotech系列文章（3）运动设置命令Motion Setup Commands

线性神经网络——softmax 回归随笔【深度学习】【PyTorch】【d2l】

【Nodejs】Node.js开发环境安装

梅尔频谱（Mel spectrum）简介及Python实现

【数据结构】实验六：队列

【Linux线程】第一章||理解线程概念+创建一个线程（附代码加讲解）

Android进阶之微信扫码登录

macOS Monterey 12.6.8 (21G725) Boot ISO 原版可引导镜像

Unity自定义后处理——用偏导数求图片颜色边缘

本地Git仓库和GitHub仓库SSH传输

【C++11】——右值引用、移动语义

消息服务概述

【Spring Boot】Web开发 — 数据验证

技术分享 | App常见bug解析

树莓派Pico|RP2040|使用SWD进行调试|构建 “Hello World“ debug版本

Ubuntu18.04 下配置Clion

数据库管理-第九十四期 19c OCM之路-第四堂（02）（20230725）

以智慧监测模式守护燃气安全，汉威科技“传感芯”凸显智慧力

【阅读笔记】一种暗通道优先的快速自动白平衡算法

OpenStack之云主机管理

Linux系列---【Ubuntu 20.04安装KVM】

【Vue3】局部组件和全局组件

vscode开发Go和Java