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

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

HTMLCollections와 NodeLists

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

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

라이브 및 스냅샷 컬렉션

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

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

브라우저 메소드(예: getElementsByTagName)에 의해 반환된 DOM 컬렉션은 다음과 같습니다. 일반적으로 라이브이며 jQuery 선택은 스냅샷입니다.

배열과 객체 배열 비교

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

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

노드 선택

문서 사용 메서드:

• document.getElementsByTagName("td"): 모든 td 요소의 HTMLCollection을 반환합니다.
• document.getElementsByClassName("myRow"): 다음의 NodeList를 반환합니다. "myRow"가 포함된 모든 요소 class.

jQuery 사용:

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

예제 스크립트

제공된 스크립트는 데이터 구조 간의 차이점:

• console.log('[123,"abc",321,"cba"]=[123,"abc",321,"cba"]: 비교 arrays.
• 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을 기록합니다. links.
• console.log('document.getElementById("myTable")=',document.getElementById("myTable")): 단일 요소가 아닌 단일 요소를 기록합니다. collection.
• console.log('document.getElementsByClassName("myRow")=',document.getElementsByClassName("myRow")): "myRow"를 사용하여 요소의 NodeList를 기록합니다. class.
• console.log('document.getElementsByTagName("td")=',document.getElementsByTagName("td")): 모든 td 요소의 HTMLCollection을 기록합니다.
• console. log('$("#myTable")=',$("#myTable")): 다음을 나타내는 jQuery 객체를 기록합니다. #myTable 요소.
• console.log('$("td")=',$("td")): 모든 td 요소를 포함하는 jQuery 객체 배열을 기록합니다.