getElementById 與$()

document.getElementById 是Javascript 裡用於取得物件的一個方法，其參數為document.getElementById('ID')。$('#ID') 則是jQuery 裡用來取得物件的一種簡寫，跟document.getElementById 不同的是，她參數的在ID 前面必須加上"#"。

HTML]<div id="test"></div>

]

]var testJavascript = document.getElementById('test'); 

jQuery]var testJQuery = $('#test'); 

 

jQuery 的寫法必須加上"#" 的原因是因為她也可以加上"."，用來Class 來取得物件。而Javascript 就必須使用document.getElementsByClassName('Class')，因為Class 可重複，結果可能有很多個，所以是"Elements" 不是"Element"，這是比較容易出錯的地方。

HTML]<div class="test"></div>

]

]var testJavascript = getElementsByClassName('test'); 

jQuery]var testJQuery = $('.test'); 

 

另外，只有在Chrome 裡，如果物件ID 只有英數、底線，那麼可以省去document.getElmentById，直接使用ID 代表該物件。

HTML]<div id="test">testText</div>

HTML]<div id="test0></div>

HTML]<div id="test_A"></div>

HTML]<div id="test-B"></div>

]

]alert(test.innerText); //test 不包含英數、底線以外其他字元，因此這裡的test 可以等效於document.getElementById('test')。alert 裡顯示"testText"。以下兩者亦同。

]alert(test0.innerText); 

]alert(test_A.innerText); 

]alert(document.getElementById('test-B')) //test-B 包含了橫線，不在允許的範圍內，因此要乖乖地使用document.getElementById('test-B')。