머리말
Alibaba, 웹 프론트 엔드 인턴은 온라인 시험을 치러야합니다. 실제로, 나는 신인에게 약간의 지식을 추가하고 싶습니다. 따라서 Baidu와 Google은 Alibaba의 캠퍼스 모집에 대한 이전의 프론트 엔드 서면 시험 질문을 가졌으며 실제로 멸시 당하고 전혀 이해할 수 없다고 생각했습니다. 아, Ribaba의 웹 프론트 엔드는 온라인 서면 테스트입니다.
이 질문을 보았을 때, 나는 jQuery와 같이 일반적으로 사용되는 방법 중 일부를 실제로 캡슐화해야한다고 생각했습니다. 일부 방법은 브라우저 호환성 또는 도구 클래스를 달성하기 위해 만들어졌으며, 이는 실제로 향후 개발에 유리합니다.
HTML
설명을 위해 먼저 HTML을 적어 봅시다
코드 사본은 다음과 같습니다.
<p> 나를 찾으십시오 </p>
<div> 또한 나를 찾으십시오 </div>
우리는 CSS를 생략했습니다. 우리의 초점은 CSS 스타일을 작성하는 방법이 아닙니다.
구현 방법
1 getElementsByClassName
코드 사본은 다음과 같습니다.
console.log (document.getElementsByClassName ( "a"));
console.log (document.getElementsByClassName ( "ab"));
결과가 나타납니다 (Firefox 27.0)
실제로이 방법은 위의 문제를 해결할 수 있어야한다고 생각하지만 호환성을 살펴본 후 다른 방법을 찾는 것이 더 나을 것이라고 생각합니다.
2 QuerySelectorALL
코드 사본은 다음과 같습니다.
console.log (document.querySelectorAll ( ".A"));
console.log (document.querySelectorAll ( ".B, .a"));
결과가 무엇인지 봅시다. 위의 차이점은 무엇입니까?
두 번째는 QuerySelectorall 매개 변수가 있으면 실제로 AR 또는 B 스타일을 가진 노드가 일치 할 수 있음을 의미합니다.
실제로이 방법의 호환성은 그리 좋지 않습니다.
위의 호환성 문제를 바탕으로 (결국, 나는 여전히 중국 브라우저 IE6/7/8의 대다수를 설명하더라도, 나는 그것을 직접 달성하는 방법을 할 수도 있습니다.
3 QueryNodesbyClass
내 아이디어에 대해 먼저 이야기해야한다고 생각합니다
(1) 전체 페이지를 먼저 받으십시오
(2) 각 노드를 반복하고 클래스 이름 문자열을 가져옵니다.
(3) 클래스 이름 문자열을 작동하고 먼저 공백이있는 배열로 나눈 다음 객체를 사용하여 각 배열 요소에 키를 설정 한 다음 해당 값이 True입니다.
(4) 이제 문제는 당신이 전달한 매개 변수를 기반으로합니다 (예 : 하나의 매개 변수는 "selector", 두 개는 "selector_1 selector_2"등을 배열로 변환하고 각 배열 요소는 다음과 같습니다. 이전과 같이 사용되면, 이전에 노드의 클래스 이름 문자열에 해당하는 객체의 키 값은 일치하는 경우 사실이며, 그렇지 않은 경우 정의되지 않습니다.
이제 우리는 코드를 제공합니다
코드 사본은 다음과 같습니다.
함수 stringtoobj (String) {
var arr = string.split ( "") .sort ();
var result = {};
for (var i = arr.length-1; arr [i]; i-) {
결과 [arr [i]] = true;
}
반환 결과;
}
코드 사본은 다음과 같습니다.
함수 stringToArray (String) {
var arr = string.split ( "") .sort ();
var result = [];
for (var i = arr.length-1; arr [i]; i-) {
result.push (arr [i]);
}
반환 결과;
}
코드 사본은 다음과 같습니다.
함수 QueryNodesByClass (className) {
// 생각 (1)
var all = document.getElementsByTagName ( "*"), len = all.length, result = [];
var cname = StringToArray (className); // 생각 (4)
for (var i = 0; i <len; i ++) {// 각 노드의 해당 아이디어를 전송 (2)
// 해당은 아이디어 (3), 즉 StringToObj 메소드의 역할입니다.
var dom_cname = stringtuobj (모두 [i] .classname), cname_len = cname.length;
for (var j = 0; j <cname_len; j ++) {
if (! dom_cname [cname [j]])
부서지다;
}
if (j == cname_len)
{
result.push (모두 [i]);
}}
반환 결과;
}