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

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

news 文章来源：https://blog.csdn.net/weixin_42250835/article/details/134497408 2025/5/3 22:17:11
  • 说明：该文属于 大前端全栈架构白宝书专栏，目前阶段免费，如需要项目实战或者是体系化资源，文末名片加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

WPF中如何在MVVM模式下关闭窗口

完全来源于十月的寒流&#xff0c;感谢大佬讲解 使用Behaviors <Window x:Class"Test_03.MainWindow"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:b"http://schemas.microsoft.com/xaml/behaviors"xmlns:x&quo…...

编程日记 2023/11/20 2:14:49

【数据结构＆C++】二叉平衡搜索树-AVL树（25）

前言 大家好吖&#xff0c;欢迎来到 YY 滴C系列 &#xff0c;热烈欢迎&#xff01; 本章主要内容面向接触过C的老铁 主要内容含&#xff1a; 欢迎订阅 YY滴C专栏&#xff01;更多干货持续更新&#xff01;以下是传送门&#xff01; 目录 一.AVL树的概念二.AVL树节点的定义(代码…...

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

Python算法——树的最大深度和最小深度

Python中的树的最大深度和最小深度算法详解 树的最大深度和最小深度是树结构中的两个关键指标&#xff0c;它们分别表示树的从根节点到最深叶子节点的最大路径长度和最小路径长度。在本文中&#xff0c;我们将深入讨论如何计算树的最大深度和最小深度&#xff0c;并提供Python…...

编程日记 2023/11/20 2:11:45

46.全排列-py

46.全排列 class Solution(object):def permute(self, nums):""":type nums: List[int]:rtype: List[List[int]]"""# 结果数组0ans[]nlen(nums)# 判断是否使用state_[False]*n# 临时状态数组dp_[]def dfs (index):# 终止条件if indexn:ans.appe…...

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

系列三、GC垃圾回收算法和垃圾收集器的关系？分别是什么请你谈谈

一、关系 GC算法&#xff08;引用计数法、复制算法、标记清除算法、标记整理算法&#xff09;是方法论&#xff0c;垃圾收集器是算法的落地实现。 二、4种主要垃圾收集器 4.1、串行垃圾收集器&#xff08;Serial&#xff09; 它为单线程环境设计&#xff0c;并且只使用一个线程…...

编程日记 2023/11/20 2:09:43

WPF中的虚拟化是什么

WPF&#xff08;Windows Presentation Foundation&#xff09;中的虚拟化是一种性能优化技术&#xff0c;它主要用于提高大量数据展示的效率。在WPF中&#xff0c;如果你有一个包含大量项的ItemsControl&#xff08;例如ListBox、ListView或DataGrid等&#xff09;&#xff0c;…...

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

免费稳定几乎无门槛，我的ChartGPT助手免费分享给你

公众号「架构成长指南」&#xff0c;专注于生产实践、云原生、分布式系统、大数据技术分享。 概述 ChatGPT想必大家应该都不陌生了&#xff0c;大部分人或多或少都接触了&#xff0c;好多应该都是通过openAi的官方进行使用的&#xff0c;这个门槛对大部分人有点高&#xff0c;…...

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

奇瑞金融：汽车金融行业架构设计

拆借联合贷款abs...

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

milvus数据库分区管理

一、创建分区 在创建集合时&#xff0c;会默认创建分区_default。 自己手动创建如下&#xff1a; from pymilvus import Collection collection Collection("book") # Get an existing collection. collection.create_partition("novel")二、检测分…...

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

pytorch.nn.Conv1d详解

通读了从论文中找的代码&#xff0c;终于找到这个痛点了&#xff01; 以下详解nn.Conv1d方法 1 参数说明 in_channels(int) – 输入信号的通道。 out_channels(int) – 卷积产生的通道。 kernel_size(int or tuple) - 卷积核的尺寸&#xff0c;经测试后卷积核的大小应为in_cha…...

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