제이스크립트 HTML DOM 노드 목록

추천 과정:

HTML DOM NodeList 객체 NodeList

이 객체는 문서에서 추출된 노드 목록(집합)입니다.

NodeList 객체와 HTMLCollection 객체는 거의 같습니다. getElementsByClassName() 메서드는, 일부(오래된) 브라우저는 NodeList 객체 대신 HTMLCollection 객체를 반환합니다.

모든 브라우저는 childNodes 이�性이 NodeList 객체를 반환합니다.

대부분의 브라우저는 querySelectorAll() 이 메서드는 NodeList 객체를 반환합니다.

아래의 코드는 문서의 모든 <p> 노드를 선택합니다:

예제

var myNodeList = document.querySelectorAll("p");

}

NodeList의 요소는 인덱스 번호로 접근할 수 있습니다.

두 번째 <p> 노드에 접근하려면 다음과 같이 작성할 수 있습니다:

y = myNodeList[1];

주의사항:인덱스는 0에서 시작합니다.

HTML DOM Node List 길이

length 이�性은 노드 목록 내의 노드 수를 정의합니다:

예제

var myNodelist = document.querySelectorAll("p");
document.getElementById("demo").innerHTML = myNodelist.length;

}

예제 설명:

  • 모든 <p> 요소의 목록을 생성합니다
  • 이 목록의 길이를 표시합니다

length 이�性은 노드 목록에서 노드를 순회하려 할 때 유용합니다:

예제

변경할 노드 목록의 모든 <p> 요소의 배경색:

var myNodelist = document.querySelectorAll("p");
var i;
for (i = 0; i < myNodelist.length; i++) {
    myNodelist[i].style.backgroundColor = "red";
}

}

본인이 직접 테스트해보세요

HTMLCollection과 NodeList의 차이

HTMLCollection(이전 장)은 HTML 요소의 집합입니다.

NodeList는 문서 노드의 집합입니다.

HTMLCollection과 NodeList 객체는 클래스 배열 객체 목록(집합)입니다.

그들은 모두 정의 목록(집합)에 있는 항목 수를 가집니다. length 속성.

그들은 모두 인덱스(0, 1, 2, 3, 4, ...)를 통해 배열처럼 각 항목에 접근할 수 있습니다.

HTMLCollection 항목에 접근할 수 있는 방법은 그들의 이름, id 또는 인덱스 번호를 통해 가능합니다.

NodeList 항목에 접근할 수 있는 방법은 그들의 인덱스 번호를 통해만 가능합니다.

속성 노드와 텍스트 노드를 포함할 수 있는 것은 NodeList 객체만입니다.

노드 목록은 배열이 아닙니다!

노드 배열은 배열처럼 보이지만 아닙니다.

노드 목록을 순회하며 배열처럼 노드를 참조할 수 있습니다.

그러나, 노드 목록에 배열 메서드를 사용할 수 없습니다. 예를 들어, valueOf()、push()、pop() 또는 join().