자바스크립트 HTML DOM Node Lists

HTML DOM NodeList 객체(Object)

NodeList 객체는 문서(document)에서 추출된 노드(nodes)의 목록(list)(collection)입니다.

NodeList 객체는 HTMLCollection 객체와 거의 같습니다.

일부(이전) 브라우저는, getElementsByClassName()과 같은 메소드에 대해, HTMLCollection 대신 NodeList를 반환합니다.

모든 브라우저는 childNodes 속성에 대해 NodeList 객체(object)를 반환합니다.

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

다음 코드는 문서(document)의 모든 <p> 노드(nodes)를 선택합니다:

Example

JavaScript HTML DOM!

Hello World!

Hello Norway!

The innerHTML of the second paragraph is: Hello Norway!

주의: 인덱스(index)는 0으로 시작합니다.


HTML DOM Node List 길이(Length)

length 속성(property)은 노드 목록(node list)에 있는 노드(nodes)의 갯수를 정의합니다:

Example

JavaScript HTML DOM!

Hello World!

Hello Norway!

This document contains 3 paragraphs.

예제 설명:

  1. 모든 <p> 요소(elements)의 목록을 만듭니다.
  2. 목록의 길이(갯수)를 표시합니다.

length 속성(property)은 노드 목록(node list)에 있는 노드(nodes)를 반복할(loop through) 때 유용합니다:

Example

JavaScript HTML DOM!

Hello World!

Hello Norway!

버튼을 클릭하면 모든 p 요소의 색이 변합니다.


HTMLCollection과 NodeList의 차이점

HTMLCollection(이전 장)은 HTML 요소(elements)의 모음(collection)입니다.

NodeList는 문서 노드(document nodes)의 모음(collection)입니다..

NodeList와 HTML collection은 매우 똑같습니다.

HTMLCollection 객체(object)와 NodeList 객체는 객체(objects)의 배열 같은 목록(array-like list) (collection)입니다.

둘 다, 목록(list) (collection)에 있는 항목(items)의 갯수를 정의하는, length 속성이 있습니다.

둘 다 인덱스(index) (0, 1, 2, 3, 4, ...)를 제공하며, 배열과 같이 각 항목(item)에 액세스 할 수 있습니다.

HTMLCollection 항목(items)은 name, id 또는 index number로 액세스 할 수 있습니다.

NodeList 항목(items)은 index number로만 액세스 할 수 있습니다.

NodeList 객체(object) 만 attribute nodes와 text nodes가 포함될 수 있습니다.

출처: JavaScript HTML DOM Node Lists

댓글 남기기