在JavaScript中元素id和name可以当做全局变量直接调用

HTML标准API之异端邪说:idname可以不用getElementByquerySelector(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>

上述代码btnGotxtURLmyImage变量均未初始化即直接使用。

现执行如上代码,结果如下图:

解释

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

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

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

规则

支持以下规则的,可以被直接调用:

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

参考资料


   转载规则


《在JavaScript中元素id和name可以当做全局变量直接调用》 Harbor Zeng 采用 知识共享署名 4.0 国际许可协议 进行许可。
 上一篇
一文读懂什么是serverless和它的重要性 一文读懂什么是serverless和它的重要性
前一阵子,我在公司实习的时候,给小组内做了这样一个分享,今天终于有时间,整理出来。变成一片文章,与您分享。内容是我初次探索 Serverless 架构学习到的一些知识,如有错误的地方,希望您能指出。谢谢。 1. 前言语言的进化、浏览器的进化、服务器的进化,都是从复杂到简单,底层到封装的过程,而 Serverless 是后端 + 运维作为一个整体的进一步封装的过程,是把运维“外包”出去的服务架构
2019-04-11
下一篇 
人工神经网络机器学习的基础概念:为什么是神经网络 人工神经网络机器学习的基础概念:为什么是神经网络
人工神经网络的应用场景 未经训练的全联接神经网络 计算反向传播等 这仅仅是个三维展示,实际上是n维的 训练过后的成型神经网络 迭代地计算error/loss,修正每个神经元的weights和biases。变化该有多大。 分成好多个batch计算的原因就是,不能一个一个反向传播,太慢。分批次进行,每个批次进行一次反向传播 视频But what is a Neural Network? |
2019-03-30
  目录