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，在一些浏览器控制台中使用此方法时，会得到浏览器的警告。

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

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

js中可以直接使用id而不用获取id的更多相关文章

js中的定义变量之①用不用var
var 是js定义变量的意思. 由于js中的变量是弱类型的,因此js中的所有变量包括number(数字型).string(字符串类型).boolean(布尔类型,true和false)等均通过var关 ...
js中两个日期大小比较，获取当前日期，日期加减一天
一.两个日期大小比较 1.日期参数格式:yyyy-mm-dd // a: 日期a, b: 日期b, flag: 返回的结果 function duibi(a, b,flag) { var arr = ...
原生js在绑定事件时不用获取id名可直接用id名绑定？？？
<div id="btn"> 点击 </div> <script> btn.onclick=function(){ console.log(bt ...
JS中new Date（）用法及获取服务器时间
1.获取服务器时间: var now = new Date($.ajax({async: false}).getResponseHeader("Date")); 2.new Dat ...
JS中获取CSS样式的方法
1.对于内联样式,可以直接使用ele.style.属性名(当然也可以用键值对的方式)获得.注意在CSS中单词之间用-连接,在JS中要用驼峰命名法如 <div id="dv" ...
JS中对获取一个标签的class的方法封一个库
在JS中我们经常会会用到,获取一个标签的id var aId=document.getElementById("id") 现在虽然有getElementsByClassName这个 ...
json Date对象在js中的处理办法
我们在程序用往往通过ajax方式返回json数据,json中包含Date对象时,在js中是Object对象.可以方式获取: 1.new Date(yourJsonDate.time); //你用你的返 ...
[转]html js中name和id的区别和使用分析
js中web页面元素的调用可以有两种识别方法:id和name 自己在用的过程中总结一下id和name的使用区别. 一,使用范围除 BASE, HEAD, HTML, META, SCRIPT, ST ...
页面上有两个元素id相同，js中如何取值
页面上有两个table,id都是”cont2",现要在js中取到这两个table,改变样式. js实现: var tab2=document.all.cont2(1);var tab=do ...

随机推荐

python string 模块
标准库 python3 python2.7 都可以用 sting.ascii_letters是生成所有字母,从a-z和A-Z, string.digits是生成所有数字0-9. import stri ...
PHP 常用命令行
1.PHP运行指定文件 php -f test.php (-f 可省略) 2.命令行直接运行PHP代码 php -r "phpinfo();" 如果结果太长,还可以 php -r ...
mac shell终端编辑命令行快捷键
Ctrl + d 删除一个字符,相当于通常的Delete键(命令行若无所有字符,则相当于exit:处理多行标准输入时也表示eof) Ctrl + h 退格删除一个字符,相当 ...
react native android 编译
修改 Maven 仓库地址 React Native 在初始化时会从 jcenter.binary.com 这个地方下载一些东西,网上搜索了一下,好像是在下载 Maven 相关的依赖. 针对全局进行修 ...
img height test
docker：搭建lamp应用
(原文http://blog.csdn.net/smallfish1983/article/details/40108999?utm_source=tuicool) LAMP 指的 Linux(操作系 ...
[转]Visual C++ RunTime的特征——非烫即屯
Visual C++ RunTime的特征——非烫即屯大一刚学C语言,第二次上机课,当我发现我照着书抄写的程序在运行之外的黑框里面跳出一排“烫烫烫烫烫”,当时就震惊了.你们能想象一个来自小城, 在大 ...
Listener—监听器
什么是监听器? 监听器是Web应用程序事件模型的一部分监听器的作用? 1:Web应用中某些状态发生改变的时候会产生相应的事件: a)servletContext.HttpSession.Servle ...
JSP—内置对象
JSP内置对象是Web容器创建的一组对象,不用声明,直接使用 out 输出对象类型 javax.servlet.jsp.JspWriter 作用域 Page request 请求对象类型 java ...
Python: re.IGNORECASE 标志参数字符串忽略大小写的搜索替换
为了在文本操作时忽略大小写,需要在使用re 模块的时候给这些操作提供re.IGNORECASE 标志参数.比如 >>> text = 'UPPER PYTHON, lower pyt ...