〖大前端 - 基础入门三大核心之JS篇㊳〗- DOM访问元素节点
- 说明：该文属于 大前端全栈架构白宝书专栏，目前阶段免费，如需要项目实战或者是体系化资源，文末名片加V！
- 作者：不渴望力量的哈士奇(哈哥)，十余年工作经验, 从事过全栈研发、产品经理等工作，目前在公司担任研发部门CTO。
- 荣誉：2022年度博客之星Top4、2023年度超级个体得主、谷歌与亚马逊开发者大会特约speaker、全栈领域优质创作者。
- 🏆 白宝书系列
- 🏅 启示录 - 攻城狮的自我修养
- 🏅 Python全栈白宝书
- 🏅 ChatGPT实践指南白宝书
- 🏅 产品思维训练白宝书
- 🏅 全域运营实战白宝书
- 🏅 大前端全栈架构白宝书
文章目录
- ⭐ 访问元素节点
- 🌟 认识document对象
- 🌟 访问元素节点的常用方法
- ✨ getElementById()
- ✨ 延迟运行
- ✨ getElementsByTagName()
- ✨ getElementsByClassName()
- ✨ querySelector()
- ✨ querySelectorAll()
⭐ 访问元素节点
所谓“访问”元素节点，就是指“得到”、“获取”页面上的元素节点
对节点进行操作，第一步就是要得到它
访问元素节点主要依靠
document对象
🌟 认识document对象
document对象是DOM中最重要的东西，
几乎所有DOM的功能都封装在了document对象中document对象也表示
整个HTML文档，它是DOM节点树的根document对象的
nodeType属性值是9
🌟 访问元素节点的常用方法
| 方法 | 功能 | 兼容性 |
|---|---|---|
document.getElementById() | 通过id得到元素 | IE6 |
document.getElementsByTagName() | 通过标签名得到元素数组 | IE6 |
document.getElementsByClassName() | 通过类名得到元素数组 | IE9 |
document.querySelector() | 通过选择器得到元素 | IE8部分兼容，IE9完全兼容 |
document.querySelectorAll() | 通过选择器得到元素数组 | IE8部分兼容，IE9完全兼容 |
✨ getElementById()
getElementById()方法，通过id得到元素节点
示例代码：
<body><div id="box"></div><p id="para"></p><script>//访问/获取元素节点var oBox = document.getElementById('box'); //注意括号里的大小写字母也要匹配var oPara = document.getElementById('para');</script>
</body>
注意事项：
- 如果页面上有相同的元素，则只能得到第一个（所以页面上不要出现相同id的元素）
- 不管元素藏的有多深，都可以找到
✨ 延迟运行
在测试DOM代码时，
通常JS代码一定要写到HTML节点的后面，否则JS无法找到相应HTML节点但是，也可以使用
window.onload = function(){}事件，使页面加载完毕后，再执行指定的代码（原理就是给window窗口对象添加一个onload事件，onload表示加载完，即给窗口添加了一个全都加载完的事件监听，等页面加载完后，再执行function里面的方法）
示例代码：
<body><!--下方的代码中，script标签放在了最上方--><script>//给window对象添加onload事件监听window.onload = function () {//访问/获取元素节点var oBox = document.getElementById('box');var oPara = document.getElementById('para');console.log(oBox);console.log(oPara);}</script><div id="box"></div><p id="para"></p>
</body>
</html>
很多公司会习惯将script标签放到head里面，这样写也需要加上“延时运行”来保证js代码在页面加载完毕后运行。
✨ getElementsByTagName()
getElementsByTagName()方法，通过标签名得到节点数组数组方便遍历，从而可以
批量操控元素节点即使页面上只有一个指定标签名的节点，也将得到
长度为1的数组
任何一个节点元素也可以调用getElementsByTagName()方法，从而得到其内部的某种类的元素节点
示例代码：
<body><div class="box1"><p>我是段落</p><p>我是段落</p><p>我是段落</p><p>我是段落</p></div><div class="box2"><p>我是段落</p><p>我是段落</p><p>我是段落</p><p>我是段落</p></div><script>var oPs = document.getElementsByTagName('p'); //得到页面中的所有p标签console.log(oPs);</script>
</body>
如果想要得到指定盒子内的p标签，可以这样写：
<body><div id="box1"><p>我是段落</p><p>我是段落</p><p>我是段落</p><p>我是段落</p></div><div id="box2"><p>我是段落2</p><p>我是段落2</p><p>我是段落2</p><p>我是段落2</p></div><script>//先得到box2var box2 = document.getElementById('box2');//再得到box2中的p标签var ps_inbox2 = box2.getElementsByTagName('p');console.log(ps_inbox2);</script>
</body>
✨ getElementsByClassName()
getElementsByClassName()方法，通过类名得到节点数组getElementsByClassName()方法从
IE9开始兼容某个节点元素也可以调用
getElementsByClassName()方法，从而得到其内部的某类名的元素节点
✨ querySelector()
querySelector()方法，是通过选择器得到元素，括号中直接写选择器就可以了
querySelector()方法只能得到页面上一个元素，如果有多个元素符合条件，则只能得到第一个元素querySelector()方法从IE8开始兼容，但从IE9开始支持CSS3的选择器，如:nth-child()、:[src^=‘husky’]等css3选择器形式都支持良好
示例代码：
<body><div class="box"><p>我是段落1</p><p>我是段落2</p><p id="para">我是段落3</p><p>我是段落4</p></div><script>//得到class=box中，id=para的p标签var p = document.querySelector('.box #para');console.log(p);</script>
</body>
✨ querySelectorAll()
querySelectorAll()方法，是通过选择器得到元素数组，括号中写选择器即使页面上只有一个符合选择器的节点，也将得到长度为1的数组
示例代码：
<body><div class="box"><p>我是段落1</p><p>我是段落2</p><p id="para">我是段落3</p><p>我是段落4</p></div><script>//得到class=box中的p标签var ps = document.querySelectorAll('.box p');console.log(ps);//得到了数组自然也可以选择其中的某一项了console.log(ps[2])</script>
</body>
querySelector() 和 querySelectorAll() 是在实际工作中非常常用的获得节点的方法。
相关文章：
〖大前端 - 基础入门三大核心之JS篇㊳〗- DOM访问元素节点
说明：该文属于 大前端全栈架构白宝书专栏，目前阶段免费，如需要项目实战或者是体系化资源，文末名片加V！作者：不渴望力量的哈士奇(哈哥)，十余年工作经验, 从事过全栈研发、产品经理等工作…...
GitHub Universe 2023：AI 技术引领软件开发创新浪潮
GitHub 是全球领先的软件开发和协作平台，数百万开发者和企业在此分享、学习和创建卓越的软件。同时 GitHub 处在 AI 技术前沿，通过其先进的 AI 技术增强开发者体验并赋能未来软件开发的使命。在今天的文章中，我们将一起看看在 GitHub 年度大会…...
数据结构：红黑树的插入实现(C++)
个人主页 ： 个人主页 个人专栏 ： 《数据结构》 《C语言》《C》《Linux》 文章目录 一、红黑树二、红黑树的插入三、代码实现总结 一、红黑树 红黑树的概念： 红黑树是一颗二叉搜索树，但在每个节点上增加一个存储位表示节点的颜色&…...
飞天使-django之数据库简介
文章目录 增删改查解决数据库不能存储中文问题创建表数据类型表的基本操作主键唯一键 unique外键实战 增删改查 四个常用的语句查询 : insert delete update select insert into student(Sno,name) values(95001,"张三") delete from student where name张三 upda…...
Flink之KeyedState
前面的文章中介绍过Operator State,这里介绍一下Keyed State. 在使用Operator State时必须要实现CheckpointFunction接口,而Keyed State则不需要,在使用keyBy(...)分组分组后,调用的函数必须是实现RichFuntion接口的函数才可以使用Keyed State.同样使用Keyed State也必须开启Ch…...
c语言：模拟实现qsort函数
qsort函数的功能： qsort相较于冒泡排序法，不仅效率更快，而且能够比较不同类型的元素，如：浮点数，结构体等等。这里我们来模拟下qsort是如何实现这一功能的，方便我们对指针数组有一个更深层次的理…...
从0开始学习数据结构 C语言实现 1.前篇及二分查找算法
一、前篇 1、什么是数据结构？ 数据结构是带有结构特性的数据元素的集合，它研究的是数据的逻辑结构和数据的物理结构以及它们之间的相互关系 2、时间复杂度与空间复杂度 大O符号是用于描述函数渐进行为的数学符号 常用函数的增长表 阶乘O(n!) > 指数…...
VSCode 使用CMakePreset找不到cl.exe编译器的问题
在用vscode开发c项目的时候，使用预先配置的CMakePresets.json可以把一些特定的cmake选项固定下来，在配置时直接使用 "cmake --config --preset presetname"就可以进行配置，免去在命令行输入过多的配置参数。 但是在vscode中&#…...
【Linux系统化学习】进程的状态 | 僵尸进程 | 孤儿进程
个人主页点击直达：小白不是程序媛 Linux专栏：Linux系统化学习 目录 操作系统进程的状态 运行状态 阻塞状态 进程阻塞的现象 挂起阻塞状态 Linux进程状态 Linux内核源代码怎么说 R（running状态）运行状态 S（sl…...
深信服AC流量管理技术
拓扑图 一.保证通道针对修仙部，访问网站，邮件，DNS，IM，办工 OA，微博论坛网上银行等常见应用保证带宽最低 50%，最高 100% 1. 先新建线路带宽 2.新增流量管理通道（保证关键应用&#x…...
二元关系及关系代数中的象集、除运算
二元关系及关系代数中的象集、除运算 数学上，二元关系用于讨论两个数学对象的联系。诸如算术中的「大于」及「等于」，几何学中的"相似"，或集合论中的"为...之元素"或"为...之子集"。二元关系有时会简称关系&a…...
[PHP]关联和操作MySQL数据库然后将数据库部署到ECS
在Mac电脑上使用VS Code进行PHP开发并关联操作MySQL数据库，然后将数据库部署到ECS。 1.安装PHP和MySQL 确保你的Mac上已经安装了PHP和MySQL。你可以使用Homebrew来安装它们： $ brew install php $ brew install mysql 安装mysql完成后记住这一句: …...
23.11.19日总结
经过昨天的中期答辩，其实可以看出来项目进度太慢了，现在是第十周，预计第十四周是终级答辩，在这段时间要把项目写完。 前端要加上一个未登录的拦截器，后端加上全局的异常处理。对于饿了么项目的商品建表，之前…...
系列一、JVM概述
一、概述 1.1、Java发展中的重大事件 1.2、虚拟机 vs Java虚拟机 1.2.1、虚拟机 1.2.2、Java虚拟机 1.2.3、Java虚拟机的作用 Java虚拟机是二进制字节码的运行环境，负责装载字节码到其内部，解释/编译为对应平台上的机器指令指令。每一条Java指令&#…...
milvus数据管理-压缩数据
Milvus 默认支持自动数据压缩。您可以 配置 Milvus 以启用或禁用 压缩 和自动压缩。 如果自动压缩被禁用，您仍然可以手动压缩数据。 1.手动压缩数据 压缩请求是异步处理的，因为它们通常需要花费很长时间。 from pymilvus import Collection collection…...
SpringBoot项目连接linux服务器数据库两种解决方法（linux直接开放端口访问本机通过SSH协议访问，以mysql为例）
最近找个springboot脚手架重新熟悉一下springboot相关框架的东西，结果发现好像项目还不能直接像数据库GUI工具一样填几个SSH参数就可以了，于是就给他再整一下看看如何解决 linux开放3306（可修改）端口直接访问 此方法较为方便&am…...
【Rust】快速教程——闭包与生命周期
前言 你怎么向天生的瞎子说清颜色？怎么用手势向天生的聋子描述声音？ 鲜花就在眼前，雷鸣就在头顶，对他们来说却都毫无意义 眼睛看不到，鼻子可以嗅闻花香，耳朵听不见，手指可以触碰窗纸的震动。 犯…...
redis高级案列case
案列一 双写一致性 案例二 双锁策略 package com.redis.redis01.service;import com.redis.redis01.bean.RedisBs; import com.redis.redis01.mapper.RedisBsMapper; import lombok.extern.slf4j.Slf4j; import org.springframework.beans.factory.annotation.Autowired; imp…...
Vue3+Vite实现工程化，attribute属性渲染v-bind指令
想要渲染一个元素的attribute，应该使用v-bind指令 由于插值表达式不能直接放在标签的属性中，所有要渲染元素的属性就应该使用v-bindv-bind可以用于渲染任何元素的属性，语法为 v-bind:属性名数据名，可以简写为 :属性名数据名 <…...
下一代搜索引擎会什么？
现在是北京时间2023年11月18日。聊一聊搜索。 说到搜索，大家首先想到的肯定是谷歌，百度。我把这些定义成上一个时代的搜索引擎。ChatGPT已经火热了有一年的时间了，大家都认为Ai搜索是下一代的搜索。但是AI搜索，需要的是很大算力&a…...
label-studio的使用教程(导入本地路径)
文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...
多模态商品数据接口：融合图像、语音与文字的下一代商品详情体验
一、多模态商品数据接口的技术架构 （一）多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如，当用户上传一张“蓝色连衣裙”的图片时，接口可自动提取图像中的颜色（RGB值&…...
在四层代理中还原真实客户端ngx_stream_realip_module
一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡（如 HAProxy、AWS NLB、阿里 SLB）发起上游连接时，将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后，ngx_stream_realip_module 从中提取原始信息…...
在Ubuntu中设置开机自动运行（sudo）指令的指南
在Ubuntu系统中，有时需要在系统启动时自动执行某些命令，特别是需要 sudo权限的指令。为了实现这一功能，可以使用多种方法，包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法，并提供…...
三体问题详解
从物理学角度，三体问题之所以不稳定，是因为三个天体在万有引力作用下相互作用，形成一个非线性耦合系统。我们可以从牛顿经典力学出发，列出具体的运动方程，并说明为何这个系统本质上是混沌的，无法得到一般解…...
实现弹窗随键盘上移居中
实现弹窗随键盘上移的核心思路 在Android中，可以通过监听键盘的显示和隐藏事件，动态调整弹窗的位置。关键点在于获取键盘高度，并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...
大数据学习（132）-HIve数据分析
🍋🍋大数据学习🍋🍋 🔥系列专栏： 👑哲学语录: 用力所能及，改变世界。 💖如果觉得博主的文章还不错的话，请点赞👍收藏⭐️留言Ǵ…...
Spring是如何解决Bean的循环依赖：三级缓存机制
1、什么是 Bean 的循环依赖 在 Spring框架中，Bean 的循环依赖是指多个 Bean 之间互相持有对方引用，形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路，例如： 双向依赖：Bean A 依赖 Bean B，同时 Bean B 也依赖 Bean A（A↔B）。链条循环： Bean A → Bean…...
push [特殊字符] present
push 🆚 present 前言present和dismiss特点代码演示 push和pop特点代码演示 前言 在 iOS 开发中，push 和 present 是两种不同的视图控制器切换方式，它们有着显著的区别。 present和dismiss 特点 在当前控制器上方新建视图层级需要手动调用…...
【JVM】Java虚拟机（二）——垃圾回收
目录 一、如何判断对象可以回收 （一）引用计数法 （二）可达性分析算法 二、垃圾回收算法 （一）标记清除 （二）标记整理 （三）复制 （四ÿ…...