querySelector 및 querySelectorAll vs JavaScript의 getElementsByClassName 및 getElementById

Question

querySelector과 querySelectorAll의 차이점은 getElementsByClassName과 getElementById인데 정확히 알고 싶습니다. this link에서

나는 querySelector와 내가 ID myid와 요소를 얻을 클래스 myclass 및 document.querySelector("#myid")을 가진 요소를 얻을 수 document.querySelector(".myclass")을 쓸 수 있다는 것을 수집 할 수있다. 하지만 이미 getElementsByClassName과 getElementById을 할 수 있습니다. 어느 것이 더 선호되어야 하는가?

또한에서 작업하며 ID는 콜론으로 동적으로 생성되며 view:_id1:inputText1처럼 보입니다. 그래서 document.querySelector("#view:_id1:inputText1")이라고 쓰면 작동하지 않습니다. 그러나 document.getElementById("view:_id1:inputText1")을 쓰면 작동합니다. 어떤 아이디어?

Answer 1

getElementsByClassName 및 getElementById에 대한 querySelector와 querySelectorAll의 차이점을 정확히 알고 싶습니다.

구문과 브라우저가 지원됩니다.

querySelector은 더 복잡한 선택기를 사용하려는 경우에 더 유용합니다.

.foo li

document.querySelector ("#보기 : _id1 : inputText1")가 작동하지 않습니다 foo는 클래스의 구성원 인 요소의 후손 모든 목록 항목. 그러나 document.getElementById ("view : _id1 : inputText1")를 작성하는 것이 효과적입니다. 어떤 아이디어?

: 문자는 선택자 안에 특별한 의미가 있습니다. 당신은 그것을 벗어나야합니다. (선택기 이스케이프 문자는 JS 문자열에서도 특별한 의미를 가지므로 도도 이스케이프 처리해야합니다.

document.querySelector("#view\\:_id1\\:inputText1") 

Answer 2

querySelector 및 querySelectorAll는 getElementById 및 getElementsByClassName 반면에 많은 이상 우리와 함께 한 비교적 새로운 API입니다. 즉, 사용하는 브라우저는 대부분 어떤 브라우저를 지원해야하는지에 따라 달라집니다.

:은 특별한 의미가 있으므로 ID/클래스 이름의 일부로 사용해야하는 경우 이스케이프 처리해야합니다.

Answer 3

querySelector (3) -Selector 함께이 같은 ID와 클래스와 의사 클래스와 완벽한 CSS 될 수 있습니다 getElementByClassName와

'#id.class:pseudo' 

// or 

'tag #id .class .class.class' 

그냥 클래스를 정의 할 수 있습니다

'class' 

와 getElementById ID를 정의 할 수 있습니다.

'id' 

Answer 4

querySelector

제 매칭 소자를 반환 Mozilla Documentation:

에서 NodeSelector 인터페이스 이 사양은, DocumentFragment가, 또는 요소 인터페이스 문서 구현 물체에 두 개의 새로운 메서드가 추가 수집210 노드 하위 트리 내의 노드. 일치하는 노드가 없으면 null이 리턴됩니다. 더 일치가 발견되지 않으면 querySelectorAll

는 노드의 서브 트리 내에서 일치하는 모든 요소 노드를 포함하는 NodeList를, 또는 빈 NodeList를 돌려줍니다.

및

참고 : 살입니다 querySelectorAll()에 의해 반환 된 노드 목록. 라이브 노드 목록을 반환하는 다른 DOM 쿼리 메서드와 다른 입니다.

Answer 5

차이점에 대해서는 querySelectorAll과 getElementsByClassName 사이의 결과에 중요한 값이 있습니다. 반환 값이 다릅니다. 은 정적 컬렉션을 반환하고 getElementsByClassName은 라이브 컬렉션을 반환합니다.

• querySelectorAll로 생성 된 변수는 방법은를 호출 된 순간에 선택 을 충족 요소를 포함합니다 : 당신이 나중에 사용하기 위해 변수에 결과를 저장하는 경우이 혼란으로 이어질 수 있습니다.
• getElementsByClassName으로 생성 된 변수에는 (메서드 호출시와 다를 수 있음)이 사용될 때 셀렉터를 충족하는 요소가 포함됩니다.
예를 들어

, 클래스를 업데이트 한 후이 변수 aux1 및 aux2를 재 할당하지 않은 경우에도, 서로 다른 값을 포함하는 방법주의 사항 :

// storing all the elements with class "blue" using the two methods 
 
var aux1 = document.querySelectorAll(".blue"); 
 
var aux2 = document.getElementsByClassName("blue"); 
 

 
// write the number of elements in each array (values match) 
 
console.log("Number of elements with querySelectorAll = " + aux1.length); 
 
console.log("Number of elements with getElementsByClassName = " + aux2.length); 
 

 
// change one element's class to "blue" 
 
document.getElementById("div1").className = "blue"; 
 

 
// write the number of elements in each array (values differ) 
 
console.log("Number of elements with querySelectorAll = " + aux1.length); 
 
console.log("Number of elements with getElementsByClassName = " + aux2.length);

.red { color:red; } 
 
.green { color:green; } 
 
.blue { color:blue; }

<div id="div0" class="blue">Blue</div> 
 
<div id="div1" class="red">Red</div> 
 
<div id="div2" class="green">Green</div>

Answer 6

내가이 온 페이지를 순전히 성능의 측면에서 사용하는 더 나은 방법을 찾으려면 - 즉 빠르게 :

,693,210

나는이 발견 https://jsperf.com/getelementsbyclassname-vs-queryselectorall/18

그것은 위의 2 × 예제에서 테스트를 실행, 플러스 그것뿐만 아니라 jQuery의 상응하는 선택에 대한 테스트에 척을.

getElementsByClassName = 1,138,018 operations/sec - <<< clear winner 
querySelectorAll = 39,033 operations/sec 
jquery select = 381,648 operations/sec