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

〖大前端 - 基础入门三大核心之JS篇㊳〗- DOM访问元素节点

news 2026/2/8 21:48:02
  • 说明：该文属于 大前端全栈架构白宝书专栏，目前阶段免费，如需要项目实战或者是体系化资源，文末名片加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

image-20230403160713431

image-20230403160810420

🌟 访问元素节点的常用方法

方法功能兼容性
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>

image-20230403192109560

很多公司会习惯将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>

image-20230405215132114

如果想要得到指定盒子内的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>

image-20230405215511053

✨ 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>

image-20230405221157827

✨ 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>

image-20230405222415558

querySelector() 和 querySelectorAll() 是在实际工作中非常常用的获得节点的方法。

相关文章：

〖大前端 - 基础入门三大核心之JS篇㊳〗- DOM访问元素节点

说明&#xff1a;该文属于 大前端全栈架构白宝书专栏&#xff0c;目前阶段免费&#xff0c;如需要项目实战或者是体系化资源&#xff0c;文末名片加V&#xff01;作者&#xff1a;不渴望力量的哈士奇(哈哥)&#xff0c;十余年工作经验, 从事过全栈研发、产品经理等工作&#xf…...

编程日记 2023/11/20 2:39:17

GitHub Universe 2023：AI 技术引领软件开发创新浪潮

GitHub 是全球领先的软件开发和协作平台&#xff0c;数百万开发者和企业在此分享、学习和创建卓越的软件。同时 GitHub 处在 AI 技术前沿&#xff0c;通过其先进的 AI 技术增强开发者体验并赋能未来软件开发的使命。在今天的文章中&#xff0c;我们将一起看看在 GitHub 年度大会…...

编程日记 2023/11/20 2:38:15

数据结构：红黑树的插入实现(C++)

个人主页 &#xff1a; 个人主页 个人专栏 &#xff1a; 《数据结构》 《C语言》《C》《Linux》 文章目录 一、红黑树二、红黑树的插入三、代码实现总结 一、红黑树 红黑树的概念&#xff1a; 红黑树是一颗二叉搜索树&#xff0c;但在每个节点上增加一个存储位表示节点的颜色&…...

编程日记 2023/11/20 2:37:15

飞天使-django之数据库简介

文章目录 增删改查解决数据库不能存储中文问题创建表数据类型表的基本操作主键唯一键 unique外键实战 增删改查 四个常用的语句查询 : insert delete update select insert into student(Sno,name) values(95001,"张三") delete from student where name张三 upda…...

编程日记 2023/11/20 2:36:13

Flink之KeyedState

前面的文章中介绍过Operator State,这里介绍一下Keyed State. 在使用Operator State时必须要实现CheckpointFunction接口,而Keyed State则不需要,在使用keyBy(...)分组分组后,调用的函数必须是实现RichFuntion接口的函数才可以使用Keyed State.同样使用Keyed State也必须开启Ch…...

编程日记 2023/11/20 2:35:12

c语言：模拟实现qsort函数

qsort函数的功能&#xff1a; qsort相较于冒泡排序法&#xff0c;不仅效率更快&#xff0c;而且能够比较不同类型的元素&#xff0c;如&#xff1a;浮点数&#xff0c;结构体等等。这里我们来模拟下qsort是如何实现这一功能的&#xff0c;方便我们对指针数组有一个更深层次的理…...

编程日记 2023/11/20 2:34:10

从0开始学习数据结构 C语言实现 1.前篇及二分查找算法

一、前篇 1、什么是数据结构&#xff1f; 数据结构是带有结构特性的数据元素的集合&#xff0c;它研究的是数据的逻辑结构和数据的物理结构以及它们之间的相互关系 2、时间复杂度与空间复杂度 大O符号是用于描述函数渐进行为的数学符号 常用函数的增长表 阶乘O(n!) > 指数…...

编程日记 2023/11/20 2:33:08

VSCode 使用CMakePreset找不到cl.exe编译器的问题

在用vscode开发c项目的时候&#xff0c;使用预先配置的CMakePresets.json可以把一些特定的cmake选项固定下来&#xff0c;在配置时直接使用 "cmake --config --preset presetname"就可以进行配置&#xff0c;免去在命令行输入过多的配置参数。 但是在vscode中&#…...

编程日记 2023/11/20 2:32:07

【Linux系统化学习】进程的状态 | 僵尸进程 | 孤儿进程

个人主页点击直达&#xff1a;小白不是程序媛 Linux专栏&#xff1a;Linux系统化学习 目录 操作系统进程的状态 运行状态 阻塞状态 进程阻塞的现象 挂起阻塞状态 Linux进程状态 Linux内核源代码怎么说 R&#xff08;running状态&#xff09;运行状态 S&#xff08;sl…...

编程日记 2023/11/20 2:31:07

深信服AC流量管理技术

拓扑图 一.保证通道针对修仙部&#xff0c;访问网站&#xff0c;邮件&#xff0c;DNS&#xff0c;IM&#xff0c;办工 OA&#xff0c;微博论坛网上银行等常见应用保证带宽最低 50%&#xff0c;最高 100% 1. 先新建线路带宽 2.新增流量管理通道&#xff08;保证关键应用&#x…...

编程日记 2023/11/20 2:30:06

二元关系及关系代数中的象集、除运算

二元关系及关系代数中的象集、除运算 数学上&#xff0c;二元关系用于讨论两个数学对象的联系。诸如算术中的「大于」及「等于」&#xff0c;几何学中的"相似"&#xff0c;或集合论中的"为...之元素"或"为...之子集"。二元关系有时会简称关系&a…...

编程日记 2023/11/20 2:29:05

[PHP]关联和操作MySQL数据库然后将数据库部署到ECS

在Mac电脑上使用VS Code进行PHP开发并关联操作MySQL数据库&#xff0c;然后将数据库部署到ECS。 1.安装PHP和MySQL 确保你的Mac上已经安装了PHP和MySQL。你可以使用Homebrew来安装它们&#xff1a; $ brew install php $ brew install mysql 安装mysql完成后记住这一句: …...

编程日记 2023/11/20 2:28:04

23.11.19日总结

经过昨天的中期答辩&#xff0c;其实可以看出来项目进度太慢了&#xff0c;现在是第十周&#xff0c;预计第十四周是终级答辩&#xff0c;在这段时间要把项目写完。 前端要加上一个未登录的拦截器&#xff0c;后端加上全局的异常处理。对于饿了么项目的商品建表&#xff0c;之前…...

编程日记 2023/11/20 2:27:02

系列一、JVM概述

一、概述 1.1、Java发展中的重大事件 1.2、虚拟机 vs Java虚拟机 1.2.1、虚拟机 1.2.2、Java虚拟机 1.2.3、Java虚拟机的作用 Java虚拟机是二进制字节码的运行环境&#xff0c;负责装载字节码到其内部&#xff0c;解释/编译为对应平台上的机器指令指令。每一条Java指令&#…...

编程日记 2023/11/20 2:24:59

milvus数据管理-压缩数据

Milvus 默认支持自动数据压缩。您可以 配置 Milvus 以启用或禁用 压缩 和自动压缩。 如果自动压缩被禁用&#xff0c;您仍然可以手动压缩数据。 1.手动压缩数据 压缩请求是异步处理的&#xff0c;因为它们通常需要花费很长时间。 from pymilvus import Collection collection…...

编程日记 2023/11/20 2:23:59

SpringBoot项目连接linux服务器数据库两种解决方法（linux直接开放端口访问本机通过SSH协议访问，以mysql为例）

最近找个springboot脚手架重新熟悉一下springboot相关框架的东西&#xff0c;结果发现好像项目还不能直接像数据库GUI工具一样填几个SSH参数就可以了&#xff0c;于是就给他再整一下看看如何解决 linux开放3306&#xff08;可修改&#xff09;端口直接访问 此方法较为方便&am…...

编程日记 2023/11/20 2:22:58

【Rust】快速教程——闭包与生命周期

前言 你怎么向天生的瞎子说清颜色&#xff1f;怎么用手势向天生的聋子描述声音&#xff1f; 鲜花就在眼前&#xff0c;雷鸣就在头顶&#xff0c;对他们来说却都毫无意义 眼睛看不到&#xff0c;鼻子可以嗅闻花香&#xff0c;耳朵听不见&#xff0c;手指可以触碰窗纸的震动。 犯…...

编程日记 2023/11/20 2:21:57

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…...

编程日记 2023/11/20 2:19:55

Vue3+Vite实现工程化，attribute属性渲染v-bind指令

想要渲染一个元素的attribute&#xff0c;应该使用v-bind指令 由于插值表达式不能直接放在标签的属性中&#xff0c;所有要渲染元素的属性就应该使用v-bindv-bind可以用于渲染任何元素的属性&#xff0c;语法为 v-bind:属性名数据名&#xff0c;可以简写为 :属性名数据名 <…...

编程日记 2023/11/20 2:17:53

下一代搜索引擎会什么？

现在是北京时间2023年11月18日。聊一聊搜索。 说到搜索&#xff0c;大家首先想到的肯定是谷歌&#xff0c;百度。我把这些定义成上一个时代的搜索引擎。ChatGPT已经火热了有一年的时间了&#xff0c;大家都认为Ai搜索是下一代的搜索。但是AI搜索&#xff0c;需要的是很大算力&a…...

编程日记 2023/11/20 2:15:50

模型参数、模型存储精度、参数与显存

模型参数量衡量单位 M&#xff1a;百万&#xff08;Million&#xff09; B&#xff1a;十亿&#xff08;Billion&#xff09; 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的&#xff0c;但是一个参数所表示多少字节不一定&#xff0c;需要看这个参数以什么…...

编程新知 2025/12/20 12:32:08

抖音增长新引擎：品融电商，一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

编程新知 2026/2/1 5:45:17

Frozen-Flask ：将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

编程新知 2025/12/5 20:57:13

Neo4j 集群管理：原理、技术与最佳实践深度解析

Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档，本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石，用于构建高可用、可扩展且一致的图数据库服务…...

编程新知 2025/12/27 16:43:24

sqlserver 根据指定字符 解析拼接字符串

DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

编程新知 2025/10/29 4:33:03

css的定位（position）详解：相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

编程新知 2026/2/6 6:35:29

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术，以解决单机资源不足的问题。分布式训练主要分为两种模式： 数据并行：将数据分片到不同设备，每个设备拥有完整的模型副本 模型并行：将模型分割到不同设备，每个设备处理部分模型计算 现代大模型训练通常结合…...

编程新知 2025/12/10 20:45:02

【论文阅读28】-CNN-BiLSTM-Attention-（2024）

本文把滑坡位移序列拆开、筛优质因子&#xff0c;再用 CNN-BiLSTM-Attention 来动态预测每个子序列&#xff0c;最后重构出总位移&#xff0c;预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵&#xff08;S…...

编程新知 2026/2/2 3:06:53

Linux 中如何提取压缩文件 ？

Linux 是一种流行的开源操作系统&#xff0c;它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间&#xff0c;使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的&#xff0c;要在 …...

编程新知 2026/2/1 5:38:25

（一）单例模式

一、前言 单例模式属于六大创建型模式，即在软件设计过程中，主要关注创建对象的结果，并不关心创建对象的过程及细节。创建型设计模式将类对象的实例化过程进行抽象化接口设计，从而隐藏了类对象的实例是如何被创建的，封装了软件系统使用的具体对象类型。 六大创建型模式包括…...

编程新知 2026/1/30 6:03:31