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()">
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,不這樣寫可以嗎?如果要取得的是 div、span、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 元素中的字串輸出。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>
延伸閱讀