JavaScript中getElementById方法的使用

摘要:介紹了getElementById方法的作用以及使用技巧，并結合具體的案例提出了該方法在Internet Explorer和Firefox瀏覽器下效果的不同，指出IE對ID和Name的不敏感性，最后得出對于IE該方法是有漏洞的結論。

關鍵詞:JavaScript;getElementById;IE;Firefox;漏洞

The Use of getElementById Method in JavaScript

SHENG Yun-yao

(Computer Sicence and Engineering Department， Changzhou Institute of Mechatronic Technology， Changzhou 213164， China)

Abstract: Described the role and tips of getElementById method， and used example to bring up the different effectiveness of this method in Internet Explorer and Firefox browser， and pointed out that the IE on the ID and Name of the insensitivity，at last came to the conclusion that the method is flawed for IE.

Key words: JavaScript;getElementById;IE;Firefox;Bug

Javascript是為適應動態網頁制作的需要而誕生的一種編程語言，如今越來越廣泛地使用于Internet網頁制作上。它是由Netscape公司開發的一種腳本語言(scripting language)，或者稱為描述語言。在HTML基礎上，使用它可以開發交互式Web網頁。它的出現使得網頁和用戶之間實現了一種實時性的、動態的、交互性的關系，使網頁包含更多活躍的元素和更加精彩的內容。

Javascript主要是基于客戶端運行的，用戶點擊帶有Javascript的網頁，網頁里的Javascript就傳到瀏覽器，由瀏覽器對此作處理。如下拉菜單、驗證表單有效性等大量互動性功能，都是在客戶端完成的，不需要和Web Server發生任何數據交換， 因此，不會增加Web Server的負擔。目前，幾乎所有瀏覽器都支持Javascript，如Internet Explorer(IE)，Firefox，Netscape，Mozilla，Opera等。但是由于瀏覽器間沒有統一的標準，所以在執行JavaScript時會出現截然不同的效果。本文研究了JavaScript中getElementById方法，發現不同的瀏覽器對該方法的支持度是不同的。

1 getElementById的使用

1.1 方法意義

getElementById(參數):參數為標簽的Id。

該方法的作用是返回具有指定 ID 屬性值的第一個對象的一個引用。通過ID來設置/返回HTML標簽的屬性及調用其事件與方法。用這個方法基本上可以控制頁面所有標簽，條件很簡單就是給每個標簽分配一個ID號。

1.2 方法使用技巧

在我們寫JavaScript的時候經肯定會經常用到document.getElementById()這個方法，這么長一串很容易寫錯，而且其中getElementById又有大小寫之分，其實可以使用$()簡寫方法。下面就通過電子郵件驗證的案例來介紹該方法的使用:

E-mail:

使用了function $()這個函數后，只需要在document.getElementById('id') 的地方用$('id')代替就行了。另外，利用這個函數如果你想它提交一個帶多個id的數組后，他也會向你返回多個元素的Array。

2 getElementById(參數)的bug

常用JavaScript的人都知道，標簽除了有Id屬性外還有Name屬性，按理這兩個屬性是沒有關系的，Id就像身份證號一樣是唯一的，Name則如人名可以有相同的，它們都可以標識某個標簽，互不干擾，我們習慣于把某個標簽的Id和Name設成相同的。如果打破陳規，把標簽的Id和Name設成不同的，會是怎樣的效果呢，看如下代碼:

該代碼中有四個文本框，第3個文本框的Id和第1個文本框的Name都設為“text1”，第4個文本框的Id和第2個文本框的Name都設為“text2”，