1. 程式人生 > >document.getElementById 你真正瞭解了嗎?

document.getElementById 你真正瞭解了嗎?


  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是考慮的相容性的問題才這麼做的。