자바 스크립트 querySelector 대 getElementById [닫힌]

122

querySelector& querySelectorAll가 DOM요소 를 선택하는 새로운 방법 이라고 들었습니다 . 그들은 어떻게 기존의 방법에 비해, 않습니다 getElementById및 getElementsByClassName성능과 브라우저 지원의 측면에서?

성능은 jQuery의 쿼리 선택기를 사용하는 것과 어떻게 비교됩니까?

사용할 기본 집합에 대한 모범 사례 권장 사항이 있습니까?

javascript jquery dom

— goesToEleven
소스

더 잘 정의하십시오. 거의 완전히 다릅니다.

이것은 "단일 크기의 스패너가 조절 식 스패너보다 낫습니까?"라고 묻는 것과 같습니다. 대답은 : 그들은 더 강력하고 유연하며 매우 뛰어난 많은 경우에 있지만, getElementById그리고 getElementsByClassName아직 이름이 설명하는 목적에 이상적입니다.

— lonesomeday

아, qS/qSA모든 요소 컨텍스트에서 사용할 gEBI수 있지만 컨텍스트 에서만 사용할 수 있습니다 document.

getElementByIdid속성을 일치시켜 DOM 노드를 찾는 반면 querySelector선택기로 검색합니다. 그래서 잘못된 선택 등을 위해 <div id="1"></div>, getElementById('1')동안 일하는 것이 querySelector('#1')실패하면 일치하도록 지시하지 않는 한, id(예를 들어 속성을 querySelector('[id="1"]').

— 사무엘 ELH

그냥 참고로 사람이 읽을 수 있지만, querySelector그리고 querySelectorAll완벽하게 지원됩니다. caniuse.com/#feat=queryselector

— Telarian

답변:

131

"Better"는 주관적입니다.

querySelector 최신 기능입니다.

getElementById 보다 나은 지원 querySelector .

querySelector 보다 나은 지원 getElementsByClassName .

querySelectorgetElementById및 로 표현할 수없는 규칙이있는 요소를 찾을 수 있습니다.getElementsByClassName

주어진 작업에 적합한 도구를 선택해야합니다.

(위에서 querySelector읽기 querySelector/ querySelectorAll).

— 쿠엔틴
소스

querySelector 지원 : caniuse.com/#feat=queryselector

— tazboy

@JasonVanDerMeijden — 중요하지 않을 것 같으며 브라우저마다 다를 수 있습니다.

— Quentin

아주 좋은 답변 여기에는 몇 가지 벤치 마크 테스트

— angel.bonev

왜 더 나은 순서를 지원 : getElementById> querySelector> getElementsByClassName, 내가 생각했기 때문에 getElementsByClassName같은 수준의 지원을해야한다 getElementById?

— Lei Yang

이 답변은 방법 간의 차이점, 특히 성능 측면에서 다루지 않는 것 같습니다.

— Dror Bar

기능 getElementById과는 getElementsByClassName매우 다릅니다 동안 querySelector과querySelectorAll 더 정교하다. 제 생각에는 실제로 성능이 더 나빠질 것입니다.

또한 대상 브라우저에서 각 기능의 지원 여부를 확인해야합니다. 최신 버전 일수록 지원이 부족하거나 기능이 "버그"될 가능성이 높습니다.

— 티아고 네그리
소스

@thomas 귀하의 링크가 다운되었습니다. 어디에서나 작동하는 링크가 있습니까?

— user5508297 2016-08-04

몇 가지 아카이브 버전이 있습니다. web.archive.org/web/20160108040024/http://jsperf.com/… 그러나 테스트는 실제로 매우 오래되었습니다 (2010). 따라서 최신 엔진에서는 결과가 매우 다를 수 있습니다.

— 토마스

보관 된 페이지는 실제로 동적이며 현재 브라우저에서 테스트를 다시 실행할 수 있습니다. 내 브라우저에서 querySelectorAll은 여전히 약 37 % 정도 느립니다. (Chrome 71-vgy.me/TwGL3o.png ) getElementById가 라이브 결과를 반환한다는 점도 주목할 가치가 있습니다. 즉, DOM을 변경하면 getElementByID (범위에있는 경우)에서 얻은 결과에 의해 변경 사항이 반영되는 반면 노드 목록은 querySelectorAll에 의해 반환되는 것은 스냅 샷입니다. 예를 들어 호출이 수행 된 시점에 있었던 것과 같은 결과는 DOM에 대한 후속 변경 사항을 반영하지 않습니다.

— W.Prins

nodelist ... is not live그것에 대한 문서를 제공 할 수 있습니까? @ W.Prins 두 메서드 모두 Element형식을 반환합니다 .

— Maximilian Burszley

아, 오타를 봤습니다. 죄송합니다. 내가 "getElementByID"를 작성한 곳에 "getElementsByClassName"을 작성 했어야합니다. 예를 들어 라이브 결과 집합을 반환하는 getElementsByClassName (및 유사)입니다. "실제로 getElementsByClassName과 querySelectorAll은 모두 NodeList를 반환하지만 전자의 경우 라이브이고 후자의 경우 스냅 샷입니다

— W.Prins