Method to find all nodes with class test in the page_javascript skills

Foreword

Alibaba, web front-end interns are taking online exams. Indeed, as a newbie, I’d better replenish my knowledge first. So Baidu Google searched the front-end written test questions for Alibaba's previous school recruitment, and felt that I was really despised and couldn't understand it at all. Ah, Alibaba's web front-end is an online written test. Does it give us the opportunity of Baidu and Google?

When I saw this question, I felt that I should encapsulate some of your commonly used methods, just like jquery. Making some methods to achieve browser compatibility or tools will indeed be beneficial to future development.

HTML

For convenience of explanation, we first write HTML

Copy code The code is as follows :

find me

also find me

We have omitted the css. Our focus is not on how to write the css style. What we want is to use javascript to find the node collection through the style name.

Method implemented

1 getElementsByClassName

Copy code The code is as follows:

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

The results that appear (firefox 27.0)



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



2 querySelectorAll

Copy code The code is as follows:

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

Let’s see what the result is? What's the difference with the above?



The second result is different. It turns out that if there are two querySelectorAll parameters, they must be separated by commas. In fact, it means that there is A style or B style. All nodes can be matched.

In fact, the compatibility of this method is not very good



Based on the above compatibility issues (after all, in China browser ie6/7/8 still accounts for Most of them), I might as well make a method to implement it myself.

3 queryNodesByClass

I think I should talk about my idea first

(1) First get each node of the entire page
(2) Traverse each node, Get its className string
(3) To operate the className string, first split it into an array with spaces, and then use an object to set its key to each array element, then the corresponding value is true
(4 )The problem now is to convert it into an array based on the parameters you passed in (for example, one parameter is "selector", two parameters are "selector_1 selector_2", and so on), and each array element is used as before. The key value of the object corresponding to the node className string. If it matches, it is true, if not, it is undefined.

Now we give our code

Copy the code The code is as follows:

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;
}

Copy code The code is as follows:

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;
}

Copy code The code is as follows:

function queryNodesByClass(classname){
//Idea (1)
var all = document.getElementsByTagName("*"),len = all.length,result = [];
var cname = StringToArray(classname);//Idea (4)
for(var i=0;i//The corresponding is Idea (3) is the role of the StringToObj method
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;
}