js可不使用document直接根据id获取id元素
今天在用原生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的时候发现一个有意思的小现象，那就是可以直接根据元素的id去获取对应的元素。 起先是我定义了四个btn，每个btn都是根据getElementById来获取元素，然后给元素绑定事件，在调试的时候都挺好，到了后…...
【竞技宝】CS2:HLTV2024职业选手排名TOP8-broky
北京时间2025年1月7日,HLTV年度选手排名正在持续公布中,今日凌晨正式公布了今年的TOP8为FAZE战队的broky。 选手简介 broky是一位来自拉脱维亚的职业CS选手,现年23岁。2018年7月,broky获得了FPL资格,连续几季在榜上前5。他的首次赛场留名是跟随拉脱维亚本土战队Wolsung出征BES…...
Apache Paimon-实时数据湖
一、Apache Paimon是什么? Flink社区希望能够将 Flink 的 Streaming 实时计算能力和 Lakehouse 新架构优势进一步结合，推出新一代的 Streaming Lakehouse 技术，促进数据在数据湖上真正实时流动起来，并为用户提供实时离线一体化的开发体验。 …...
hpm使用笔记————使用usb作为从机接收来自上位机的数据然后通过spi主机发送给spi从机
历程整合 环境要求任务需求任务实现代码实现任务测试功能测试 结束 环境 hpm_sdk v 1.7.0ses v8.10 要求 例程demo USB-CDC 作为从机接收，然后把接收到的数据转发给SPI，SPI传输出去 任务需求 USB使用cherry协议栈进行开发 作为device设备（…...
数据结构(查找算法)
1. 查找的概念 在一堆数据中，找到我们想要的那个数据，就是查找，也称为搜索，很容易想到，查找算法的优劣，取决于两个因素： 数据本身存储的特点查找算法本身的特点 比如，如果数据存储…...
private前端常见算法
1.数组 合并两个有序数组（简单-5） https://leetcode.cn/problems/merge-sorted-array/description/?envTypestudy-plan-v2&envIdtop-interview-150 移除元素（简单-4） https://leetcode.cn/problems/remove-element/descr…...
Go语言之十条命令（The Ten Commands of Go Language）
Go语言之十条命令 Go语言简介 Go语言（又称Golang）是由Google开发的一种开源编程语言，首次公开发布于2009年。Go语言旨在提供简洁、高效、可靠的软件开发解决方案，特别强调并发编程和系统编程。 Go语言的基本特征 静态强类…...
Residency 与 Internship 的区别及用法解析
Residency 与 Internship 的区别及用法解析 在英文中，“residency” 和 “internship” 都与职业培训相关，但它们的使用场景和具体含义存在显著差异。本文将详细解析这两个词的区别，以及它们在不同语境下的应用。 Residency 的定义及使用场景…...
成品电池综合测试仪：电子设备性能与安全的守护者|鑫达能
在现代科技和工业领域，电池作为能量储存和转换的关键组件，其性能的稳定性和可靠性至关重要。为了确保电池在各种应用场景中都能发挥最佳性能，成品电池综合测试仪应运而生。这一设备不仅能够对电池的各项性能指标进行全面、准确的检测…...
Taro地图组件和小程序定位
在 Taro 中使用腾讯地图 1.首先在项目配置文件 project.config.json 中添加权限： {"permission": {"scope.userLocation": {"desc": "你的位置信息将用于小程序位置接口的效果展示"}} }2.在 app.config.ts 中配置&#x…...
深入了解 SSL/TLS 协议及其工作原理
深入了解 SSL/TLS 协议及其工作原理 一. 什么是 SSL/TLS?二. SSL/TLS 握手过程三. SSL/TLS 数据加密与传输四. 总结 点个免费的赞和关注，有错误的地方请指出，看个人主页有惊喜。 作者：神的孩子都在歌唱 一. 什么是 SSL/TLS? 安全套接层&am…...
【计算机操作系统：二、操作系统的结构和硬件支持】
第2章 操作系统的结构和硬件支持 2.1 操作系统虚拟机 操作系统虚拟机是一种通过软件技术对硬件资源进行抽象和虚拟化的机制，使用户能够以逻辑方式访问和使用计算机资源。 定义与概念： 虚拟机是操作系统虚拟化技术的核心产物，通过模拟硬件资…...
51单片机——步进电机模块
直流电机没有正负之分，在两端加上直流电就能工作 P1.0-P1.3都可以控制电机，例如：使用P1.0，则需要把线接在J47的1（VCC）和2（OUT1）上 1、直流电机实验 要实现的功能是：直…...
当算法遇到线性代数（四）：奇异值分解（SVD）
SVD分解的理论与应用 线性代数系列相关文章（置顶） 1.当算法遇到线性代数（一）：二次型和矩阵正定的意义 2.当算法遇到线性代数（二）：矩阵特征值的意义 3.当算法遇到线性代数࿰…...
SASS 简化代码开发的基本方法
概要 本文以一个按钮开发的实例，介绍如何使用SASS来简化CSS代码开发的。 代码和实现 我们希望通过CSS开发下面的代码样式，从样式来看，每个按钮的基本样式相同，就是颜色不同。 如果按照传统的方式开发，需要开发btn &…...
40.TryParse尝试转化为int类型 C#例子
也许这个时候学有点晚，但是不管怎样都学了 尝试转化，不能转化就返回bool类型的假 它会直接给括号里面的int类型赋值 代码： using System; using System.Timers; public class Program {static void Main(){int a;bool i;while (true){Get…...
【微服务】2、网关
Spring Cloud微服务网关技术介绍 单体项目拆分微服务后的问题 服务地址问题：单体项目端口固定（如黑马商城为8080），拆分微服务后端口各异（如购物车808、商品8081、支付8086等）且可能变化，前端难…...
红队-shell编程篇（上）
声明 通过学习 泷羽sec的个人空间-泷羽sec个人主页-哔哩哔哩视频,做出的文章如涉及侵权马上删除文章 笔记的只是方便各位师傅学习知识,以下网站只涉及学习内容,其他的都与本人无关,切莫逾越法律红线,否则后果自负 一、建立Shell文件 1. Shell简介 Shell是一种命令行界面&am…...
电子价签会是零售界的下一个主流？【新立电子】
电子价签，作为一种能够替代传统纸质标签的数字显示屏，已经在零售行业中展现出其巨大的潜力。它具有实时更新、集中管理、高效节能的特点，实现价格的实时更新，大大减少更新价格的工作量和时间。为消费者带来更加便捷、准确的购物体…...
5 分布式ID
这里讲一个比较常用的分布式防重复的ID生成策略，雪花算法 一个用户体量比较大的分布式系统必然伴随着分表分库，分机房部署，单体的部署方式肯定是承载不了这么大的体量。 雪花算法的结构说明 如下图所示: 雪花算法组成 从上图我们可以看…...
RestClient
什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端，它允许HTTP与Elasticsearch 集群通信，而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级ÿ…...
MPNet：旋转机械轻量化故障诊断模型详解python代码复现
目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块（MBFM） 2.2 残差注意力金字塔模块（RAPM） 2.2.1 空间金字塔注意力（SPA） 2.2.2 金字塔残差块（PRBlock） 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...
SCAU期末笔记 - 数据分析与数据挖掘题库解析
这门怎么题库答案不全啊日 来简单学一下子来 一、选择题（可多选） 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘：专注于发现数据中…...
linux 错误码总结
1，错误码的概念与作用 在Linux系统中，错误码是系统调用或库函数在执行失败时返回的特定数值，用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递，errno由操作系统维护，保存最近一次发生的错误信息。值得注意的是，errno的值在每次系统调用或函数调用失败时…...
Keil 中设置 STM32 Flash 和 RAM 地址详解
文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面（Target 选项卡）1. IROM1（用于配置 Flash）2. IRAM1（用于配置 RAM）二、链接器设置界面（Linker 选项卡）1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数（如果没有勾选上面…...
uniapp中使用aixos 报错
问题： 在uniapp中使用aixos，运行后报如下错误： 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 解决方案&…...
ip子接口配置及删除
配置永久生效的子接口，2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...
Springboot社区养老保险系统小程序
一、前言 随着我国经济迅速发展，人们对手机的需求越来越大，各种手机软件也都在被广泛应用，但是对于手机进行数据信息管理，对于手机的各种软件也是备受用户的喜爱，社区养老保险系统小程序被用户普遍使用，为方…...
服务器--宝塔命令
一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行！ sudo su - 1. CentOS 系统： yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...
算法岗面试经验分享-大模型篇
文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer （1）资源 论文&a…...