2010-06-03 135 views
4

有沒有辦法在一個特定的stylename類的元素中搜索DOM?就像這樣:在文檔中搜索具有樣式名稱的元素?

var node = document.findByClassName("foo"); 

如果是這樣,如果我的網頁有2000左右的元素,這會非常慢嗎?

謝謝

+0

AFAIK document.getElementsByClassName( '富')在CSS3和唯一的工作介紹了FF3,IE9(alpha是出),也許Chrome瀏覽器... – AlexV 2010-06-03 17:13:35

回答

3

如果瀏覽器不支持本地方法,您可以篩選每個標記並查找類名。此版本允許您指定要從中進行搜索的父級,並且可以匹配多個級別。無論是哪種情況,它都會返回一個節點數組,而不是「實時」節點列表。

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 
     }; 
    } 
})() 
4

好,jQuery有一個類選擇:

$('.foo') 

你可以看看那裏的實現。

Firefox支持本地getElementsByClassName() AFAIK。

1

jQuery是免費的輕量級跨瀏覽器腳本庫。

它噸的很酷的功能,並選擇與類名的所有元素一樣簡單

$('.foo'); 

此外,它配備了大量的免費插件,這將使您的開發工作,以便更輕鬆。

例如,下面的代碼不正是它寫着:

$("p.neat").addClass("ohmy").show("slow"); 

即所有p標籤應用了整齊的類,添加一個新類ohmy,使其與慢動畫可見。酷呃?

+0

你真的說 '重量輕'? ? LOL – 2010-06-03 16:42:30

+0

你獲得的所有花裏胡哨的東西是不是24KB輕量級?你想要什麼,一個彙編語言版本?但是,是的,我明白對於需要非常瑣碎的人來說,最好使用內置的JS。 :) – 2010-06-03 16:53:37

1

您可以使用SizzleJs,這也是jQuery中使用的內容。

var elements = Sizzle(「。foo」);

1

唉,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

相關問題