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

js可不使用document直接根据id获取id元素

news 2025/5/30 13:05:22

今天在用原生js写demo的时候发现一个有意思的小现象，那就是可以直接根据元素的id去获取对应的元素。

起先是我定义了四个btn，每个btn都是根据getElementById来获取元素，然后给元素绑定事件，在调试的时候都挺好，到了后面我打算优化流程去掉一个btn的时候我才发现第四个btn一直没有定义

  <div><button id="btn1">test1</button><button id="btn2">test2</button><button id="btn3">test3</button><button id="btn4">test4</button></div><script>const btn1 = document.getElementById('btn1');const btn2 = document.getElementById('btn2');const btn3 = document.getElementById('btn3');// 绑定事件const bindEvent = () => {console.log(btn5);btn1.addEventListener('click', a, false);btn2.addEventListener('click', b, false);btn3.addEventListener('click', c, false);btn4.addEventListener('click', d, false);};(() => {bindEvent();})();</script>

简化的代码如上所示，起先我以为是代码又缓存，因为我用了express，但是我重启清除缓存以后，btn4依然可以使用，于是我就写了个简单的demo，不用express访问来测试一下。

此时我猜测可能是浏览器的优化，因为id是唯一的，所以可能浏览器读取到这个id元素的时候就自动定义了一个id同名变量。所以我猜测类名应该是不可以的，而如果在js中定义了同名的变量或常量，之前浏览器默认定义的id同名变量则会被覆盖。

<body><div id="app"></div><div id="test"></div><div class="aaa"></div>
</body>
<script>const test = 123;console.log(app); // <div id="app"></div>console.log(test); // 123console.log(aaa); // Uncaught ReferenceError: aaa is not defined
</script>

验证的结果和我的猜想一样。我倒是觉得思路挺不错的，根据浏览器读取html的顺序可以保证js的优先级一定是高于这个默认值的，所以也不会影响代码逻辑，但是如果不清楚的话确实会让人有点摸不着头脑。

🚩查了一下后发现这个特性是很早就有的特性了，大概七八年前就有人发现这个问题了，算是一个历史遗留的特性。不过这种方式也是非标准的所以大家还是尽量别用吧。

相关文章：

js可不使用document直接根据id获取id元素

今天在用原生js写demo的时候发现一个有意思的小现象&#xff0c;那就是可以直接根据元素的id去获取对应的元素。 起先是我定义了四个btn&#xff0c;每个btn都是根据getElementById来获取元素&#xff0c;然后给元素绑定事件&#xff0c;在调试的时候都挺好&#xff0c;到了后…...

编程日记 2025/1/8 9:35:00

【竞技宝】CS2:HLTV2024职业选手排名TOP8-broky

北京时间2025年1月7日,HLTV年度选手排名正在持续公布中,今日凌晨正式公布了今年的TOP8为FAZE战队的broky。 选手简介 broky是一位来自拉脱维亚的职业CS选手,现年23岁。2018年7月,broky获得了FPL资格,连续几季在榜上前5。他的首次赛场留名是跟随拉脱维亚本土战队Wolsung出征BES…...

编程日记 2025/1/8 9:31:54

Apache Paimon-实时数据湖

一、Apache Paimon是什么? Flink社区希望能够将 Flink 的 Streaming 实时计算能力和 Lakehouse 新架构优势进一步结合&#xff0c;推出新一代的 Streaming Lakehouse 技术&#xff0c;促进数据在数据湖上真正实时流动起来&#xff0c;并为用户提供实时离线一体化的开发体验。 …...

编程日记 2025/1/8 9:26:48

hpm使用笔记————使用usb作为从机接收来自上位机的数据然后通过spi主机发送给spi从机

历程整合 环境要求任务需求任务实现代码实现任务测试功能测试 结束 环境 hpm_sdk v 1.7.0ses v8.10 要求 例程demo USB-CDC 作为从机接收&#xff0c;然后把接收到的数据转发给SPI&#xff0c;SPI传输出去 任务需求 USB使用cherry协议栈进行开发 作为device设备&#xff08;…...

编程日记 2025/1/8 9:25:47

数据结构(查找算法)

1. 查找的概念 在一堆数据中&#xff0c;找到我们想要的那个数据&#xff0c;就是查找&#xff0c;也称为搜索&#xff0c;很容易想到&#xff0c;查找算法的优劣&#xff0c;取决于两个因素&#xff1a; 数据本身存储的特点查找算法本身的特点 比如&#xff0c;如果数据存储…...

编程日记 2025/1/8 9:23:39

private前端常见算法

1.数组 合并两个有序数组&#xff08;简单-5&#xff09; https://leetcode.cn/problems/merge-sorted-array/description/?envTypestudy-plan-v2&envIdtop-interview-150 移除元素&#xff08;简单-4&#xff09; https://leetcode.cn/problems/remove-element/descr…...

编程日记 2025/1/8 9:21:35

Go语言之十条命令（The Ten Commands of Go Language）

Go语言之十条命令 Go语言简介 Go语言&#xff08;又称Golang&#xff09;‌是由Google开发的一种开源编程语言&#xff0c;首次公开发布于2009年。Go语言旨在提供简洁、高效、可靠的软件开发解决方案&#xff0c;特别强调并发编程和系统编程‌。 Go语言的基本特征 ‌静态强类…...

编程日记 2025/1/8 9:12:25

Residency 与 Internship 的区别及用法解析

Residency 与 Internship 的区别及用法解析 在英文中&#xff0c;“residency” 和 “internship” 都与职业培训相关&#xff0c;但它们的使用场景和具体含义存在显著差异。本文将详细解析这两个词的区别&#xff0c;以及它们在不同语境下的应用。 Residency 的定义及使用场景…...

编程日记 2025/1/8 9:11:24

成品电池综合测试仪：电子设备性能与安全的守护者|鑫达能

在现代科技和工业领域&#xff0c;电池作为能量储存和转换的关键组件&#xff0c;其性能的稳定性和可靠性至关重要。为了确保电池在各种应用场景中都能发挥最佳性能&#xff0c;成品电池综合测试仪应运而生。这一设备不仅能够对电池的各项性能指标进行全面、准确的检测&#xf…...

编程日记 2025/1/8 9:10:22

Taro地图组件和小程序定位

在 Taro 中使用腾讯地图 1.首先在项目配置文件 project.config.json 中添加权限&#xff1a; {"permission": {"scope.userLocation": {"desc": "你的位置信息将用于小程序位置接口的效果展示"}} }2.在 app.config.ts 中配置&#x…...

编程日记 2025/1/8 9:08:20

深入了解 SSL/TLS 协议及其工作原理

深入了解 SSL/TLS 协议及其工作原理 一. 什么是 SSL/TLS?二. SSL/TLS 握手过程三. SSL/TLS 数据加密与传输四. 总结 点个免费的赞和关注&#xff0c;有错误的地方请指出&#xff0c;看个人主页有惊喜。 作者&#xff1a;神的孩子都在歌唱 一. 什么是 SSL/TLS? 安全套接层&am…...

编程日记 2025/1/8 9:07:15

【计算机操作系统：二、操作系统的结构和硬件支持】

第2章 操作系统的结构和硬件支持 2.1 操作系统虚拟机 操作系统虚拟机是一种通过软件技术对硬件资源进行抽象和虚拟化的机制&#xff0c;使用户能够以逻辑方式访问和使用计算机资源。 定义与概念&#xff1a; 虚拟机是操作系统虚拟化技术的核心产物&#xff0c;通过模拟硬件资…...

编程日记 2025/1/8 9:06:13

51单片机——步进电机模块

直流电机没有正负之分&#xff0c;在两端加上直流电就能工作 P1.0-P1.3都可以控制电机&#xff0c;例如&#xff1a;使用P1.0&#xff0c;则需要把线接在J47的1&#xff08;VCC&#xff09;和2&#xff08;OUT1&#xff09;上 1、直流电机实验 要实现的功能是&#xff1a;直…...

编程日记 2025/1/8 9:04:08

当算法遇到线性代数（四）：奇异值分解（SVD）

SVD分解的理论与应用 线性代数系列相关文章&#xff08;置顶&#xff09; 1.当算法遇到线性代数&#xff08;一&#xff09;&#xff1a;二次型和矩阵正定的意义 2.当算法遇到线性代数&#xff08;二&#xff09;&#xff1a;矩阵特征值的意义 3.当算法遇到线性代数&#xff0…...

编程日记 2025/1/8 9:03:07

SASS 简化代码开发的基本方法

概要 本文以一个按钮开发的实例&#xff0c;介绍如何使用SASS来简化CSS代码开发的。 代码和实现 我们希望通过CSS开发下面的代码样式&#xff0c;从样式来看&#xff0c;每个按钮的基本样式相同&#xff0c;就是颜色不同。 如果按照传统的方式开发&#xff0c;需要开发btn &…...

编程日记 2025/1/8 9:02:02

40.TryParse尝试转化为int类型 C#例子

也许这个时候学有点晚&#xff0c;但是不管怎样都学了 尝试转化&#xff0c;不能转化就返回bool类型的假 它会直接给括号里面的int类型赋值 代码&#xff1a; using System; using System.Timers; public class Program {static void Main(){int a;bool i;while (true){Get…...

编程日记 2025/1/8 8:59:59

【微服务】2、网关

Spring Cloud微服务网关技术介绍 单体项目拆分微服务后的问题 服务地址问题&#xff1a;单体项目端口固定&#xff08;如黑马商城为8080&#xff09;&#xff0c;拆分微服务后端口各异&#xff08;如购物车808、商品8081、支付8086等&#xff09;且可能变化&#xff0c;前端难…...

编程日记 2025/1/8 8:58:56

红队-shell编程篇（上）

声明 通过学习 泷羽sec的个人空间-泷羽sec个人主页-哔哩哔哩视频,做出的文章如涉及侵权马上删除文章 笔记的只是方便各位师傅学习知识,以下网站只涉及学习内容,其他的都与本人无关,切莫逾越法律红线,否则后果自负 一、建立Shell文件 1. Shell简介 Shell是一种命令行界面&am…...

编程日记 2025/1/8 8:54:47

电子价签会是零售界的下一个主流？【新立电子】

电子价签&#xff0c;作为一种能够替代传统纸质标签的数字显示屏&#xff0c;已经在零售行业中展现出其巨大的潜力。它具有实时更新、集中管理、高效节能的特点&#xff0c;实现价格的实时更新&#xff0c;大大减少更新价格的工作量和时间。为消费者带来更加便捷、准确的购物体…...

编程日记 2025/1/8 8:52:43

5 分布式ID

这里讲一个比较常用的分布式防重复的ID生成策略&#xff0c;雪花算法 一个用户体量比较大的分布式系统必然伴随着分表分库&#xff0c;分机房部署&#xff0c;单体的部署方式肯定是承载不了这么大的体量。 雪花算法的结构说明 如下图所示: 雪花算法组成 从上图我们可以看…...

编程日记 2025/1/8 8:50:41

SpringBoot | @Autowired 和 @Resource 的区别及原理分析

关注&#xff1a;CodingTechWork 引言 在Spring框架中&#xff0c;Autowired 和 Resource 是两种常用的依赖注入注解&#xff0c;它们都用于自动装配Bean&#xff0c;简化了开发者手动创建和管理Bean的繁琐工作。然而&#xff0c;它们的实现机制和使用方式有所不同。理解这两者…...

编程日记 2025/1/8 8:48:34

『SQLite』解释执行（Explain）

摘要&#xff1a;本节主要讲解SQL的解释执行&#xff1a;Explain。 在 sqlite 语句之前&#xff0c;可以使用 “EXPLAIN” 关键字或 “EXPLAIN QUERY PLAN” 短语&#xff0c;用于描述表查询的细节。 基本语法 EXPLAIN 语法&#xff1a; EXPLAIN [SQLite Query]EXPLAIN QUER…...

编程日记 2025/1/8 8:46:31

0基础学前端-----CSS DAY12

视频参考&#xff1a;B站Pink老师 今天是CSS学习的第十二天&#xff0c;今天开始的笔记对应Pink老师课程中的CSS第七天的内容。 本节重点&#xff1a;CSS高级技巧 本章目录 本节目标1. 精灵图1.1 为什么需要精灵图1.2 精灵图使用案例&#xff1a;拼出自己的名字 2. 字体图标2.…...

编程日记 2025/1/8 8:43:26

（概率论）无偏估计

参考文章&#xff1a;(15 封私信 / 51 条消息) 什么是无偏估计&#xff1f; - 知乎 (zhihu.com) 首先&#xff0c;第一个回答中&#xff0c;马同学图解数学讲解得很形象&#xff0c; 我的概括是&#xff1a;“注意&#xff0c;有一个总体的均值u。然后&#xff0c;如果抽样n个&…...

编程日记 2025/1/8 8:42:25

Minio-Linux-安装

文章目录 1.Linux安装1.下载源码包2.上传到/usr/local/minio1.进入目录2.上传 3.开放执行权限4.创建minio文件存储目录及日志目录5.编写启动的shell脚本1.脚本编写2.赋予执行权限 6.启动&#xff01;1.执行run脚本2.查看日志3.开放9001和9000端口1.服务器2.安全组3.访问&#x…...

编程日记 2025/1/8 8:41:24

利用Java爬取1688商品详情API接口：技术与应用指南

引言 1688作为中国领先的B2B电子商务平台&#xff0c;拥有海量的商品信息。对于商家和市场研究人员来说&#xff0c;能够从1688获取商品详情信息&#xff0c;对于市场分析、竞品研究等具有重要价值。本文将详细介绍如何使用Java编写爬虫程序&#xff0c;以合法、高效的方式获取…...

编程日记 2025/1/8 8:35:17

基于MATLAB的汽车热管理模型构建

一、引言 汽车热管理系统对汽车性能、部件寿命及驾乘体验至关重要。它能确保发动机、电池等关键部件在适宜温度工作。MATLAB 功能强大&#xff0c;为构建高精度热管理模型提供有效途径&#xff0c;助力优化系统设计与控制策略。 二、汽车热管理系统构成 2.1 发动机冷却系统&…...

编程日记 2025/1/8 8:33:13

LRU（1）

LRU是"Least Recently Used"(最近最少使用)的缩写&#xff0c;它是一种常用的页面置换算法和缓存淘汰策略。当计算机系统的内存或缓存资源有限时&#xff0c;LRU算法根据的历史访问记录来决定哪些数据应该被保留在内存或缓存中&#xff0c;哪些被淘汰。其核心思想是“…...

编程日记 2025/1/8 8:32:12

VSCode 使用鼠标滚轮控制字体

一、 文件 | 首选项 | 设置 二、单击在 settings.json中编辑 "editor.mouseWheelZoom": true 注注注意&#xff1a;保存哦&#xff01;ctrlS 三、测试 按住ctrl鼠标滚轮&#xff0c;控制字体大小...

编程日记 2025/1/8 8:31:11

数据库（3）--针对列的CRUD操作

1.Create 新增 语法&#xff1a; insert into 表名 &#xff08;列名&#xff09;values &#xff08;列&#xff09;... 创建一个学生表用于演示&#xff1a; create table if not exists student( id bigint comment 编号, name varchar(20) comment 姓名 ); 1.1直接增加…...

编程日记 2025/1/8 8:29:09