JQuery固然很方便，但若拋開它，一樣可以用原生javascript獲取dom元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
*{margin:0;padding:0;}
div{width:200px;line-height:20px;margin:5px auto 0;}
div,p{padding:10px;border:2px solid #eee;}
</style>
</head>
<body>
<div id="box">
div id = box
<p>p標籤</p>
</div>
<div class="box">div class = box</div>
<div class="box">div class = box</div>
<div>
div標籤
<p>p標籤</p>
</div>
</body>
<script>
/**
* getElement獲取元素
* @param {string} selector 選擇器
* @param {boolean} returnArrayType 是否以數組形式返回HTMLcollection
* @return {[HTML | HTMLCollection | Array]}
*/
function getElement(selector,returnArrayType){
if(selector){
var reg = /^(?:\#([\w\-]+)|\.([\w\-]+)|([\w\-]+))$/,
result = reg.exec(selector),
id = result[1],
className = result[2],
tag = result[3],
arr = [],
element = null;
if(result){
if(id){
element = document.getElementById(id);
returnArrayType && arr.push(element);
}
if(className){
// HTMLcollection僞數組
element = document.getElementsByClassName(className);
returnArrayType && arr.push.apply(arr,element);
}
if(tag){
// HTMLcollection僞數組
element = document.getElementsByTagName(tag);
returnArrayType && arr.push.apply(arr,element);
}
return returnArrayType ? arr : element;
}
return [];
}else{
throw '函數getElement參數(selector)錯誤!';
}
};
getElement('#box').style.borderColor = '#999';
getElement('.box',1).forEach(function(item){
item.style.borderColor = '#ddd';
});
getElement('p',1).forEach(function(item){
item.style.borderColor = '#ff6600';
});
</script>
</html>
Mark 以備用；