快捷導(dǎo)航

查找頁(yè)面中所有類為test的結(jié)點(diǎn)的方法

更新時(shí)間：2014年03月28日 11:16:34 作者：

這篇文章主要介紹了查找頁(yè)面中所有類為test結(jié)點(diǎn)的方法,需要的朋友可以參考下

前言

阿里巴巴，web前端實(shí)習(xí)生要在線考試了。確實(shí)對(duì)于菜鳥的我還是惡補(bǔ)一下知識(shí)先。所以百度谷歌了之前阿里巴巴校招的前端筆試題，覺得自己真的被鄙視了，完全做不懂的。啊里巴巴的web前端是在線的筆試，是不是給我們百度谷歌的機(jī)會(huì)呢？

看見這道題目的時(shí)候，覺得確實(shí)自己應(yīng)該去封裝一些你常用的方法，就像jquery那樣。做出一些方法，是實(shí)現(xiàn)瀏覽器兼容的，或者是工具類，確實(shí)對(duì)以后開發(fā)還是有利的。

HTML

為了方便說(shuō)明，我們先寫下HTML

復(fù)制代碼代碼如下:

 
<p class="A B">find me</p> 
<div class="A">also find me</div> 

css我們就省略了，我們的重點(diǎn)有不是css樣式是怎么寫，我們要的是用javascript通過(guò)樣式名去尋找結(jié)點(diǎn)集合。

實(shí)現(xiàn)的方法

1 getElementsByClassName

復(fù)制代碼代碼如下:

 
console.log(document.getElementsByClassName("A")); 
console.log(document.getElementsByClassName("A B")); 

出現(xiàn)的結(jié)果(firefox 27.0)

確實(shí)這個(gè)方法，我覺得應(yīng)該就能解決上面的問(wèn)題了，但是看了它的兼容性，我覺得應(yīng)該還是另找方法吧。

2 querySelectorAll

復(fù)制代碼代碼如下:

 
console.log(document.querySelectorAll (".A")); 
console.log(document.querySelectorAll (".B,.A")); 

我們來(lái)看看結(jié)果是什么？跟上面有什么區(qū)別？

第二個(gè)的結(jié)果不一樣，原來(lái)querySelectorAll參數(shù)，如果有兩個(gè)的話，要用逗號(hào)分隔，其實(shí)它表示的意思是有A樣式或者B樣式的結(jié)點(diǎn)都可以匹配。

其實(shí)這個(gè)方法的兼容性也不是很好

基于上面兼容性的問(wèn)題(畢竟在中國(guó)瀏覽器ie6/7/8還是占多數(shù)的嘛) ，我還不如自己做一個(gè)方法去實(shí)現(xiàn)呢。

3 queryNodesByClass

我覺得應(yīng)該先說(shuō)下我的思路

(1) 先獲取整個(gè)頁(yè)面每個(gè)節(jié)點(diǎn)
(2) 遍歷每個(gè)節(jié)點(diǎn)，獲取它的className字符串
(3)操作className字符串，先以空格來(lái)分割成數(shù)組，再用一個(gè)對(duì)象，設(shè)置其key為每個(gè)數(shù)組元素，那么對(duì)應(yīng)的value為true
(4)現(xiàn)在的問(wèn)題就是根據(jù)你傳入的參數(shù)(比如一個(gè)參數(shù)就是"selector"，兩個(gè)的話就是"selector_1 selector_2"，以此類推)，然后將它也轉(zhuǎn)變成數(shù)組，每個(gè)數(shù)組元素做為之前我們結(jié)點(diǎn)className字符串對(duì)應(yīng)的對(duì)象的key值，如果匹配的話，就是true，沒(méi)有的話就是undefined。

那現(xiàn)在我們給出我們的代碼

復(fù)制代碼代碼如下:

 
function StringToObj(string){ 
var arr = string.split(" ").sort(); 
var result = {}; 
for(var i=arr.length-1;arr[i];i--){ 
result[arr[i]] = true; 
} 
return result; 
} 

復(fù)制代碼代碼如下:

 
function StringToArray(string){ 
var arr = string.split(" ").sort(); 
var result = []; 
for(var i=arr.length-1;arr[i];i--){ 
result.push(arr[i]); 
} 
return result; 
} 

復(fù)制代碼代碼如下:

 
function queryNodesByClass(classname){ 
//思路(1) 
var all = document.getElementsByTagName("*"),len = all.length,result = []; 
var cname = StringToArray(classname);//思路(4) 
for(var i=0;i<len;i++){//遍歷每個(gè)節(jié)點(diǎn) 對(duì)應(yīng)思路(2) 
//對(duì)應(yīng)的是思路(3)也就是StringToObj方法起的作用 
var dom_cname = StringToObj(all[i].className),cname_len = cname.length; 
for(var j=0;j<cname_len;j++){ 
if(!dom_cname[cname[j]]) 
break; 
} 
if(j == cname_len) 
{ 
result.push(all[i]); 
}} 
return result; 
} 