HTMLCollection과 NodeList의 차이점

6144 단어 codenewbiebeginnersjavascripthtml
요즘 DOM 조작을 위해 javascript로 작업하면서 두 가지 방법으로 클래스 이름으로 요소 그룹을 가져올 수 있다는 것을 깨달았습니다.
  • document.getElementsByClassName() ;
  • document.querySelectorAll() ;

    • 그러나 HTML에 있는 구조와 필요에 따라 사용해야 하기 때문에 그 중 어느 것도 다른 것보다 낫지 않습니다. 하지만! 각각의 출력을 고려하고 작동 방식을 이해하는 것이 중요합니다.

    이론



    MDN 문서에 따르면:

  • getElementsByClassName()은 주어진 클래스 이름이 모두 있는 모든 하위 요소의 배열과 같은 객체를 나타내는 라이브HTMLCollection를 반환합니다.

  • querySelectorAll()은 지정된 선택기 그룹과 일치하는 문서의 요소 목록을 나타내는 정적(라이브 아님)NodeList을 반환합니다.

    • 즉, 나는 도대체 a live HTMLCollection 및 a static NodeList 가 무엇을 의미하는지 스스로에게 질문했습니다. 거기에서이 차이점을 더 잘 설명하겠습니다.

    실습



    다음 HTML 구조를 살펴보겠습니다.

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Demo</title>
  </head>
  <body>
    <ul id="list">
      <li class="item">First Item</li>
      <li class="item">Second Item</li>
      <li class="item">Third Item</li>
    </ul>
    <script src="script.js"></script>
  </body>
</html>


    이제 위에서 언급한 두 가지 방법으로 클래스 이름item으로 항목을 가져옵니다.



    둘 다 클래스item에 필요한 모든 요소를 ​​가져온 것을 볼 수 있습니다. 그러나 반환된 데이터 구조에는 큰 차이가 있습니다.

    이제 목록에 새<li> 요소를 추가하고 script.js 파일에 자바스크립트 코드를 추가해 보겠습니다.

    //get UL element
const list = document.getElementById('list');

//Get items by class name (two ways)
const itemsByClassName = document.getElementsByClassName('item');
const itemsByQuerySelector = document.querySelectorAll('.item');

console.log('First console log', itemsByClassName, itemsByQuerySelector);

//adding the fourth element
list.innerHTML += `<li class="item">Fourth Item</li>`;

console.log('Second console log', itemsByClassName, itemsByQuerySelector);


    결과를 보자!



    새 항목이 목록에 추가된 것을 볼 수 있지만 HTMLCollection는 네 번째 항목으로 업데이트되었고 NodeList는 여전히 처음 세 개의 요소를 가지고 있지만 목록에 변경 사항이 있음을 인식하지 못했습니다. .

    따라서 이것이 HTMLCollection가 라이브 데이터 구조이고 NodeList가 정적 데이터 구조인 큰 이유입니다. 먼저 HTMLCollection는 메소드로 검색된 항목의 변경 사항을 감지할 때마다 자동으로 업데이트됩니다. 반면에 NodeList는 HTML에서 발생하는 변경 사항에 관계없이 실행한 순간부터 동일하게 유지됩니다.

    결론



    요약하면 자유롭게 사용하되 이 큰 차이를 고려하여 필요에 따라 어느 것이 더 적합한지 결정하십시오.

    자세한 내용은 다음 리소스를 확인하세요.
  • MDN Documentation: HTMLCollection
  • MDN Documentation: NodeList

    • 읽어 주셔서 감사합니다!
    aiohttp를 사용하여 REST API를 만드는 방법
    【Rails】update 액션이 통과하지 않는 이유를 잘못 검증해 온 이야기(update)

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage