直接使用id引用DOM元素

无意中再次发现, 某元素赋予了id属性后, js可以直接通过id来获取该元素.

这是怎么回事? 既然有这种事, 那么还要document.getElementById干嘛?

根据stackoverflow的这个回答, 当对某元素设置id属性id=someId时, window对象会增加同名属性, 可以通过window[someId]或window.someId引用该元素

且不论这样处理有着什么样的故事, 回答已提到, 这件事情已经变成html的规范

那么, 既然可以这样做, 我们还需要使用document.getElementById这个方法吗

答案是需要.

因为经过测试, 我发现如果页面上出现与id同名的变量, 则该变量代表的就是js的变量值, 而不指向html中的元素.

另外还有一些特殊情况, 下面是测试代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>use id to select element</title>
  <script>
    var foo = 'foo'
  </script>
  </head>
<body>
  <section>
    <p>覆盖失败</p>
    <div id="window">window</div>
    <div id="document">document</div>
  </section>
  <section>
    <p>使用id引用</p>
    <div id="foo">id: foo</div>
    <div id="bar">id: bar</div>
    <div id="two-word">id: two-word</div>
  </section>
  <section>
    <p>使用name引用</p>
    <form action="#" name="form">表单</form>
    <img src="" alt="img" name="img">
  </section>
  <section>
    <div>可在控制台测试变量</div>
    <div id="result"></div>
    <div>two-word的引用需要使用: window['two-word']</div>
  </section>
  <script>
    var bar = 'bar'
    result.textContent = 'foo is ' + foo + ', bar is ' + bar
  </script>
</body>
</html>

源码在这里

Fork me on GitHub