JavaScript 입문 | 문서 객체 모델 | 노드 리스트

Tags:

노드 리스트(node list)

노드 리스트는 getElementsByTagName() 메소드나 childNodes 프로퍼티의 값으로 반환되는 객체이다.
이 객체는 HTML 문서와 같은 순서로 문서 내의 모든 노드를 리스트 형태로 저장하고 있다.

리스트의 각 노드는 0부터 시작하는 인덱스를 이용하여 접근할 수 있다.

// 아이디가 "list"인 요소의 모든 자식 노드들을 선택함.
var listItems = document.getElementById("list").childNodes;
// 자식 노드들 중 첫 번째 li 요소의 내용을 변경함.
listItems[1].firstChild.nodeValue = "HTML 요소의 내용을 변경했어요!";

위의 예제에서 자식 노드 중 첫 번째 <li>요소를 선택할 때 인덱스로 0이 아닌 1을 사용한다.
그 이유는 HTML DOM에서 각 요소 노드 다음에는 별도의 텍스트 노드가 존재하기 때문이다.
따라서 아이디가 “list"인 요소의 자식 노드 리스트의 첫 번째 노드에는 아이디가 “list"인 요소 다음에 존재하는 텍스트 노드가 저장된다.

다음 예제는 이러한 요소 노드 사이에 존재하는 텍스트 노드를 확인하는 예제이다.

// 아이디가 "list"인 요소의 모든 자식 노드들을 선택함.
var listItems = document.getElementById("list").childNodes;
 
// 자식 노드들 중 첫 번째 노드의 값을 출력함.
document.write(listItems[0].nodeValue + "<br>");
// 자식 노드들 중 두 번째 노드의 자식 노드 중 첫 번째 노드의 값을 출력함.
document.write(listItems[1].firstChild.nodeValue + "<br>");
// 자식 노드들 중 세 번째 노드의 값을 출력함.
document.write(listItems[2].nodeValue);

위의 예제는 각 요소 노드 다음에 또 다른 텍스트 노드가 존재함을 보여준다.
따라서 노드 리스트에 인덱스를 이용하여 접근할 때는 이러한 텍스트 노드의 존재를 반드시 염두에 두어야 한다.

노드 리스트 객체는 리스트에 노드를 추가하거나 삭제되면 자신의 상태 정보를 스스로 갱신한다.
따라서 이 객체의 length 프로퍼티 값은 언제나 노드 리스트가 저장하고 있는 노드들의 총 개수를 나타낸다.

var listItems = document.getElementsByTagName("li");              // 모든 <li> 요소들을 선택함.
document.getElementById("text").innerHTML = 
"이 노드 리스트의 길이는 " + listItems.length + "개 이다.<br>"; // 모든 자식 노드들의 개수를 반환함.
function changeTextColor() {
    for (var i = 0; i < listItems.length; i++) {
        listItems[i].style.color = "orange";                      // 모든 자식 노드들의 글자색을 변경함.
    }
}



최종 수정 : 2021-08-27