尋找頁面中所有類別為test的結點的方法_javascript技巧

前言

阿里巴巴，web前端實習生要線上考試了。確實對於菜鳥的我還是惡補一下知識先。所以百度谷歌了之前阿里巴巴校招的前端筆試題，覺得自己真的被鄙視了，完全做不懂的。啊里巴巴的web前端是在線的筆試，是不是給我們百度谷歌的機會？

看見這題目的時候，覺得確實自己應該去封裝一些你常用的方法，就像jquery那樣。做出一些方法，是實現瀏覽器相容的，或者是工具類，確實對以後開發還是有利的。

HTML

為了方便說明，我們先寫下HTML

複製代碼 代碼如下:

find me

also find me

css我們就省略了，我們的重點有不是css樣式是怎麼寫，我們要的是用javascript透過樣式名去尋找結點集合。

實作的方法

1 getElementsByClassName

複製程式碼

複製程式碼

複製程式碼

複製程式碼


複製程式碼


複製程式碼

複製程式碼複製碼🎜> console.log(document.getElementsByClassName("A"));

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

出現的結果(coxfoxfox 27.0)

 

確實這個方法，我覺得應該就能解決上面的問題了，但是看了它的兼容性，我覺得應該還是另找方法吧。

 

2 querySelectorAll




複製程式碼



複製程式碼


🎜>

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

我們來看看結果是什麼？跟上面有什麼差別？  第二個的結果不一樣，原來querySelectorAll參數，如果有兩個的話，要用逗號分隔，其實它表示的意思是有A樣式或B樣式的結點都可以搭配。

其實這個方法的相容性也不是很好


 

基於上面相容性的問題(畢竟在中國瀏覽器ie6/7/8還是佔多數的嘛) ，我還不如自己做一個方法去實現。

3 queryNodesByClass

我覺得應該先說下我的思路

(1) 先獲取整個頁面每個節點

(2) 遍歷每個節點，取得它的className字串(3)操作className字串，先以空格來分割成數組，再用一個對象，設定其key為每個數組元素，那麼對應的value為true (4 )現在的問題就是根據你傳入的參數(例如一個參數就是"selector"，兩個的話就是"selector_1 selector_2"，以此類推)，然後將它也轉變成數組，每個數組元素做為之前我們結點className字串對應的物件的key值，如果符合的話，就是true，沒有的話就是undefined。 那現在我們給我們的程式碼

複製程式碼


程式碼如下:



程式碼如下:

程式碼如下: 程式碼如下:

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; } 複製程式碼 程式碼如下: 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; } 複製程式碼複製程式碼複製程式碼 🎜>

function queryNodesByClass(classname){
//思路(1)
var all = document.getElementsByTagName("*"),len = all.length,result = [];
var cname = StringToArray(classname);//思路(4)
for(var i=0;i//對應的是想法(3)也就是StringToObj方法的作用
var dom_cname = StringToObj(all[i].className),cname_len = cname.length;
for(var j=0;jif(!dom_cname[cname[j]])
break;
}
if(j == cname_len)
{
result.push(all[i]);
}}
return result;
}