page_javascript 스킬에서 클래스 테스트를 통해 모든 노드를 찾는 방법

머리말

알리바바, 웹 프론트엔드 인턴들이 온라인 시험을 치르고 있습니다. 사실, 초보자로서 먼저 지식을 보충하는 것이 좋습니다. 그래서 바이두 구글에서 알리바바의 전 학교 모집 프론트엔드 필기시험 문제를 검색해 보았는데, 제가 정말 멸시받고 전혀 이해할 수 없다는 느낌이 들었습니다. 아, 알리바바의 웹 프론트엔드는 온라인 필기시험이다. 바이두와 구글의 기회를 주는 것인가?

이 질문을 보고 jquery처럼 일반적으로 사용되는 메소드 중 일부를 캡슐화해야겠다는 생각이 들었습니다. 브라우저 호환성이나 도구를 달성하기 위한 몇 가지 방법을 만드는 것은 실제로 향후 개발에 도움이 될 것입니다.

HTML

설명의 편의를 위해 먼저 HTML을 작성합니다.

코드 복사 코드

나를 찾아주세요

나도 찾아주세요

🎜>

CSS를 생략했습니다. 우리가 원하는 것은 CSS 스타일을 작성하는 방법에 중점을 두지 않고 스타일 이름을 통해 노드 컬렉션을 찾는 것입니다.

구현된 메소드

1 getElementsByClassName

코드 복사 코드는 다음과 같습니다.

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

나타납니다 (firefox 27.0)



사실 위의 문제는 이 방법으로 해결할 수 있을 것 같은데, 호환성을 보니 다른 방법을 찾아야 할 것 같습니다.



2 querySelectorAll

코드 복사 코드는 다음과 같습니다. 다음은 다음과 같습니다.

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

결과는 어떨지 볼까요? 위의 내용과 차이점이 무엇인가요?



두 번째 결과가 다릅니다. querySelectorAll 매개변수가 2개인 경우 실제로는 A 스타일 또는 쉼표로 구분해야 합니다. B 스타일. 모든 노드가 일치할 수 있습니다.

사실 이 방법의 호환성은 별로 좋지 않습니다



위의 호환성 문제를 토대로 (결국 중국 브라우저 ie6/7/에서는 8이 여전히 대부분을 차지하므로 직접 구현하는 방법을 만드는 것이 좋습니다.

3 queryNodesByClass

먼저 내 아이디어에 대해 이야기해야 할 것 같아요

(1) 먼저 전체 페이지의 각 노드를 가져옵니다
(2) 각 노드를 순회하고, className 문자열 가져오기
(3) className 문자열을 작동하려면 먼저 공백이 있는 배열로 분할한 다음 객체를 사용하여 해당 키를 각 배열 요소에 설정하면 해당 값이 true입니다.
(4 ) 이제 문제는 전달한 매개변수를 기반으로 배열로 변환하는 것입니다(예: 한 매개변수는 "selector"이고 두 매개변수는 "selector_1 selector_2" 등). 각 배열 요소는 이전과 같이 사용됩니다. . 노드 className 문자열에 해당하는 객체의 키 값입니다. 일치하면 true이고, 그렇지 않으면 정의되지 않습니다.

이제 코드를 제공합니다

코드 복사 코드는 다음과 같습니다.

function StringToObj(string){

var arr = string.split(" ").sort();
var result = {}
for(var i=arr.length-1; arr [i];i--){
result[arr[i]] = true
}
결과 반환
}

코드 복사 코드는 다음과 같습니다.

function StringToArray(string){

var arr = string.split( " "). sort();
var result = [];
for(var i=arr.length-1;arr[i];i--){
result.push(arr[ i]);
결과 반환
}

코드 복사

코드는 다음과 같습니다.

function queryNodesByClass(classname){
//Idea (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]) ;
}}
결과 반환
}