Method to find all nodes in the page whose class is test

preface

Alibaba, web front end interns are about to take an online exam. Really for the novice I or catch up with knowledge first. So baidu Google before the alibaba school entrance exam, feel really despised, do not understand. Ah, the web front is online written test, is it to give us the opportunity to baidu Google?

When you see this question, you really think you should encapsulate some of your common methods, just like jquery. Make some methods, is to achieve browser compatibility, or is the tool class, is really good for future development.

HTML

To illustrate, let's write down the HTML first

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

So we're going to omit the CSS, we're going to focus not on how the CSS styles are written, but we're going to use javascript to find the set of nodes by the style name.

Method of implementation

1 getElementsByClassName

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

Results that appear (firefox 27.0)

< img SRC = "border = 0 / / files.jb51.net/file_images/article/201403/20140328111455.jpeg? 2014228111521 ">  

Sure, I think this method should be able to solve the above problem, but looking at its compatibility, I think we should find another method.

< img SRC = "border = 0 / / files.jb51.net/file_images/article/201403/20140328111543.jpeg? 201422811161 ">  

2 querySelectorAll

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

So let's see, what do we get? What's the difference?

< img SRC = "border = 0 / / files.jb51.net/file_images/article/201403/20140328111620.jpeg? 2014228111642 ">  

The second result is different. The querySelectorAll parameter, if there are two, is separated by A comma, but it actually means that nodes with A style or B style can be matched.

In fact, this method is not very compatible

< img SRC = "border = 0 / / files.jb51.net/file_images/article/201403/20140328111659.jpeg? 2014228111717 ">  

Based on the above compatibility problem (after all, ie6/7/8 is still the majority of browsers in China), I might as well make a method to implement it.

3 queryNodesByClass

I think I should start with my thoughts

(1) get each node of the entire page first
(2) iterate over each node to get its className string
(3) operation className string, first with a space to split into an array, and then with an object, set its key as each array element, then the corresponding value is true
(4) now the problem is that based on the parameters that you pass in (for example, one parameter is "selector", two is "selector_1 selector_2", and so on), then turn it into an array as well, and each array element is the key value of the object corresponding to the className string of our node before, if it matches, it is true, if it doesn't, it is undefined.

So now let's give you our code

 
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){ 
//Thinking (1)
var all = document.getElementsByTagName("*"),len = all.length,result = []; 
var cname = StringToArray(classname);//Ideas (4)
for(var i=0;i<len;i++){//Traverse the corresponding thought of each node (2)
//The corresponding idea is (3), which is what the StringToObj method does
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; 
}