js代码中,可以直接用id当选择器?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <ul id="color-list2">
    <li id="addEvent">red</li>
    <li id="on_click">yellow</li>
  </ul>
  <script type="text/javascript">
    (function() {
      on_click.onclick = function() {
        alert("我是click1");
      }
//      color-list2.style.color = 'blue';
      on_click.style.color = 'red';
    })();
  </script>
</body>
</html>

问题:
这段代码为什么可以正确运行?
我认为on_click应该是未定义的,但没有报错,所以我猜测js中可以直接用id当选择器,但是如果我的猜测正确,那为什么我注释的那句会报错?
真的搞不懂什么原因?求指教

阅读 3.8k
6 个回答

这个一开始是 IE 为了方便提供的支持,后来火狐、Chrome 都跟进了。

而且不止 idname 也可以,只要不和 js 内置属性或全局变量重名就会自动挂载。

Chrome v64.0.3282.140 下的话在 window / document / all 路径下:

clipboard.png

但是这个进没进标准还不知道,最好别用不然以后标准不让用浏览器一更新你的代码就 gg 了。

color-list 这个在js语法里当变量成立吗? 如果 你换成color_list, 你在试试报错 ?

赞同楼上的,你注释的那句不对,你应该是想写color-list2的吧

ID 直接取得 DOM 元素,这个问题 SO 上已经有了,题主要的文档:

http://2ality.com/2012/08/ids...

The HTML5 standard specifies that the window object must have a
property key whose value is elem if...

  • there is exactly one DOM element elem whose property id has the value key.
  • there is exactly one DOM element elem whose property name has the value key. elem’s tag must be one of: a, applet, area, embed, form, frame, frameset, iframe, img, object.

当然,这种语法是不推荐使用的,SO 链接

2、color-list 这个语法明显错误,楼上人都说了,js 里不能这样用的,color_list可以;

id命名后应该不可以直接通过id名拿出dom的,你这个不报错应该是on_click是关键字的原因

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题