js中可以直接使用id而不用获取id

先来看一个例子：

不获取 id 也可以使用 id 元素。

<!--
Author: XiaoWen
Create a file: 2017-01-11 13:58:01
Last modified: 2017-01-11 14:00:28
Start to work:
Finish the work:
Other information:
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="box">小文你好</div>
</body>
<script>
  console.log(box.innerText) //小文你好
  //上面的 box 并没有使用 var box=document.getElementById('box') 来首先获得元素
</script>
</html>

其实，不只是 id 可以这样， name 也是可以的。

再来一个例子：

不获取 name 也可以使用 name 元素。

<!--
Author: XiaoWen
Create a file: 2017-01-11 13:58:01
Last modified: 2017-01-11 14:18:43
Start to work:
Finish the work:
Other information:
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="mydiv">小文你好</div>
  <img name="mypic" src="" alt="">
  <form name="myform" action=""></form>
  <a name="mya" href="http://www.baidu.com">a1</a>
</body>
<script>
  console.log(mydiv)
  console.log(mypic)
  console.log(myform)
  console.log(mya) //*
</script>
</html>

为什么可以不获取，h5是这么说的

HTML5规范文档中指出:如果一个元素符合下面两条规则中的任一条,则window对象中必须要有与之对应的一个属性,属性值就是这个对象.

如果一个元素拥有ID属性,那么ID属性的属性值就会成为window对象的属性名.

如果一个元素拥有name属性,那么name属性的属性值就会成为window对象的属性名.但这个元素的标签名必须是: a, applet, area, embed, form, frame, frameset, iframe, img, object,其中的一个.

实用性如何

实际测试了下，上面所说的a标签不能直接使用 name 获得，但img可以。

所以，不好意思，即使是id，在实际项目中并不建议使用。

可以临时用来做做代码调试，懒得去 document.get... 也是可以的。就像 xpath 或 ff 的元素零时变量。

为什么不建议，即使是id，在一些浏览器控制台中使用此方法时，会得到浏览器的警告。

为什么要听浏览器的？我觉得浏览器很厉害。大牛的结晶，大牛的建议，听一下还是可以的。

当然，更深层或更官方的原因，还望有高人告知。