javaScript中document.getElementById 你了解多少？

最新推荐文章于 2020-09-26 17:19:16 发布

转载最新推荐文章于 2020-09-26 17:19:16 发布 · 979 阅读

文章标签：

#javascript #input #firefox #button #ie #null

javaScrip 专栏收录该内容

3 篇文章

订阅专栏

本文深入探讨了在HTML元素查找过程中，IE浏览器与Firefox浏览器的行为差异，特别是针对id和name属性的匹配规则。通过实例代码演示，揭示了IE浏览器查找元素时的兼容性考量，以及其与Firefox的显著不同之处。

text1：
<input name="textName1" type="text" id="textName2" />
<br>
text2：
<input name="textName2" type="text" id="textName1" />
<br>
<input type="button" name="Submit" value="text1" onclick=alert(document.getElementById('textName2').value) />
<input type="button" name="Submit2" value="text2" onclick=alert(document.getElementById('textName1').value) />

我在IE中测试了上面的代码，在第一个文本框中输入1，在第二个文本框中输入2，然后点下面的两个按钮，猜一下结果是什么？

我本意是按钮1返回第一个文本框的值，按钮2返回个文本框的值。

结果是两个按钮都返回了第一个文本框的值。

说明ie执行document.getElementById(elementName)的时候，返回的是第一个name或者id等于elementName的对象，并不是按照ID来查找的。

在fireFox中不存在这样的问题，fireFox执行document.getElementById(elementName)的时候只查找id等于elementName的对象，如果不存在则返回null。

可能IE是考虑的兼容性的问题才这么做的。