document.getElementById()

document.getElementById 在 DOM 應用中相當的常見,用來取得頁面中特定 id 的元素值,與 document.getElementById 類似的語法還包含了像是 document.getElementByName 或是 document.getElementByTagName,本篇著重於透過 id 來取得值。

document.getElementById 基本語法

document.getElementById("id");


語法中的 id 是必要項目,少了這個項目則 JavaScript 就不知道要取得哪個元素囉!另外要附帶一提的是 document.getElementById 會取得網頁中該 id 的第一個元素,也就是當你的頁面中有相當多一樣的 id,則只有第一個會被取得。

document.getElementById 實做語法:取得文字欄位值
<script language="javascript">
function ShowValue(){
 var v=document.getElementById("test").value;
 alert(v);
}
</script>
<input type="text" id="test">
<input type="text" id="test">
<input type="button" value="Show me" onclick="ShowValue()">



我們刻意在範例中放了兩個 input text 的文字輸入欄位,且 id 都是 test,當兩個欄位都輸入文字並按下 Show me 的按鈕之後,可以清楚的呈現出只有第一個欄位被顯示出來,所以如果想要每個欄位都抓到,盡量把兩個欄位都設定不同的 id 再執行 document.getElementById。

另外我們在範例中使用了 document.getElementById("test").value 這樣的寫法,最後面那個 value 意思是我們要取得的是欄位 value,不這樣寫可以嗎?如果要取得的是 divspan、h1 ... 或其他的元素,當然可以不這樣寫,舉個例子。

document.getElementById 取得其他元素
<script language="javascript">
function ShowValue(){
 var v=document.getElementById("test");
 alert(v.innerHTML);
}
</script>
<input type="button" value="Show me" onclick="ShowValue()">
<div id="test">How are you.</div>
在這次的範例中,我們就沒有使用 .value 這樣的語法,而是直接使用 document.getElementById("test") 去取得 object HTMLDivElement,再透過 innerHTML 的屬性將 id 元素中的字串輸出。

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012
PHP Smarty MySQL JQuery Apache W3C