이 답변을 위해querySelector和querySelectorAll称为querySelector*，将getElementById、getElementsByClassName、getElementsByTagName和getElementsByNamegetElement*를 호출하겠습니다.

이 정보의 대부분은 사양에서 확인할 수 있으며, 그 중 대부분은 제가 작성하는 동안 실행한 다양한 벤치마크에서 파생되었습니다. 사양:https://dom.spec.whatwg.org/

주요 차이점

1. querySelector*는 단순한 ID, 태그 또는 클래스뿐만 아니라 모든 CSS3 선택기를 전달할 수 있으므로 더 유연합니다.
2. querySelector*의 성능은 호출하는 DOM의 크기에 따라 다릅니다. 정확하게 말하면 querySelector* 호출은 O(n) 시간에 실행되는 반면, getElement* 호출은 O(1) 시간에 실행됩니다. 여기서 n은 호출이 이루어진 요소 또는 문서의 모든 하위 요소의 총 개수입니다.
3. 이러한 통화의 반환 유형은 다릅니다.querySelector和getElementById都返回单个元素。querySelectorAll和getElementsByName都返回NodeList。getElementsByClassName和getElementsByTagName둘 다 HTMLCollection을 반환합니다. NodeList와 HTMLCollection은 모두 요소 컬렉션이라고 합니다.
4. 컬렉션은 각각 "라이브" 또는 "정적" 컬렉션을 반환할 수 있습니다. 이는 반환되는 실제 유형에 반영되지 않습니다. getElements* 호출은 라이브 컬렉션을 반환하는 반면, querySelectorAll은 정적 컬렉션을 반환합니다. 내가 이해한 바로는 라이브 컬렉션에는 DOM의 요소에 대한 참조가 포함되어 있고 정적 컬렉션에는 요소의 복사본이 포함되어 있습니다. 다른 관점에 대해서는 아래 @Jan Feldmann의 의견을 확인할 수도 있습니다. 나는 이것을 내 답변에 통합하는 좋은 방법을 찾지 못했지만 더 정확한 이해가 될 수 있습니다.

이러한 개념은 아래 표에 요약되어 있습니다.

세부 정보, 팁, 예시

• HTMLCollection은 NodeList처럼 배열과 유사하지 않으며 .forEach()를 지원하지 않습니다. 이 문제를 해결하는 데 스프레드 연산자가 유용하다는 것을 알았습니다.

  [...document.getElementsByClassName("someClass")].forEach()

• 각 요소에 대해 전 세계적으로 구현됩니다document都可以访问所有这些函数，除了getElementById和getElementsByName，它们只在document.

• querySelector* 대신 getElement* 호출을 연결하면 특히 대규모 DOM에서 성능이 향상됩니다. 일반적으로 작은 DOM 및/또는 매우 긴 체인에서도 더 빠릅니다. 그러나 성능이 필요하다는 것을 알지 못하는 한 querySelector*의 가독성이 가독성보다 우선되어야 합니다.querySelectorAll모든 단계에서 NodeList 또는 HTMLCollection에서 요소를 선택해야 하기 때문에 일반적으로 재정의하기가 더 어렵습니다. 예를 들어, 다음 코드는 작동하지 않습니다:

  document.getElementsByClassName("someClass").getElementsByTagName("div")

  컬렉션이 아닌 단일 요소에만 getElements*를 사용할 수 있기 때문에 하나의 요소만 원하는 경우:

  document.querySelector("#someId .someClass div")

  다음과 같이 쓸 수 있습니다:

  document.getElementById("someId").getElementsByClassName("someClass")[0].getElementsByTagName("div")[0]

  컬렉션을 반환하는 각 단계에서[0]，以获取集合的第一个元素，最终结果只有一个元素，就像使用querySelector를 동일하게 사용한다는 점에 유의하세요.

• querySelector* 및 getElement*를 사용하여 모든 요소를 호출할 수 있으므로 두 호출을 모두 사용하여 작업을 연결하는 것이 가능합니다. 이는 성능 향상을 원하지만 getElement* 호출로 작성할 수 없는 querySelector 사용을 피할 수 없을 때 유용합니다. .

• 일반적으로 getElement* 호출만 사용하여 선택기를 작성할 수 있는지 여부를 쉽게 알 수 있지만 명확하지 않은 경우가 하나 있습니다.

  document.querySelectorAll(".class1.class2")

  는

  로 다시 쓸 수 있습니다.

  document.getElementsByClassName("class1 class2")

• querySelector*로 얻은 정적 요소에 getElement*를 사용하면 해당 요소는 querySelector에서 복사한 정적 DOM 하위 집합에 대해서는 동적이 되지만 전체 문서 DOM에 대해서는 정적이 됩니다. 이것이 바로 간단한 동적/정적 요소입니다. 설명이 무너지기 시작하는 곳. 이에 대해 걱정해야 하는 상황을 피하려고 노력해야 하지만, 그런 상황이 존재하는 경우 querySelector* 호출은 참조를 반환하기 전에 찾은 요소를 복사하는 반면, getElement* 호출은 복사하지 않고 직접 참조를 가져옵니다.

• querySelector* 및getElementById以前序、深度优先的方式遍历元素，在规范中称为“树顺序”。对于其他getElement*调用，从规范中我无法确定它们是否与树顺序相同，但getElementsByClassName(".someClass")[0]可能在每个浏览器中结果不可靠。getElementById("#someId")는 페이지에 동일한 ID의 복사본이 여러 개 있는 경우에도 신뢰할 수 있어야 합니다.

• 무한 스크롤 페이지 작업을 하다가 이 문제를 조사하게 되었는데, 성능이 문제가 되는 일반적인 상황이 아닐까 생각했습니다. querySelectorAll 호출이 포함된 코드에 onScroll 이벤트가 있습니다. 호출 속도가 제한되어 있더라도 너무 멀리 스크롤하면 페이지가 중단되며, 이 시점에서 브라우저가 따라잡기에는 너무 많은 요소를 반복하는 호출이 너무 많아지게 됩니다. DOM의 크기는 이 사용 사례와 관련이 있으므로 무한 스크롤 페이지에서 실행되는 코드에서는 getElement* 호출이 선호됩니다.

구문 및 브라우저 지원.

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

예를 들어 foo 클래스에 속하는 모든 요소의 목록은 다음과 같습니다..foo li

:문자는 선택기에서 특별한 의미를 갖습니다. 당신은 그것을 탈출해야합니다. (선택기 이스케이프 문자도 JS 문자열에서 특별한 의미를 가지므로it도 이스케이프해야 합니다.)