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