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

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

news 2026/1/12 13:28:43

今天在用原生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

手游刚开服就被攻击怎么办？如何防御DDoS？

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

编程新知 2026/1/8 4:17:19

通过Wrangler CLI在worker中创建数据库和表

官方使用文档&#xff1a;Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后&#xff0c;会在本地和远程创建数据库&#xff1a; npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库&#xff1a; 现在&#xff0c;您的Cloudfla…...

编程新知 2026/1/4 15:07:07

pam_env.so模块配置解析

在PAM&#xff08;Pluggable Authentication Modules&#xff09;配置中&#xff0c; /etc/pam.d/su 文件相关配置含义如下&#xff1a; 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块&#xff0c;负责验证用户身份&am…...

编程新知 2025/10/5 8:09:39

uniapp中使用aixos 报错

问题&#xff1a; 在uniapp中使用aixos&#xff0c;运行后报如下错误&#xff1a; AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...

编程新知 2025/11/29 21:26:48

CSS设置元素的宽度根据其内容自动调整

width: fit-content 是 CSS 中的一个属性值&#xff0c;用于设置元素的宽度根据其内容自动调整&#xff0c;确保宽度刚好容纳内容而不会超出。 效果对比 默认情况&#xff08;width: auto&#xff09;&#xff1a; 块级元素&#xff08;如 <div>&#xff09;会占满父容器…...

编程新知 2025/10/16 16:03:09

在Ubuntu24上采用Wine打开SourceInsight

1. 安装wine sudo apt install wine 2. 安装32位库支持，SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库（解决显示问题） sudo apt install fonts-wqy…...

编程新知 2025/10/14 0:47:25

人机融合智能 | “人智交互”跨学科新领域

本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...

编程新知 2026/1/2 8:43:37

C++ Saucer 编写Windows桌面应用

文章目录 一、背景二、Saucer 简介核心特性典型应用场景 三、生成自己的项目四、以Win32项目方式构建Win32项目禁用最大化按钮 五、总结 一、背景 使用Saucer框架&#xff0c;开发Windows桌面应用&#xff0c;把一个html页面作为GUI设计放到Saucer里&#xff0c;隐藏掉运行时弹…...

编程新知 2026/1/5 8:00:07

【字节拥抱开源】字节团队开源视频模型 ContentV: 有限算力下的视频生成模型高效训练

本项目提出了ContentV框架&#xff0c;通过三项关键创新高效加速基于DiT的视频生成模型训练&#xff1a; 极简架构设计&#xff0c;最大化复用预训练图像生成模型进行视频合成系统化的多阶段训练策略&#xff0c;利用流匹配技术提升效率经济高效的人类反馈强化学习框架&#x…...

编程新知 2026/1/12 2:24:37

华为云Flexus+DeepSeek征文 | MaaS平台避坑指南：DeepSeek商用服务开通与成本控制

作者简介 我是摘星&#xff0c;一名专注于云计算和AI技术的开发者。本次通过华为云MaaS平台体验DeepSeek系列模型&#xff0c;将实际使用经验分享给大家&#xff0c;希望能帮助开发者快速掌握华为云AI服务的核心能力。 目录 作者简介 前言 一、技术架构概览 1.1 整体架构设…...

编程新知 2026/1/7 12:12:47