为什么给html标签定义了id，就可以在js中（浏览器环境）直接通过id引用这个dom元素？

最新推荐文章于 2024-07-27 08:54:16 发布
最新推荐文章于 2024-07-27 08:54:16 发布
阅读量4.2k 收藏 7
点赞数 4
分类专栏： Javascript 文章标签： html 浏览器 dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jackie_bobo/article/details/79293186
版权

问题

只要标签有id这个属性，不使用getElementById方法，也可以直接用id获取dom元素。

解惑

经过一波搜索及查资料，原因大概是：如果dom元素的id名称不和js内置属性或全局变量重名的话，该名称自动成为window对象的属性，所以可以直接用来操作dom。看网上的说法是，这个是IE首先支持，火狐谷歌后面才支持的。不过现在还未形成标准，为了保险，还是不用的好。不过看各大浏览器都支持，觉得也许以后这个有可能直接成标准也说不定哈，到时候又可以省几个代码0.

在各大浏览器中的测试结果如下：

  • chorme浏览器中
    这里写图片描述

  • firefox浏览器中
    这里写图片描述

  • ie浏览器中（仿真ie5版）
    这里写图片描述

jackie_bobo
关注
专栏目录
Js操作DOM元素及获取浏览器高宽的简单方法
10-21
在这个示例中，通过设置HTML结构和CSS样式来定义网页的布局。其中，`#header`定义了一个具有特定宽度和背景图片的头部区域，`#main`定义了主体内容区域，而`#left`定义了左侧边栏区域，这些区域的宽度和高度被设置得...
详解JS获取HTML DOM元素的8种方法
10-19
- 在IE6和IE7浏览器中，表单元素的name属性值会被错误地当作标签名来处理，使用时需要特别注意这一点。 4. 通过类名（getElementsByClassName） getElementsByClassName方法通过元素的类名来获取元素集合。使用时...
为什么原生JS可以直接使用ID名称来获取元素
nicexibeidage的博客
12-04 8418
Mrcxt原创文章 疑惑，原生JS中可以直接使用ID名称来获取元素，而不用使用getElementById()方法？ 问题描述 在js中可以这么使用： （id名称）.style.display="inline'; 而不是使用： document.getElementById('id名称').style.display="inline"; 就像我在下面使用的一样，js不会报错而且还能准确执
前端必知必会-html的id属性和Iframe
最新发布
qq_24018193的博客
07-27 894
本文介绍了的html的id属性和iframe使用，如有问题欢迎私信和评论。
js遍历html设置id,js中可以直接使用id而不用获取id
weixin_42181929的博客
06-17 921
先来看一个例子：不获取 id 也可以使用 id 元素。Document小文你好console.log(box.innerText) //小文你好//上面的 box 并没有使用 var box=document.getElementById('box') 来首先获得元素其实，不只是 id 可以这样， name 也是可以的。再来一个例子：不获取 name 也可以使用 name 元素。Document小...
JavaScript 可以直接通过ID来操作dom元素，不用进行获取
柠檬人的博客
11-17 4709
写代码时发现；JavaScript没有获取id，但却依然能够使用这个id节点进行操作，并且也能正常打印。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=dev
js-可以使用id直接操作DOM
weixin_34029680的博客
05-15 371
//一般不建议使用，可以在console调试时使用 <input type="button" id="btn" value="anniu"> <script> btn.onclick=function(){ console.log('hello'); //结果弹出 --hello } location.onclick=functi...
js DOM 元素ID就是全局变量.docx
01-19
这意味着在JavaScript代码中，我们可以通过`foo`来直接引用这个元素，就像它是一个全局变量一样。 然而，这种行为并不是标准的一部分，而是浏览器为了方便开发者而提供的一个非正式的“快捷方式”。HTML5规范建议...
html5 video标签屏蔽右键视频另存为的js代码
11-21
在HTML5中，`<video>`标签是一个非常重要的元素，它允许我们在网页上直接嵌入视频内容，提供了丰富的交互性和自定义功能。然而，当用户在视频播放区域内右键点击时，浏览器通常会显示一个上下文菜单，其中包括“视频...
基于HTML+CSS+JS的圣诞树源码，可以直接在浏览器中打开
12-07
在这个圣诞树项目中，HTML将用于创建页面的骨架，设置元素的位置和布局，使圣诞树和其他元素如雪花能够正确地展示在浏览器窗口中。通常，HTML代码会包含`<div>`标签来创建不同的区域，这些区域将通过CSS进行样式化。...
很少用的前端基础知识---id直接在js中使用
zhangpu_的博客
09-20 1630
很少用的前端基础知识。id直接在js中使用 今天做了个模拟题，一个特别简单的程序，但是想来想去却憋了半天。越是简单的问题，越想表现一下自己。唉，不过还是想着做好吧，既然做完了，那就总结一下吧。 题目是这样的，实现一个这样的效果，如下两图。 看着很简单哈，可是写真正实现起来总是踩坑。 废话也不多说了，当时就想把那些奇奇怪怪的知识都用上，直接上代码吧。我把知识点也写在了里面。 <!DOCTYPE html> <html lang="en"> <head> &lt
如何在js中直接使用id_node.js中的npm update如何使用
weixin_33795788的博客
01-23 172
npm update是一个更新命令，即更新npm包，npm是Node.js中使用的包管理系统，Node.js通常在命令行上运行，出于这个原因，我们使用update来更新包，我们还使用update来保持开发环境的最新状态。更新npm更新npm本身的命令如下。npm update npm用npm更新包可以使用npm命令更新程序包。npm update 程序包名称npm up 程序包名称npm upgr...
HTML 怎么发明的？
userkang的博客
11-19 1459
什么是 SGML？ 标准通用标记语言（Standard Generalized Markup Language，SGML）是现时常用的超文本格式的最高层次标准，是可以定义标记语言的元语言，甚至可以定义不必采用 &lt;&gt; 的常规方式。由于它的复杂，因而难以普及。 这是它的一个例子： &lt;QUOTE TYPE="example"&gt; typically something like ...
在js中html标签id会被当做变量处理?
linziping的博客
01-16 2467
在js中html标签id会被当做变量处理? 今天在书写代码时，因为失误在js中使用了一个没有定义的变量，代码运行报错，在控制台输出该变量时，输出一段html标签语句，感到很奇怪！搜索整个js文件，都没有发现对该变量进行过声明、赋值，后来发现在html文档中有使用该变量名称的标签id，并且在控制台输出该id，其结果和使用document.getElementById(ID)的竟然结果一致。 ...
html语言中的id属性
Poikilothermfu的博客
06-07 858
定义和用法 id 属性规定 HTML 元素的唯一的 id。 id 在 HTML 文档中必须是唯一的。 id 属性可用作链接锚（link anchor），通过 JavaScript（HTML DOM）或通过 CSS 为带有指定 id 的元素改变或添加样式。
js中可以直接用id调用函数吗？
吉帅振博客
07-13 4918
在JavaScript中，标准的id选择器调用语法是：document.getElementById('myid').style.width = '100px';但是，今天发现，直接用id名字调用竟然也可以正确运行：myid.style.width = '100px';最后找度娘问了问，问题的答案是：这个最初是 IE 里面的，后来 firefox chrome 好像也支持，但是不建议使用。这个不是...
js不用获取id属性, 直接可以用id名做事件绑定
weixin_43665686的博客
07-14 1505
js不用获取id属性, 直接可以用id名做事件绑定
原生JS可以直接使用ID名称来获取元素
jarisMA的博客
03-16 2877
原生JS可以直接使用ID名称来获取元素 eg: html &lt;form&gt; &lt;select name="choice" size="1" id="obj"&gt; &lt;option value="a"&gt;1&lt;/option&gt; &lt;op
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值