귀하의 기사 내용과 일치하는 영어 Q&A 질문 제목은 다음과 같습니다. 좀 더 간결한 제목: * HTMLCollection, NodeList 및 DOM 개체 배열의 차이점은 무엇입니까? * DOM 컬렉션: HTMLCollections, NodeLists 및 Arrays - What\'s t

HTMLCollection, NodeList 및 DOM 개체 배열의 차이점 이해

DOM 작업 시 세 가지 주요 컬렉션 유형이 사용됩니다. NodeList 및 객체 배열. 이러한 각 컬렉션은 특정 목적을 수행하며 고유한 특성을 가지고 있습니다.

HTMLCollections와 NodeLists

HTMLCollections는 특정 태그 이름과 일치하는 HTML 요소 컬렉션을 나타냅니다. 이는 Document 객체의 getElementsByTagName() 메서드에 의해 반환됩니다. HTMLCollection은 라이브이므로 DOM에 대한 모든 변경 사항을 자동으로 반영합니다. 또한 인덱스를 통해 개별 요소에 직접 액세스할 수 있습니다.

NodeLists는 모든 유형의 노드(HTML 요소, 텍스트 노드 및 주석 포함)의 컬렉션입니다. querySelectorAll() 및 childNodes()와 같은 다양한 DOM 메서드에 의해 반환됩니다. NodeList는 정적입니다. 즉, 명시적으로 업데이트되지 않는 한 DOM의 변경 사항을 반영하지 않습니다.

jQuery 개체와 HTMLCollections 및 NodeList

jQuery 개체는 HTMLCollections와 직접적인 관련이 없습니다. 또는 NodeList. jQuery 객체는 DOM 선택을 캡슐화하는 JavaScript 객체입니다. 이는 DOM 요소를 조작하고 jQuery의 풍부한 API를 사용하여 해당 기능을 향상시키기 위한 편리한 인터페이스를 제공합니다.

jQuery 선택에는 요소, 텍스트 노드 또는 기타 유형의 Node가 포함될 수 있습니다. NodeList와 마찬가지로 jQuery 선택은 정적입니다. 그러나 jQuery의 $(...).live() 메서드를 사용하여 라이브 HTMLCollection으로 변환할 수 있습니다.

JavaScript 배열 및 컬렉션

HTMLCollections 및 NodeList 외에도 다음을 생성할 수도 있습니다. JavaScript의 객체 배열. 예를 들어 다음과 같이 DOM 요소를 배열에 저장할 수 있습니다.

<code class="javascript">const elements = [document.getElementById("myElement1"), document.getElementById("myElement2")];</code>

JavaScript의 배열은 동적이며 DOM에 대한 변경 사항을 반영하지 않습니다. 또한 HTMLCollections 또는 jQuery 객체와 같은 특정 메서드에 대한 액세스를 제공하지 않습니다.

예 및 데모

다음 스크립트는 이러한 컬렉션 유형 간의 주요 차이점을 보여줍니다.

<code class="javascript">$(function(){
    console.log('[123,&quot;abc&quot;,321,&quot;cba&quot;]=',[123,&quot;abc&quot;,321,&quot;cba&quot;]);
    console.log('{123:123,abc:&quot;abc&quot;,321:321,cba:&quot;cba&quot;}=',{123:123,abc:&quot;abc&quot;,321:321,cba:&quot;cba&quot;});
    console.log('Node=',Node);
    console.log('document.links=',document.links);
    console.log('document.getElementById(&quot;myTable&quot;)=',document.getElementById(&quot;myTable&quot;));
    console.log('document.getElementsByClassName(&quot;myRow&quot;)=',document.getElementsByClassName(&quot;myRow&quot;))
    console.log('document.getElementsByTagName(&quot;td&quot;)=',document.getElementsByTagName(&quot;td&quot;));
    console.log('$(&quot;#myTable&quot;)=',$(&quot;#myTable&quot;));
    console.log('$(&quot;td&quot;)=',$(&quot;td&quot;));
});</code>

이 스크립트는 다음 출력을 기록합니다.

[123,"abc",321,"cba"]=[123, "abc", 321, "cba"]
{123:123,abc:"abc",321:321,cba:"cba"}=Object { 123=123, abc="abc", 321=321, more...}
Node= undefined
document.links= HTMLCollection[a #, a #]
document.getElementById("myTable")= <table>
document.getElementsByClassName("myRow")= HTMLCollection[tr.myRow, tr.myRow]
document.getElementsByTagName("td")= HTMLCollection[td, td, td, td]
jQuery("#myTable")= [table#myTable]
jQuery("td")= [td, td, td, td]

위 내용은 귀하의 기사 내용과 일치하는 영어 Q&A 질문 제목은 다음과 같습니다. 좀 더 간결한 제목: * HTMLCollection, NodeList 및 DOM 개체 배열의 차이점은 무엇입니까? * DOM 컬렉션: HTMLCollections, NodeLists 및 Arrays - What\'s t의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!