无意中再次发现, 某元素赋予了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>
|
源码在这里