做前端，需要選擇元素，雖說有jquery和各大js庫已經幫我造好了輪子，但我想試試自己實現一個，正好項目也不忙，正好加入自己的js文件中，下面是實現代碼。用$g(“#content .op”)這種格式就可以調用，和jquery $()的參數一樣:

function $findChilds(parentNode, text) { //如果不傳入父節點的話，默認為body if(parentNode == undefined) parentNode = document.body; var childNodes = parentNode.childNodes; var results = []; //子節點大于零才循環 if(childNodes.length > 0) { var length = childNodes.length; //循環查找符合text的節點 for(var i=0;i<length;++i) { //三種情況，className，id， tagName switch(text.substr(0, 1)) { case '.': //這兩種:parentNode.getElementsByClassName,parentNode.all //都是后來加上的，如果瀏覽器這兩種方法都不支持，那就只能暴力遞歸了 if(parentNode.getElementsByClassName) return parentNode.getElementsByClassName(text.substr(1)); else if(parentNode.all) { var finded = []; var jlength = parentNode.all.length; for(var j=0;j<jlength;++j) if(parentNode.all[j].className == text.substr(1)) finded.push(parentNode.all[j]); return finded; } //以上兩種方法都不支持，直接判斷 if(childNodes[i].className == text.substr(1)) results.push(childNodes[i]); break; case '#': return [document.getElementById(text.substr(1))]; default: return parentNode.getElementsByTagName(text); } //判斷完后，把當前子元素的子元素傳入$findChilds進行遞歸查找，返回的結果直接和現在的結果合并 results = results.concat($findChilds(childNodes[i], text)); } } return results; } String.prototype.vtrim = function() { return this.replace(/^/s+|/s+$/g, ''); } function $g(text) { //按照空格分割參數 var values = text.vtrim().split(" "); var length = values.length; //如果只有一個選擇參數的話，就直接調用dom方法返回結果。 if(length == 1) switch(values[0].substr(0, 1)) { case "#": return document.getElementById(values[0].substr(1)); case ".": if(document.getElementsByClassName) return document.getElementsByClassName(values[0].substr(1)); default: return document.getElementsByTagName(values[0]); } //每次迭代都會產生許多符合參數的結果節點,這里結果節點的名稱為parentNodes，第一次循環默認為body var parentNodes = [document.body]; //外層循環為迭代每個傳入的參數 for(var i = 0; i < length; ++i) { var jlength = parentNodes.length; var results = []; //這里如果values的長度為零的話， //就說明是多出來的空格， //例如:$g(" .content");這種情況不執行代碼直接跳入下一循環 var tmpValue = values[i].vtrim(); if(tmpValue.length <= 0) continue; //內層循環為迭代每個結果節點， //在結果節點中查找符合選擇條件的結果。當然第一次為body for(var j=0;j<jlength;++j) { //$findChilds就是上邊的那個函數，就是選擇某個節點的子節點的 var result = $findChilds(parentNodes[j], values[i].vtrim()); var rlength = result.length; //因為返回的有時候是html容器，無法直接和數組concat所以倒入數組，這里有優化空間，但暫不考慮性能先這么做 for (var k = 0; k < rlength; ++k) results.push(result[k]); } //沒有結果，立即返回undefined if(results == undefined || results.length <= 0) return undefined; //最后一次循環就直接返回結果數組，但是如果最后一個選擇條件是選擇id的話，那就不返回數組直接返回dom對象了 if (i == length - 1) { if (values[i].substr(0, 1) == "#") return results[0]; return results; } parentNodes = results; } }

經過在ff ie6下的測試 單純的選擇id比jquery要快很多，
其他的部分選擇模式我測試的少數比jquery要快。
當然測試不可能全面，還可能會有bug，而且不支持類似于.content:first-child這樣的偽類選擇。

JavaScript技術：原生的html元素選擇器類似jquery選擇器，轉載需保留來源！

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。