[JavaScript]取得input的value
有各種方法來獲得輸入文本框的值：
方法 1:
使用 id 名稱來取：
document.getElementById('input text id').value
返回input的value
範例： document.getElementById("searchTxt").value;
方法 2:
使用 class 名稱來取：
document.getElementsByClassName('input text class_name')[取第幾個].value
返回多筆input的為list
範例：
取回第一筆資料
document.getElementsByClassName("searchField")[0].value;
方法 3:
使用 html tag 名稱來取：
document.getElementsByTagName('tag_name')[取第幾個].value
返回多筆input的為list
範例：
取回第一筆資料
document.getElementsByTagName("input")[0].value;
方法 4:
使用 name 名稱來取：
document.getElementsByName('name')[取第幾個].value
範例：
取回第一筆資料
document.getElementsByName("searchTxt")[0].value;
方法 5:
使用選擇器(selector)
document.querySelector('selector').value
範例：
selected by id
document.querySelector('#searchTxt').value;
selected by class
document.querySelector('.searchField').value;
selected by tagname
document.querySelector('input').value;
selected by name
document.querySelector('[name="searchTxt"]').value;
方法 6:
document.querySelectorAll('selector')[取第幾個].value
範例：
selected by id
document.querySelectorAll('#searchTxt')[0].value;
selected by class
document.querySelectorAll('.searchField')[0].value;
selected by tagname
document.querySelectorAll('input')[0].value;
selected by name
document.querySelectorAll('[name="searchTxt"]')[0].value;
支持
Browser 方法 1 方法 2 方法 3 方法 4 方法 5/6
IE6 Y(Buggy) N Y Y(Buggy) N
IE7 Y(Buggy) N Y Y(Buggy) N
IE8 Y N Y Y(Buggy) Y
IE9 Y Y Y Y(Buggy) Y
FF3.0 Y Y Y Y N
FF3.5/FF3.6 Y Y Y Y Y
FF4b1 Y Y Y Y Y
GC4/GC5 Y Y Y Y Y
Safari4/Safari5 Y Y Y Y Y
Opera10.10/
Opera10.53/ Y Y Y Y(Buggy) Y
Opera10.60
註：
IE=Internet Explorer
FF=Mozilla Firefox
GC=Google Chrome
Y=YES,N=NO
有用的鏈接：
要看到這些方法的支持，所有的錯誤，包括更多的細節，點擊這裡 http://quirksmode.org/dom/core/
靜態和實時節點列表之間的區別，請點擊這裡 http://www.nczonline.net/blog/2010/09/28/why-is-getelementsbytagname-faster-that-queryselectorall/
參考
http://stackoverflow.com/questions/11563638/javascript-get-input-text-value
其它文章
沒有留言:
張貼留言