DOM 조작에서 HTMLCollection, NodeList 및 객체 배열은 어떻게 다릅니까?

DOM에서 HTMLCollection, NodeList 및 객체 배열 구별

DOM 노드에 액세스할 때 개발자는 HTMLCollections, NodeList 및 객체 배열을 자주 접하게 됩니다. 문서 구조를 효과적으로 조작하려면 이러한 데이터 구조 간의 차이점을 이해하는 것이 중요합니다.

HTMLCollections와 NodeLists

HTMLCollections와 NodeList는 노드 컬렉션과 유사점을 공유하지만 고유한 특성:

• 콘텐츠: HTMLCollections에는 Element 노드만 포함되는 반면 NodeList에는 모든 유형의 노드를 보유할 수 있습니다.
• 메서드: 모든 컬렉션에 공통된 메서드 외에도 HTMLCollection은 이름으로 요소에 액세스하기 위한 명명된Item 메서드를 제공합니다.

라이브 및 스냅샷 컬렉션

DOM 컬렉션은 다음 중 하나일 수 있습니다. 라이브 또는 스냅샷:

• 라이브: DOM이 변경되면 컬렉션이 자동으로 업데이트됩니다.
• 스냅샷: 컬렉션은 고정된 상태로 유지됩니다. DOM 수정에 관계없이.

브라우저 메소드(예: getElementsByTagName)에서 반환된 DOM 컬렉션은 일반적으로 라이브인 반면 jQuery 선택은 스냅샷입니다.

배열과 객체 배열

jQuery 객체는 콘솔 로그에 배열로 표시되지만 실제로는 객체 배열입니다.

• 배열: 숫자 인덱스를 사용하여 액세스되는 순차 컬렉션.
• 객체 배열: 숫자 및 명명된 속성을 모두 사용하여 요소에 액세스하는 배열.

노드 선택

문서 메소드 사용:

• document.getElementsByTagName("td"): 모든 td 요소의 HTMLCollection을 반환합니다.
• document.getElementsByClassName("myRow"): 반환 "myRow" 클래스가 있는 모든 요소의 NodeList.

jQuery 사용:

• $("td"): 모든 td 요소를 선택합니다. 그리고 객체 배열인 jQuery 객체를 반환합니다.

예제 스크립트

제공된 스크립트는 데이터 구조 간의 차이점을 보여줍니다.

• console.log('[123,"abc",321,"cba"]=[123,"abc",321,"cba"]: 배열을 비교합니다.
• console. log('{123:123,abc:"abc",321:321,cba:"cba"}={123:123,abc:"abc",321:321,cba:"cba"}: 객체 배열을 비교합니다. 객체 구문을 사용합니다.
• console.log('Node=',Node): 노드 유형을 나타내는 객체 배열인 전역 Node 객체를 기록합니다.
• console.log('document. links=',document.links): 링크의 HTMLCollection을 기록합니다.
• console.log('document.getElementById("myTable")=',document.getElementById("myTable")): 단일 링크를 기록합니다. 컬렉션이 아닌 요소입니다.
• console.log('document.getElementsByClassName("myRow")=',document.getElementsByClassName("myRow")): "myRow" 클래스가 있는 요소의 NodeList를 기록합니다.
• console.log('document.getElementsByTagName("td")=',document.getElementsByTagName("td")): 모든 td 요소의 HTMLCollection을 기록합니다.
• console.log( '$("#myTable")=',$("#myTable")): #myTable 요소를 나타내는 jQuery 객체를 기록합니다.
• console.log('$("td")=', $("td")): 모든 td 요소를 포함하는 jQuery 객체 배열을 기록합니다.

위 내용은 DOM 조작에서 HTMLCollection, NodeList 및 객체 배열은 어떻게 다릅니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!