在JavaScript中元素id和name可以当做全局变量直接调用
JavaScript id name getElementById querySelector
JavaScript异端邪说
发布日期:  2019-04-04
文章字数:  405
阅读时长:  1 分
阅读次数: 

HTML标准API之异端邪说：id和name可以不用getElementBy和querySelector(all)即可直接当做全局变量使用。

现象

偶然一次浏览到别人的项目，发现https://github.com/zjcqoo/zjcqoo.github.io他的html代码写法好奇怪，直接把html里面标签的id当做变量来使用。

<!doctype html>
<html>
<head>
  <title>异端邪说</title>
  <meta charset="utf-8">
</head>
<body>
  <h1>异端邪说</h1>
  <div>
    URL:
    <input id="txtURL" value="some value">
    <button id="btnGo">Go</button>
    <img name="myImage" src="https://www.baidu.com/img/bd_logo1.png">
  </div>
  <script>
    btnGo.onclick = function() {
      alert(txtURL.value + "; " + myImage.src)
    }
  </script>
</body>
</html>

上述代码btnGo、txtURL、myImage变量均未初始化即直接使用。

现执行如上代码，结果如下图：

解释

经过一番google搜索，找到了答案[1]

在HTML Living Standard 7.3.3里面是这样解释的：

这是一个非标准API（non-normative），供开发人员使用，生产环境下可能因为不同浏览器内核的实现而或内核的更新而存在差异。应该使用document.getElementById()或document.querySelector()。

规则

支持以下规则的，可以被直接调用：

  • 所有带有name属性的embed， form，frameset，img，和object标签
  • 具有非空内容属性的id所有HTML元素
  • 如果你的id名也叫document，那么很遗憾，document还是原来那个document对象

参考资料

  1. javascript variable corresponds to DOM element with the same ID https://stackoverflow.com/questions/5515659/javascript-variable-corresponds-to-dom-element-with-the-same-id ↩︎

   转载规则


《在JavaScript中元素id和name可以当做全局变量直接调用》 由 Harbor Zeng 采用 知识共享署名 4.0 国际许可协议 进行许可。
 上一篇
一文读懂什么是serverless和它的重要性 一文读懂什么是serverless和它的重要性
前一阵子，我在公司实习的时候，给小组内做了这样一个分享，今天终于有时间，整理出来。变成一片文章，与您分享。内容是我初次探索 Serverless 架构学习到的一些知识，如有错误的地方，希望您能指出。谢谢。 1. 前言 语言的进化、浏览器的进化、服务器的进化，都是从复杂到简单，底层到封装的过程，而 Serverless 是后端 + 运维作为一个整体的进一步封装的过程，是把运维“外包”出去的服务
2019-04-11 架构设计
hexo 静态博客 腾讯云 serverless hugo 阿里云 Amazon Azure FaaS BaaS
下一篇 
TWA踩坑记-从零到一让你的博客变成app并上架商店 TWA踩坑记-从零到一让你的博客变成app并上架商店
前言 在上一篇文章 PWA踩坑记-从零到一让你的博客也能离线访问 中，我介绍了如何将您的博客升级为PWA (Progressive-Web-App) 应用。 在这篇文章里，我将向您一步一步展示如何使您现有的PWA转化为TWA 您将学到： 什么是TWA？ 什么是activity？ TWA特性 安卓开发基础环境搭建 Gradle的基本概念 TWA与网站的双向验证方法 Android软件签名 如何自
2019-03-21 hexo静态博客搭建教程
CircleCI 教程 PWA TWA Trusted-Web-Activities Google-Developer Chrome app发布 nodejs 隐藏文件 activity fragment webview
  目录