querySelectorAll을 사용하여 해당 클래스 이름을 가진 모든 요소를 ​​가져옵니다.

Question

전 9 개월 전 jquery를 돌았으며 선택기 엔진이 필요했습니다 (번거 로움없이 < 7 지원) 그래서이 기능을 만들어 document.querySelectorAll의 단순화 된 버전을했다 : 이것은 시간의 95 %에 완벽하게 잘 작동

// "qsa" stands for: "querySelectorAll" 
window.qsa = function (el) { 
    var result = document.querySelectorAll(el)[0]; 
    return result; 
}; 

을하지만, W3C에 나는 잠시 동안이 문제를 지금 했어 내가 MDN을 연구 한 , 그래서 잊지 않기 위해 Google :) 아직 요청한 클래스의 첫 번째 요소 만 얻는 이유에 대한 답을 아직 찾지 못했습니다. 그리고 반환되는 첫 번째 요소는 끝에있는 "[0]"으로 인해 발생하지만 함수를 제거하면 인덱스 변수를 사용하여 for 루프를 만들려고했습니다. 이 같은 클래스와 요소의 길이에 따라 값의 증가 : 지금은 시작 했어하여

window.qsa = function (el) { 
    var result, i = 0, el = document.querySelectorAll(el); 
    while(i < el.length) { 
    i++; 
    } 
    result = el[i]; 
    return result; 
}; 

: 그래서 작동하지 않았다

window.qsa = function (el) { 
    var result, el = document.querySelectorAll(el); 
    for(var i = 0; i < el.length; ++i) { 
    result = el[i]; 
    } 
    return result; 
}; 

다시는이 같은 while 루프를 시도 아무것도 작동하는지 궁금해? 나는 document.querySelectorAll ... 하지만 내 고집 내부 - 자기가 가고 계속 매우 좌절 점점 그리고 난 (계층화주기) 실패 계속 그래서 지금은 정말이 질문에 질문하는 시간임을 알고

을 왜 모든 클래스가 아닌 첫 번째 요소 만 반환하는 것입니까?

왜 for 루프가 실패합니까?

while 루프가 작동하지 않는 이유는 무엇입니까?

모든/모든 도움을 많이 주셔서 감사합니다.

Answer 1

단일 요소를 반환합니다. 배열을 반환 할 수 있습니다. 한 번에 모든 요소에 대해 작업 할 수 있기를 원한다면 jQuery 스타일로 함수에 콜백을 전달할 수 있습니다.

window.qsa = function(query, callback) { 
 
    var els = document.querySelectorAll(query); 
 
    if (typeof callback == 'function') { 
 
     for (var i = 0; i < els.length; ++i) { 
 
      callback.call(els[i], els[i], i); 
 
     } 
 
    } 
 
    return els; 
 
}; 
 

 

 
qsa('button.change-all', function(btn) { 
 
    // You can reference the element using the first parameter 
 
    btn.addEventListener('click', function(){ 
 
     qsa('p', function(p, index){ 
 
      // Or you can reference the element using `this` 
 
      this.innerHTML = 'Changed ' + index; 
 
     }); 
 
    }); 
 
}); 
 

 
qsa('button.change-second', function(btn) { 
 
    btn.addEventListener('click', function(){ 
 
     var second = qsa('p')[1]; 
 
     second.innerHTML = 'Changed just the second one'; 
 
    }); 
 
});

<p>One</p> 
 
<p>Two</p> 
 
<p>Three</p> 
 

 
<button class='change-all'>Change Paragraphs</button> 
 
<button class='change-second'>Change Second Paragraph</button>

그럼 당신은 전화 중 하나를 사용하는 콜백

qsa('P', function(){ 
    this.innerHTML = 'test'; 
}); 

또는 당신은 그것을 어떻게 사용되고 있는지

var pList = qsa('p'); 
var p1 = pList[0]; 

Answer 2

왜 모든 클래스가 아닌 첫 번째 요소 만 반환합니까?

명시 적으로 결과에서 첫 번째 요소를 가져 와서이를 반환하기 때문입니다.

왜 for 루프가 실패합니까?

루프가 끝날 때마다 result을 새 값으로 덮어 쓰기 때문에 그런 다음 마지막으로 얻은 것을 돌려줍니다.

while 루프가 작동하지 않는 이유는 무엇입니까?

같은 이유.

return document.querySelectorAll(el) 

당신에게 모든 요소를 ​​포함한 NodeList의 객체를 줄 것이다 : 당신이 모든 요소를 ​​원하는 경우

---

는, 당신은 단지 기능을 실행의 결과를 얻을.

---

는 이제 당신이 (당신이 생각하는 이유 즉, 그것은 작동하지 않습니다) 나는 당신의 진짜 문제가 무엇인지에 대해 추측거야, 당신이 원하는 말을한다.

당신은 우리가 그 기능을 실행 한 결과에 대해 우리에게 보여주지 못했지만 제 생각에 당신은 그것을 요소처럼 취급하려고합니다.

요소가 아닙니다. 배열과 같은 NodeList입니다. 다음에이, 당신은 NodeList를의 모든 요소의 배경색을 변경하려면

element.style.backgroundColor = "red"; 

:

당신은, 예를 들어, 당신이 할 수있는 요소의 배경색을 변경하고자한다면 각각의 배경색을 으로 바꿉니다.

for (var i = 0; i < node_list.length; i++) { 
    var element = node_list[i]; 
    element.style.backgroundColor = "red"; 
} 

Answer 3

이 루프

for(var i = 0; i < el.length; ++i) { 
result = el[i]; 
} 

변수 당신의 결과 때마다 덮어 씁니다. 그래서 항상 하나의 요소 만 얻습니다.

결과를 외부로 사용할 수 있으며 반복 할 수 있습니다. 비슷합니다.

var result = window.qsa(el) 
for(var i = 0; i < result.length; ++i) { 
    var workOn = result[i]; 
    // Do something with workOn 
}