javascript getElementsByClassName函數(shù)
更新時間:2010年04月01日 18:09:00 作者:
今天在腳本中應(yīng)用到了根據(jù)類名取元素的方法,卻對其效率不甚滿意。于是,小幅修改了其探測元素類名的方法,提升了約3成的效率.
今天在網(wǎng)上看到的一個根據(jù)ClassName獲取Elements的腳本,在此記錄一下,以便日后使用。
var getElementsByClassName = function(searchClass, node, tag) {
if (document.getElementsByClassName) {
return document.getElementsByClassName(searchClass)
} else {
node = node || document;
tag = tag || "*";
var classes = searchClass.split(" "),
elements = (tag === "*" && node.all) ? node.all : node.getElementsByTagName(tag),
patterns = [],
returnElements = [],
current,
match;
var i = classes.length;
while (--i >= 0) {
patterns.push(new RegExp("(^|\\s)" + classes[i] + "(\\s|$)"));
}
var j = elements.length;
while (--j >= 0) {
current = elements[j];
match = false;
for (var k = 0, kl = patterns.length; k < kl; k++) {
match = patterns[k].test(current.className);
if (!match) break;
}
if (match) returnElements.push(current);
}
return returnElements;
}
}
下面是網(wǎng)上其它的一些相關(guān)介紹,大家可以一起參考下。
DOM中的getElementsByClassName解釋如下:DOM API 中提供3種方法取元素(getElementById,getElementsByName,getElementsByTagName),經(jīng)常編寫CSS的人自然就會產(chǎn)生疑問,有沒有根據(jù)樣式類名取元素的方法,可惜,DOM1/2 里面都沒有這樣的方法,prototype 很早就擴(kuò)展過DOM的方法,添加了 getElementsByClassName,從方法名上看,似乎非常正統(tǒng),與前面3種方法名稱也像,分析其代碼,卻發(fā)現(xiàn)還是通過 getElementsByTagName 來實現(xiàn)。這個方法稱不上優(yōu)雅,因為需要遍歷所有的元素,探測元素是否包含目標(biāo)樣式類名,返回符合條件的元素數(shù)組。google了一下,卻沒有找到更優(yōu)雅高效的替代方法。
function getElementsByClassName(className, parentElement){
var elems = ($(parentElement)||document.body).getElementsByTagName("*");
var result=[];
for (i=0; j=elems[i]; i++){
if ((" "+j.className+" ").indexOf(" "+className+" ")!=-1){
result.push(j);
}
}
return result;
}
既然有g(shù)etElementsByClassName,一樣可以有 getElementsByAttribute(如:getElementsByValue、getElementsByStyle、getElementsByType)
document.getElementsByClassName = function(className,oBox) {
//適用于獲取某個HTML區(qū)塊內(nèi)部含有某一特定className的所有HTML元素
this.d= oBox || document;
var children = this.d.getElementsByTagName('*') || document.all;
var elements = new Array();
for (var ii = 0; ii < children.length; ii++) {
var child = children[ii];
var classNames = child.className.split(' ');
for (var j = 0; j < classNames.length; j++) {
if (classNames[j] == className) {
elements.push(child);
break;
}
}
}
return elements;
}
document.getElementsByType = function(sTypeValue,oBox) {
//適用于獲取某個HTML區(qū)塊內(nèi)部同屬于某一特定type的所有HTML元素,如:input,script,link等等
this.d= oBox || document;
var children = this.d.getElementsByTagName('*') || document.all;
var elements = new Array();
for (var ii = 0; ii < children.length; ii++) {
if (children[ii].type == sTypeValue) {
elements.push(children[ii]);
}
}
return elements;
}
function $() {
var elements = new Array();
for (var ii = 0; ii < arguments.length; ii++) {
var element = arguments[ii];
if (typeof element == 'string')
element = document.getElementById(element);
if (arguments.length == 1)
return element;
elements.push(element);
}
return elements;
}
$Cls = function (s,o){
return document.getElementsByClassName(s,o);
};
$Type = function (s,o){
return document.getElementsByType(s,o);
};
$Tag = function (s,o){
this.d=o || document;
return this.d.getElementsByTagName(s);
};
$Name = function (s){ //通過name的方式只能針對整個document而言,不能為其限定范圍
return document.getElementsByName(s);
};
復(fù)制代碼 代碼如下:
var getElementsByClassName = function(searchClass, node, tag) {
if (document.getElementsByClassName) {
return document.getElementsByClassName(searchClass)
} else {
node = node || document;
tag = tag || "*";
var classes = searchClass.split(" "),
elements = (tag === "*" && node.all) ? node.all : node.getElementsByTagName(tag),
patterns = [],
returnElements = [],
current,
match;
var i = classes.length;
while (--i >= 0) {
patterns.push(new RegExp("(^|\\s)" + classes[i] + "(\\s|$)"));
}
var j = elements.length;
while (--j >= 0) {
current = elements[j];
match = false;
for (var k = 0, kl = patterns.length; k < kl; k++) {
match = patterns[k].test(current.className);
if (!match) break;
}
if (match) returnElements.push(current);
}
return returnElements;
}
}
下面是網(wǎng)上其它的一些相關(guān)介紹,大家可以一起參考下。
DOM中的getElementsByClassName解釋如下:DOM API 中提供3種方法取元素(getElementById,getElementsByName,getElementsByTagName),經(jīng)常編寫CSS的人自然就會產(chǎn)生疑問,有沒有根據(jù)樣式類名取元素的方法,可惜,DOM1/2 里面都沒有這樣的方法,prototype 很早就擴(kuò)展過DOM的方法,添加了 getElementsByClassName,從方法名上看,似乎非常正統(tǒng),與前面3種方法名稱也像,分析其代碼,卻發(fā)現(xiàn)還是通過 getElementsByTagName 來實現(xiàn)。這個方法稱不上優(yōu)雅,因為需要遍歷所有的元素,探測元素是否包含目標(biāo)樣式類名,返回符合條件的元素數(shù)組。google了一下,卻沒有找到更優(yōu)雅高效的替代方法。
復(fù)制代碼 代碼如下:
function getElementsByClassName(className, parentElement){
var elems = ($(parentElement)||document.body).getElementsByTagName("*");
var result=[];
for (i=0; j=elems[i]; i++){
if ((" "+j.className+" ").indexOf(" "+className+" ")!=-1){
result.push(j);
}
}
return result;
}
既然有g(shù)etElementsByClassName,一樣可以有 getElementsByAttribute(如:getElementsByValue、getElementsByStyle、getElementsByType)
復(fù)制代碼 代碼如下:
document.getElementsByClassName = function(className,oBox) {
//適用于獲取某個HTML區(qū)塊內(nèi)部含有某一特定className的所有HTML元素
this.d= oBox || document;
var children = this.d.getElementsByTagName('*') || document.all;
var elements = new Array();
for (var ii = 0; ii < children.length; ii++) {
var child = children[ii];
var classNames = child.className.split(' ');
for (var j = 0; j < classNames.length; j++) {
if (classNames[j] == className) {
elements.push(child);
break;
}
}
}
return elements;
}
document.getElementsByType = function(sTypeValue,oBox) {
//適用于獲取某個HTML區(qū)塊內(nèi)部同屬于某一特定type的所有HTML元素,如:input,script,link等等
this.d= oBox || document;
var children = this.d.getElementsByTagName('*') || document.all;
var elements = new Array();
for (var ii = 0; ii < children.length; ii++) {
if (children[ii].type == sTypeValue) {
elements.push(children[ii]);
}
}
return elements;
}
function $() {
var elements = new Array();
for (var ii = 0; ii < arguments.length; ii++) {
var element = arguments[ii];
if (typeof element == 'string')
element = document.getElementById(element);
if (arguments.length == 1)
return element;
elements.push(element);
}
return elements;
}
$Cls = function (s,o){
return document.getElementsByClassName(s,o);
};
$Type = function (s,o){
return document.getElementsByType(s,o);
};
$Tag = function (s,o){
this.d=o || document;
return this.d.getElementsByTagName(s);
};
$Name = function (s){ //通過name的方式只能針對整個document而言,不能為其限定范圍
return document.getElementsByName(s);
};
您可能感興趣的文章:
- js document.getElementsByClassName的使用介紹與自定義函數(shù)
- js 獲取class的元素的方法 以及創(chuàng)建方法getElementsByClassName
- javascript getElementsByClassName 和js取地址欄參數(shù)
- javascript getElementsByClassName實現(xiàn)代碼
- 使用classList來實現(xiàn)兩個按鈕樣式的切換方法
- Javascript 多瀏覽器兼容性問題及解決方案
- IE8的JavaScript點擊事件(onclick)不兼容的解決方法
- JavaScript在IE和Firefox(火狐)的不兼容問題解決方法小結(jié)
- JavaScript中解決多瀏覽器兼容性23個問題的快速解決方法
- JS中g(shù)etElementsByClassName與classList兼容性問題解決方案分析
相關(guān)文章
javascript中的replace函數(shù)(帶注釋demo)
在js中有兩個replace函數(shù) 一個是location.replace(url) 跳轉(zhuǎn)到一個新的url.一個string.replace("xx","yy") 替換字符串 返回一個新的字符串,該方法并不改變字符串本身。下面通過本文給大家介紹javascript中的replace函數(shù)2018-01-01整理Javascript事件響應(yīng)學(xué)習(xí)筆記
整理Javascript事件響應(yīng)學(xué)習(xí)筆記,之前一系列的文章是跟我學(xué)習(xí)Javascript,本文就是進(jìn)一步學(xué)習(xí)javascript流程控制語句,希望大家繼續(xù)關(guān)注2015-12-12為什么JS中eval處理JSON數(shù)據(jù)要加括號
這篇文章主要介紹了為什么JS中eval處理JSON數(shù)據(jù)要加括號的相關(guān)資料,需要的朋友可以參考下2015-04-04javascript模擬鼠標(biāo)點擊事件原理和實現(xiàn)方法
本文詳細(xì)介紹了JS模擬鼠標(biāo)點擊事件的原理以及應(yīng)用場景,并提供了模擬鼠標(biāo)左鍵點擊事件、右鍵點擊事件、滾輪事件和移動事件的代碼實現(xiàn),了解JS模擬鼠標(biāo)點擊事件的原理和實現(xiàn)方法對于開發(fā)人員非常重要,這對于許多面向用戶的web應(yīng)用程序的開發(fā)和測試都具有很重要的意義2023-09-09