>  기사  >  웹 프론트엔드  >  nodelist은 무슨 뜻인가요?

nodelist은 무슨 뜻인가요?

WBOY
WBOY원래의
2022-07-04 16:56:302506검색

nodelist는 JavaScript의 객체인 노드 목록을 의미합니다. 이는 정렬된 노드 집합을 저장하는 데 사용되는 배열과 유사한 객체입니다. nodelist 객체는 HTMLCollection 객체와 유사하며 객체의 요소는 다음을 통해 액세스할 수 있습니다. 색인.

nodelist은 무슨 뜻인가요?

이 문서의 운영 환경: Windows 10 시스템, nodejs 버전 12.19.0, Dell G3 컴퓨터.

nodelist

NodeList는 JavaScript의 객체로, 정렬된 노드 집합을 저장하는 데 사용되는 배열과 유사한 객체입니다.

NodeList 객체

NodeList 객체는 문서(수집)에서 얻은 노드 목록입니다.

NodeList 개체는 HTMLCollection 개체와 유사합니다.

이전 브라우저의 일부 메소드(예: getElementsByClassName())는 HTMLCollection 객체 대신 NodeList 객체를 반환합니다.

모든 브라우저의 childNodes 속성은 NodeList 객체를 반환합니다.

대부분의 브라우저의 querySelectorAll()은 NodeList 객체를 반환합니다.

NodeList의 요소는 인덱스(0부터 시작)로 액세스할 수 있습니다.

노드 목록은 계속 업데이트됩니다. 노드 목록이나 XML 문서에서 요소가 삭제되거나 추가되면 목록이 자동으로 업데이트됩니다.

참고: 노드 목록에서 노드는 XML 문서에 지정된 것과 동일한 순서로 반환됩니다.

NodeList 객체 속성

length는 노드 목록의 노드 수를 반환합니다.

NodeList 객체 메소드

item()은 노드 목록에서 지정된 인덱스 번호를 가진 노드를 반환합니다.

예는 다음과 같습니다.

인스턴스 1:

var parent = document.getElementById('parent');
parent.childNodes.length // 2
parent.appendChild(document.createElement('div'));
parent.childNodes.length // 3

NodeList 인스턴스 개체는 동적 컬렉션이거나 정적 컬렉션일 수 있습니다. 소위 동적 컬렉션은 살아있는 컬렉션입니다. DOM 트리가 관련 노드를 삭제하거나 추가하면 NodeList 인터페이스에 즉시 반영됩니다.

위 코드에서 parent.childNodes는 NodeList 인스턴스 객체를 반환합니다. 상위 노드가 하위 노드를 추가하면 객체의 구성원 수가 1씩 증가합니다. Node.childNodes는 동적 컬렉션을 반환합니다.

document.querySelectorAll 메서드는 정적 컬렉션을 반환합니다. DOM 내의 변경 사항은 이 메서드의 반환 결과에 실시간으로 반영되지 않습니다.

NodeList 인터페이스 인스턴스 객체는 길이 속성과 숫자 인덱스를 제공하므로 숫자 인덱스를 사용하여 각 노드를 배열처럼 검색할 수 있지만, 배열 자체는 아니며 pop이나 배열 특정 메서드를 사용할 수 없습니다. 푸시. [

예제 2:

//HTML部分代码
//<ul><li>one</li><li>two</li><li>three</li></ul>
//JAVASCRIPT代码
var myNodeList = document.querySelector(&#39;ul&#39;).childNodes;
for(var i=0;i<myNodeList.length;i++){
    console.log(myNodeList[i]);
}
/* <li>one</li>
<li>two</li>
<li>three</li>
*/
console.log(myNodeList.length);// 3
console.log(myNodeList.item(1));//<li>two</li>

위 코드에서 myNodeList의 숫자 인덱스 부분을 for 루프를 통해 순회하면 3개의 인덱스에 해당하는 멤버가 반환되고 길이 속성은 3으로 올바르게 반환됩니다.

myNodeList 인스턴스 객체의 두 번째 멤버는 item() 메서드를 통해 액세스됩니다. 숫자 인덱스는 0부터 계산되기 때문에 두 번째 멤버를 검색하려면 숫자 인덱스 1을 사용합니다.

모든 배열형 객체는 대괄호 연산자를 사용하여 멤버를 제거할 수 있으므로 일반적으로 item 메서드 대신 NodeList[index] 메서드를 사용합니다.

추천 학습: "nodejs 비디오 튜토리얼"

위 내용은 nodelist은 무슨 뜻인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.