直接用id获取dom元素

Kris-L-

已于 2023-08-21 09:47:08 修改

阅读量282

点赞数

文章标签： html javascript

于 2023-08-21 09:41:21 首次发布

本文链接：https://blog.csdn.net/qq_45803168/article/details/132401214

版权

标签上设置了id属性之后，在script中不使用getElementById()方法，也能够直接用id获取dom元素。

<body>
  <h2 id="title">title</h2>
  <script>
    console.log(title);
  </script>
</body>

输出结果：
在这里插入图片描述

如果dom元素的id名称不和js内置属性(history、location等)或全局变量重名的话，该名称自动成为window对象的属性，属性值指向表示文档元素的HTMLElement元素，所以可以直接用来操作dom。

<body>
  <h2 id="title">title</h2>
  <script>
    var title = title
    console.log(title);
  </script>
</body>

在这里插入图片描述

浏览器支持程度：Firefox、chrome、IE都支持。不过现在还未形成标准，为了保险，还是不推荐使用。

参考文章：https://segmentfault.com/a/1190000020493154

在客户端Javascript中，Window对象是以全局对象的形式存在于做用域链的最上层，这就意味着在HTML文档中使用的id属性会成为被脚本访问的全局变量。若是文档包含一个<div id='box'>元素，那么就能够经过全局变量box来引用此元素。可是，有一个很重要的警告，若是Window对象已经具备此名字的属性，这就不会发生。好比，id是“history”,“location”的元素，就不会以全局变量的的形式出现，因为这些id已经被占用了。
若是HTML文档包含一个id为“x”的元素，而且在代码中声明并赋值给全局变量x，那这个变量的存在就会阻止元素获取它的window属性，而若是脚本中的变量声明出如今命名元素以后，那么变量作用域的显示赋值会覆盖该属性的隐式值。
元素id做为全局变量的隐式应用是web浏览器演化过程当中遗留的怪癖。它主要是出于与已有web页
面后向兼容性的考虑，但这里并不推荐使用这种作法。因此，但愿经过id名来获取dom元素，最好仍是使用document.getElementById()，这是一个document对象的方法，能够经过它来得到指定id的html元素。