Preface
Alibaba, the web front-end interns are going to take the online exam. Indeed, I would like to add some knowledge to the rookie. So Baidu and Google had the previous front-end written test questions for Alibaba's campus recruitment, and felt that they were really despised and could not understand them at all. Ah, Ribaba’s web front-end is an online written test. Does it give us a chance to Baidu and Google?
When I saw this question, I felt that I should indeed encapsulate some of your commonly used methods, just like jquery. Some methods are made to achieve browser compatibility or tool classes, which are indeed beneficial to future development.
HTML
For the sake of explanation, let's write down HTML first
The code copy is as follows:
<p>find me</p>
<div>also find me</div>
We omitted css. Our focus is not on how to write css styles. What we want is to use JavaScript to find node collections through style names.
Methods of implementation
1 getElementsByClassName
The code copy is as follows:
console.log(document.getElementsByClassName("A"));
console.log(document.getElementsByClassName("AB"));
Results 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 it should be better to find another method.
2 querySelectorAll
The code copy 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 from the above?
The result of the second one is different. It turns out that if there are two querySelectorAll parameters, they should be separated by commas. In fact, it means that nodes with A or B styles can match.
Actually, the compatibility of this method is not very good
Based on the above compatibility issues (after all, I still account for the majority of the Chinese browser ie6/7/8), I might as well do a way to achieve it myself.
3 queryNodesByClass
I think I should talk about my ideas first
(1) Get the entire page first
(2) Iterate through each node and get its className string
(3) Operate the className string, first divide it into an array with spaces, then use an object to set its key to each array element, then the corresponding value is true
(4) The problem now is based on the parameters you passed in (for example, one parameter is "selector", two are "selector_1 selector_2", and so on), and then convert it into an array, and each array element is used as Previously, the key value of the object corresponding to the className string in our node before, if it matches, it is true, and if it doesn't, it is undefined.
Now we give our code
The code copy 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;
}
The code copy 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;
}
The code copy is as follows:
function queryNodesByClass(classname){
//Thoughts (1)
var all = document.getElementsByTagName("*"),len = all.length,result = [];
var cname = StringToArray(classname);//Thoughts (4)
for(var i=0;i<len;i++){//Transfer the corresponding ideas of each node (2)
//The corresponding is the idea (3), that is, the role of the StringToObj method
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;
}