有沒有辦法在一個特定的stylename類的元素中搜索DOM?就像這樣:在文檔中搜索具有樣式名稱的元素?
var node = document.findByClassName("foo");
如果是這樣,如果我的網頁有2000左右的元素,這會非常慢嗎?
謝謝
有沒有辦法在一個特定的stylename類的元素中搜索DOM?就像這樣:在文檔中搜索具有樣式名稱的元素?
var node = document.findByClassName("foo");
如果是這樣,如果我的網頁有2000左右的元素,這會非常慢嗎?
謝謝
如果瀏覽器不支持本地方法,您可以篩選每個標記並查找類名。此版本允許您指定要從中進行搜索的父級,並且可以匹配多個級別。無論是哪種情況,它都會返回一個節點數組,而不是「實時」節點列表。
function getbyClass(classes, pa){
pa= pa && pa.nodeType== 1? pa: document;
// native support:
if(pa.getElementsByClassName){
var A= [], N= pa.getElementsByClassName(classes);
for(var i= 0, L= N.length; i<L; i++){
A[i]= N[i];
}
return A;
}
// no native support:
var elems= [], c= classes.split(/ +/), L= c.length, tem, temc,
tags= pa.getElementsByTagName('*'), max= tags.length;
for(var i= 0, L= c.length; i< L; i++){
c[i]= RegExp('\\b'+c[i]+'\\b');
}
getbyClassloop:
while(max){
i= L;
tem= tags[--max];
temc= tem.className;
if(temc){
while(i){
if(!c[--i].test(temc)) continue getbyClassloop;
}
elems[elems.length]= tem;
}
}
return elems;
}
//使用 -
getbyClass('classname')
// searches document for elements with classname
getbyClass('classname1 classname2')
// searches document for elements with both classes
getbyClass('classname1 classname2',containingelement)
// searches only containingelement and descendents
/* IE9將會對本地方法的支持,低於8的IE版本, 以及其他一些老的瀏覽器,將回落到篩選方法。 您可以添加比篩選器更快的方法到IE8。 */
(function(){
if(!document.getElementsByClassName && document.attachEvent){
try{
if(document.querySelectorAll){
var IE8class= function(classes){
var C= classes.split(' '), tem,
els= Array.from(this.querySelectorAll('.'+ C.shift()));
while(C.length && els.length){
tem= C.shift();
els= els.testEach(function(itm){
return itm.className.indexOf(tem)!= -1;
});
}
return els;
}
HTMLDocument.prototype.getElementsByClassName= IE8class;
Element.prototype.getElementsByClassName= IE8class;
return true;
}
}
catch(er){
return false
};
}
})()
許多Ajax庫提供了這個。例如YUI提供的方法可以在這裏http://developer.yahoo.com/yui/docs/YAHOO.util.Element.html
發現
YAHOO.util.Element.getElementsByClassName (class)
更多的細節我用了很多,並沒有發現任何重大的放緩。
jQuery是免費的輕量級跨瀏覽器腳本庫。
它噸的很酷的功能,並選擇與類名的所有元素一樣簡單
$('.foo');
此外,它配備了大量的免費插件,這將使您的開發工作,以便更輕鬆。
例如,下面的代碼不正是它寫着:
$("p.neat").addClass("ohmy").show("slow");
即所有p標籤應用了整齊的類,添加一個新類ohmy,使其與慢動畫可見。酷呃?
你真的說 '重量輕'? ? LOL – 2010-06-03 16:42:30
你獲得的所有花裏胡哨的東西是不是24KB輕量級?你想要什麼,一個彙編語言版本?但是,是的,我明白對於需要非常瑣碎的人來說,最好使用內置的JS。 :) – 2010-06-03 16:53:37
您可以使用SizzleJs,這也是jQuery中使用的內容。
var elements = Sizzle(「。foo」);
唉,JavaScript本身並不包含一個函數來做這件事**。大多數JavaScript庫確實提供了按類選擇元素的簡單方法,但它們各有其優點和缺點。
如果你不希望使用JavaScript庫(這是罰款;有沒有使用其他庫的幾大理由),你可以做這樣的事情:
elems = document.getElementsByTagName("h2");
for (i=0; i<elems.length; i++)
{
if (elems[i].className == "myAwesomeClass")
{ // Do whatever stuff needs to happen to the class
elems[i].style.color="red";
}
}
在上面的代碼,我假設每個具有所需類的元素都具有相同的標記。如有必要,可以使用document.getElementsByTagName(「*」)來選擇所有標籤,但瀏覽器可能需要更長的時間才能處理。
**更正/澄清: 最新的瀏覽器支持document.getElementsByClassName。 IE8沒有。(http://www.quirksmode.org/dom/w3c_core.html#t11)
AFAIK document.getElementsByClassName( '富')在CSS3和唯一的工作介紹了FF3,IE9(alpha是出),也許Chrome瀏覽器... – AlexV 2010-06-03 17:13:35