JavaScript에서 querySelector와 querySelectorAll, getElementsByClassName과 getElementById의 차이점

Question

querySelector와 querySelectorAll, getElementsByClassName과 getElementById의 차이점이 정확히 무엇인지 알고 싶습니다. 이 링크에서 나는 querySelector를 사용하여 document.querySelector(".myclass")를 작성하여 클래스 이름이 myclass인 요소를 가져올 수 있고 document.querySelector(

P粉008829791 · Answer

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

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

주요 차이점

querySelector*는 단순한 ID, 태그 또는 클래스뿐만 아니라 모든 CSS3 선택기를 전달할 수 있으므로 더 유연합니다.
querySelector*의 성능은 호출하는 DOM의 크기에 따라 다릅니다. 정확하게 말하면 querySelector* 호출은 O(n) 시간에 실행되는 반면, getElement* 호출은 O(1) 시간에 실행됩니다. 여기서 n은 호출이 이루어진 요소 또는 문서의 모든 하위 요소의 총 개수입니다.
이러한 통화의 반환 유형은 다릅니다. querySelector和getElementById都返回单个元素。querySelectorAll和getElementsByName都返回NodeList。getElementsByClassName和getElementsByTagName둘 다 HTMLCollection을 반환합니다. NodeList와 HTMLCollection은 모두 요소 컬렉션이라고 합니다.
컬렉션은 각각 "라이브" 또는 "정적" 컬렉션을 반환할 수 있습니다. 이는 반환되는 실제 유형에 반영되지 않습니다. 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* 호출이 선호됩니다.

P粉238355860 · Answer

구문 및 브라우저 지원.

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

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

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

으아악

JavaScript에서 querySelector와 querySelectorAll, getElementsByClassName과 getElementById의 차이점

모든 응답(2)나는 대답할 것이다

주요 차이점

세부 정보, 팁, 예시