程序员经验分享-hwhale

什么是DOM对象？如何获取DOM对象？

2023-05-16

今天的web前端培训环节，我们讲解一下DOM对象。DOM对象本质上是浏览器根据html标签生成的 JS对象，它的所有的标签属性都可以在这个 JS对象上面找到，修改这个对象的属性会自动映射到标签身上。DOM的核心思想是把网页内容当做对象来处理。其中document 对象是DOM 里提供的一个对象，所以它提供的属性和方法都是用来访问和操作网页内容的，网页中所有的内容在document里面。document与其他网页中各个节点元素关系如下：

将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树。文档树模型直观的体现了标签与标签之间的关系。
 

获取DOM对象

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

（1）匹配单个元素一个元素

这里选择的语法如下：

document.querySelector('css选择器')

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

（2）选择匹配的多个元素

语法如下：

document.querySelectorAll('ul li')

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

document.querySelectorAll('ul li')
document.querySelectorAl1（'css选择器')

得到的是一个伪数组： 有长度有索引号的数组,但是没有 pop() push() 等数组方法,想要得到里面的每一个对象，则需要遍历（for）的方式获得。

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

 

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

什么是DOM对象？如何获取DOM对象？ 的相关文章

  • 顺序表查找与散列表（哈希表）

    文章目录 一 数据结构二 平均查找长度 xff08 ASL xff09 三 顺序表查找1 顺序查找2 折半查找3 分块查找4 顺序表查找的对比 四 散列表1 散列表构造2 开放地址散列表构造3 散列表查找效率分析 一 数据结构 二 平均查找

  • You‘ll have to kill the Xtightvnc process manually

    You 39 ll have to kill the Xtightvnc process manually 然后 pkill u user

  • ubuntu Linux多个内核选择

    一 问题 ununtu经常自动升级 xff0c 或者是我们在update时 xff0c 系统自动升级内核 此时会导致较高版本的内核与系统相互矛盾 xff0c 而导致卡机等问题 此时需要对多余内核进行设置为默认内核或者将不正确内核删除 两种方

  • 东北天（ENU）和北东地（NED）

    文章目录 一 坐标系定义1 东北天坐标系 xff08 ENU xff09 2 北东地坐标系 xff08 NED xff09 二 在ENU坐标系向量变换到NED坐标系向量三 将载体相对ENU的姿态和位置 xff0c 变换为载体相对NED的姿态

  • opencv for arm

    大家好 xff0c 这篇文章介绍了在arm开发板上移植opencv的过程 虚拟机 xff1a Ubuntu16 04 64位 单板 xff1a jz2440 编译器 xff1a arm linux gcc 4 4 3 opencvbanbo

  • 多传感器数据融合算法综述

    多传感器数据融合是一个新兴的研究领域 xff0c 是针对一个系统使用多种传感器这一特定问题而展开的一种关于数据处理的研究 多传感器数据融合技术是近几年来发展起来的一门实践性较强的应用技术 xff0c 是多学科交叉的新技术 xff0c 涉及到

  • ROS之tf坐标变换

    1 什么是tf 变换 ROS 中的很多软件包都需要机器人发布tf 变换树 xff0c 那么什么是tf 变换树呢 xff1f 抽象的来讲 xff0c 一棵tf 变换树定义了不同坐标系之间的平移与旋转变换关系 具体来说 xff0c 我们假设有一

  • Android下载repo文件报错

    在执行 curl https dl ssl google com dl googlesource git repo repo gt bin repo 下代码的时候 xff0c 报以下错误 curl 7 couldn 39 t connect

  • 树莓派设置自动连接无线网络

    树莓派开机后自动连接无线网络方法 xff0c 亲测有效 1 在任意方法 xff08 无线或有线 xff09 已经连接树莓派的基础上 xff0c 执行该命令 xff0c 意思是编辑wpa supplicant conf这个文件 内容如下 xf

  • Spring boot Druid 多数据源JDBC和注解事务

    1 引入依赖 gradle文件配置 用maven引入也可以 runtimeOnly span class token string 39 com microsoft sqlserver mssql jdbc 39 span span cla

  • 优化查询性能

    目录 1 创建支持查询的索引2 限制查询结果的数量来减少网络需求3 使用投影来只返回需要的数据4 使用 hint来选择一个特点的索引5 使用增量运算符来执行服务端操作 进入MongoDB中文手册 xff08 4 2版本 xff09 目录 1

  • 'node' 不是内部或外部命令，也不是可运行的程序 或批处理文件。 解决方法

    windows系统里 需要把nodejs安装目录路径设置进系统变量或用户变量 1 打开控制面板 gt 系统和安全 gt 系统 gt 高级系统设置 gt 环境变量 2 在 用户变量 或 系统变量 中查找变量PATH并将node js文件夹路径

  • .NET Action 与 Func

    Action 与 Func是 NET类库中增加的内置委托 xff0c 以便更加简洁方便的使用委托 内置委托类型 xff0c 顾名思义Action和Func本身就是已经定义好的委托类型 两种委托类型的区别在于 xff1a Action委托签名

  • 卸掉notepad++，永远不再使用！！！

    昨天看到消息称notepad 43 43 这款软件的官网发布了反华言论 xff0c 自己刚刚去他的官网看了下 xff0c 还真是 https notepad plus plus org news v781 free uyghur editi

  • IMX6ULL第一个裸机程序，点亮LED

    一 环境 1 100ask imx6ull开发板 2 mint19开发环境 二 硬件原理图 LED的管脚为GPIO5 IO03 当GPIO5 IO03为高电平时 xff0c LED熄灭 xff1b 当GPIO5 IO03为低电平时 xff0

  • WSL使用NFS

    微软的WLS下挂NFS系统是失败的 xff0c 因为内核不支持 xff0c 此路是不通的 xff0c 至少目前我是没有找到解决办法 xff0c 可以使用hane winNFS替代

  • AD导出PDF内容显示不全解决办法

    DXP gt Preferneces gt Schematic gt General下 取消Render Text with GDI 43

  • uboot编译报错 dtc: command not found解决办法

    编译uboot 报错 解决办法 span class token function sudo span span class token function apt get span span class token function ins

  • 解决imx6ull开发板加载驱动disagrees about version of symbol module_layout失败问题

    一 环境 1 硬件 100ask imx6ull单板 2 软件环境 xff0c 提供的开发环境 二 报错信息 hello drv disagrees about version of symbol module layout insmod

  • 应用软件安装

    在进行开发中 xff0c 会使用到很多各种类型的软件 xff0c 现在将其进行整理 xff0c 列表如下 xff0c 如有需要 xff0c 请给我留言 xff0c 我可以给分享给大家 001 application software 序号

随机推荐

  • 安装树莓派的系统到SD卡

    安装树莓派的系统到 SD卡 准备工作 1 一张 16G 以上的 SD 卡 xff0c 最好是高速卡 xff0c 推荐 Class4 以上的卡 xff0c 因为卡得速度直接影响树莓派的运行速度 2 格式化SD卡工具 xff0c 建议使用工具

  • 串口测试例程

    串口分为RS232和TTL xff0c 所以在测试前请先确认自己的串口类型进行测试 下面以海思的一个RS232串口为例说明一下具体的测试过程 xff0c 串口测试代码参考的为讯为提供的 xff0c 在其基础上做的调整 1 确定接口 xff0

  • C语言中的字符串初始化

    1 C语言没有字符串类型 xff0c 通过字符数组模拟 xff0c C语言字符串 xff0c 以字符 0 数字0 2 数组指定长度后 xff0c 后面没有赋值的元素 xff0c 自动补0 char buf 100 61 39 a 39 39

  • 自动收取蚂蚁森林能量雨

    首先 xff0c 说明一下 这是一个非常迂回且效果不佳的方法 xff0c 小弟不才 xff0c 安卓以及苹果手机上的脚本没啥研究 xff0c PC的按键精灵略懂 xff0c 因此才有一下脚本 觉得有用拿去参考 xff0c 大佬勿喷 我一直都

  • AD中画圆弧形板框的方法

    在实际的板框设计中 xff0c 有时为了生产需要 xff0c 不得不需要将PCB板设计成四角需要倒角的形式 xff0c 经过实际的摸索 xff0c 现在得出一种画圆形板框的小技巧 现在需要将板框设计成3 5mm半径样式 xff08 1 xf

  • AD中板内挖空的方法

    一 先使用禁止布线层将板框确定 使用的快捷键 xff1a D gt S gt D 二 再绘制一个挖空区域 使用的快捷键 xff1a T gt V gt B 三 挖空后的效果

  • STL初识

    STL的诞生 长久以来 xff0c 软件界一直希望建立一种可重复利用的东西 C 43 43 的面向对象和泛型编程思想 xff0c 目的就是复用性的提升 大多情况下 xff0c 数据结构和算法都未能有一套标准 导致被迫从事大量重复工作 为了建

  • 删除U盘中的System Volume Information 文件夹的方法

    在使用U盘测试ARM板的时候 xff0c 会发现System Volume Information这个文件夹阴魂不散 xff0c 总是存在 xff0c 在Windows下是看不见的 xff0c 即便将文件的查看属性设置为显示隐藏文件 在使用

  • Linux命令发送Http的get或post请求

    get请求 curl命令模拟get请求 xff1a 1 使用curl命令 xff1a curl span class hljs string 34 http www baidu com 34 span 如果这里的URL指向的是一个文件或者一

  • 深度学习之----多任务学习

    介绍 在机器学习 xff08 ML xff09 中 xff0c 通常的关注点是对特定度量进行优化 xff0c 度量有很多种 xff0c 例如特定基准或商业 KPI 的分数 为了做到这一点 xff0c 我们通常训练一个模型或模型组合来执行目标

  • PID控制原理(全干货)

    主要内容 xff1a 1 常用的控制算法与PID控制算法的异同点 xff1b 2 PID控制算法的理论分析 3 基于单片机的PID算法实现 4 PID算法的工程应用的一些注意事项 5 演示板电路分析 6 PID算法C语言实现 基于ARM C

  • ESP32 手册+文档整理

    ESP32 一些手册和批注 Arduino IDE 这个板子是带了LoRa的版本 xff0c 国外还有一个TTGo 有类似的ESP32 43 LoRa这种组合 如果不需要LoRa xff0c 可以考虑ESP32 DevKit 或者PicoK

  • 【TVM帮助文档学习】TVM语言参考

    本文翻译自Language Reference tvm 0 9 dev0 documentation 本文档提供TVM的嵌入式语言和IRs的参考 Relay介绍 Relay 是一种函数式的 可微的编程语言 它是一种面对机器学习领域的具有良好

  • 【TVM帮助文档学习】通过示例分析TVM代码流程

    本文翻译自TVM Codebase Walkthrough by Example tvm 0 9 dev0 documentation 了解TVM代码颇具挑战性 xff0c 它的各组件之间的交互非常隐晦 在本指南中 xff0c 我们将通过一

  • Linux设置nacos自启动（centos7）

    1 编写服务脚本 vim lib systemd system nacos service 将下列内容添加进入 span class token punctuation span Unit span class token punctuat

  • 图像处理——Haar特征

    Haar特征最初是用来进行人脸特征的表示的 xff0c 最近重新看了SURF算法 xff0c 发现在生成特征点描述子的时候也有用到Haar特征 查看了一些博文 xff0c 自己整理一些 xff0c 方便以后复习 Haar特征分为三类 xff

  • TVM运行时系统

    本文翻译自TVM Runtime System tvm 0 9 dev0 documentation TVM的编译器栈开发和部署支持多种编程语言 在本文中 xff0c 我们将解释TVM运行时的关键元素 我们需要满足一些有趣的需求 部署 从p

  • 彻底解决anaconda虚拟环境中pip是全局pip 下载包自动到base环境而非虚拟环境的问题 No module named _abc报错解决

    删除系统变量中的 PYTHONHOME C ProgramData Anaconda3 同时需要将虚拟环境的Lib site package的路径添加至系统变量Path中 xff0c 否则还是会报没有 abc模块的错误

  • C++基础语法

    C语言作为程序化的开发语言 xff0c 适合处理较小规模的程序 xff0c 相对于大规模程序 xff0c C语言并不合适 xff0c 所以提出了C 43 43 语言 C 43 43 对C语言的加强主要表现在 1 命名空间 2 函数重载与运算

  • 什么是DOM对象？如何获取DOM对象？

    今天的web前端培训环节 xff0c 我们讲解一下DOM对象 DOM对象本质上是浏览器根据html标签生成的 JS对象 xff0c 它的所有的标签属性都可以在这个 JS对象上面找到 xff0c 修改这个对象的属性会自动映射到标签身上 DOM

热门标签