javascript getElementsByClassName函數(shù)
更新時(shí)間:2010年04月01日 18:09:00 作者:
今天在腳本中應(yīng)用到了根據(jù)類(lèi)名取元素的方法,卻對(duì)其效率不甚滿(mǎn)意。于是,小幅修改了其探測(cè)元素類(lèi)名的方法,提升了約3成的效率.
今天在網(wǎng)上看到的一個(gè)根據(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)常編寫(xiě)CSS的人自然就會(huì)產(chǎn)生疑問(wèn),有沒(méi)有根據(jù)樣式類(lèi)名取元素的方法,可惜,DOM1/2 里面都沒(méi)有這樣的方法,prototype 很早就擴(kuò)展過(guò)DOM的方法,添加了 getElementsByClassName,從方法名上看,似乎非常正統(tǒng),與前面3種方法名稱(chēng)也像,分析其代碼,卻發(fā)現(xiàn)還是通過(guò) getElementsByTagName 來(lái)實(shí)現(xiàn)。這個(gè)方法稱(chēng)不上優(yōu)雅,因?yàn)樾枰闅v所有的元素,探測(cè)元素是否包含目標(biāo)樣式類(lèi)名,返回符合條件的元素?cái)?shù)組。google了一下,卻沒(méi)有找到更優(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) {
//適用于獲取某個(gè)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) {
//適用于獲取某個(gè)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){ //通過(guò)name的方式只能針對(duì)整個(gè)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)常編寫(xiě)CSS的人自然就會(huì)產(chǎn)生疑問(wèn),有沒(méi)有根據(jù)樣式類(lèi)名取元素的方法,可惜,DOM1/2 里面都沒(méi)有這樣的方法,prototype 很早就擴(kuò)展過(guò)DOM的方法,添加了 getElementsByClassName,從方法名上看,似乎非常正統(tǒng),與前面3種方法名稱(chēng)也像,分析其代碼,卻發(fā)現(xiàn)還是通過(guò) getElementsByTagName 來(lái)實(shí)現(xiàn)。這個(gè)方法稱(chēng)不上優(yōu)雅,因?yàn)樾枰闅v所有的元素,探測(cè)元素是否包含目標(biāo)樣式類(lèi)名,返回符合條件的元素?cái)?shù)組。google了一下,卻沒(méi)有找到更優(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) {
//適用于獲取某個(gè)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) {
//適用于獲取某個(gè)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){ //通過(guò)name的方式只能針對(duì)整個(gè)document而言,不能為其限定范圍
return document.getElementsByName(s);
};
您可能感興趣的文章:
- js document.getElementsByClassName的使用介紹與自定義函數(shù)
- js 獲取class的元素的方法 以及創(chuàng)建方法getElementsByClassName
- javascript getElementsByClassName 和js取地址欄參數(shù)
- javascript getElementsByClassName實(shí)現(xiàn)代碼
- 使用classList來(lái)實(shí)現(xiàn)兩個(gè)按鈕樣式的切換方法
- Javascript 多瀏覽器兼容性問(wèn)題及解決方案
- IE8的JavaScript點(diǎn)擊事件(onclick)不兼容的解決方法
- JavaScript在IE和Firefox(火狐)的不兼容問(wèn)題解決方法小結(jié)
- JavaScript中解決多瀏覽器兼容性23個(gè)問(wèn)題的快速解決方法
- JS中g(shù)etElementsByClassName與classList兼容性問(wèn)題解決方案分析
相關(guān)文章
javascript中的replace函數(shù)(帶注釋demo)
在js中有兩個(gè)replace函數(shù) 一個(gè)是location.replace(url) 跳轉(zhuǎn)到一個(gè)新的url.一個(gè)string.replace("xx","yy") 替換字符串 返回一個(gè)新的字符串,該方法并不改變字符串本身。下面通過(guò)本文給大家介紹javascript中的replace函數(shù)2018-01-01整理Javascript事件響應(yīng)學(xué)習(xí)筆記
整理Javascript事件響應(yīng)學(xué)習(xí)筆記,之前一系列的文章是跟我學(xué)習(xí)Javascript,本文就是進(jìn)一步學(xué)習(xí)javascript流程控制語(yǔ)句,希望大家繼續(xù)關(guān)注2015-12-12為什么JS中eval處理JSON數(shù)據(jù)要加括號(hào)
這篇文章主要介紹了為什么JS中eval處理JSON數(shù)據(jù)要加括號(hào)的相關(guān)資料,需要的朋友可以參考下2015-04-04javascript模擬鼠標(biāo)點(diǎn)擊事件原理和實(shí)現(xiàn)方法
本文詳細(xì)介紹了JS模擬鼠標(biāo)點(diǎn)擊事件的原理以及應(yīng)用場(chǎng)景,并提供了模擬鼠標(biāo)左鍵點(diǎn)擊事件、右鍵點(diǎn)擊事件、滾輪事件和移動(dòng)事件的代碼實(shí)現(xiàn),了解JS模擬鼠標(biāo)點(diǎn)擊事件的原理和實(shí)現(xiàn)方法對(duì)于開(kāi)發(fā)人員非常重要,這對(duì)于許多面向用戶(hù)的web應(yīng)用程序的開(kāi)發(fā)和測(cè)試都具有很重要的意義2023-09-09