Javascript - 요소 선택하기 2 (Element, HTMLCollection, NodeList)

서론

지난 포스트에서 요소를 선택하는 방법을 알아봤습니다. 

다양한 방법으로 요소들을 선택할 수 있고 각각의 방법마다 Element, HTMLCollection, NodeList의 형태로 반환을 하고 있습니다.

이 각각의 형태들마다 활용하는 방법에 차이가 존재합니다.

 

본문에서는 하나씩 살펴보면서 차이점과 사용방법에 대해서 알아보도록 하겠습니다.

 

Element 객체 (단일 요소)

가장 기본적으로 DOM객체에서 요소를 받아오는 객체입니다.

대표적으로 아래와 같은 메서드를 통해서 Element객체를 받아옵니다.

• . getElementById('id')
• . querySelector('CSS query')

위의 메서드를 통해 알 수 있듯이 단일 요소들을 Element객체로 반환합니다.

 

DOM(document)에서 가장 기본적으로 받아오게 되는 요소의 형태입니다. 

 

Element 객체 제어하기

DOM으로부터 Element 객체를 선택했다면, 객체에 아이디, 클래스명을 부여하거나, 해당 요소의 태그 이름을 알아내고 그 안에 들어있는 Text, 또는 HTML 문자 값을 제어하는 등 다양한 일을 할 수 있습니다.

 

본문에서는 대표적인 몇 가지 속성가 메서드에 대해서 알아보도록 합시다.(더 자세한 내용은 여기)

구분	표현 법	설명
속성(Properties)	Element.className	요소의 클래스 명에 접근합니다.
	Element.id	요소의 아이디에 접근합니다.
	Element.innerHTML	요소에 HTML 값을 접근합니다.
	Element.innerText	요소에 문자 값을 접근합니다.
메서드(Methods)	Element.addEventListener()	요소에 이벤트 핸들러를 정의합니다.

HTMLCollection와 NodeList(복수 요소)

하나의 단일 요소들을 선택하는 메서드를 사용하면 Element객체의 형태로 받아온다고 했습니다.

그렇다면 여러 개가 존재하는 요소들을 받아오는 메서드들을 사용하면 어떤 형태로 받아올까요?

Element를 줄줄이 붙어 배열과 같은 형태로 받아오게 됩니다.

하지만 정확히 말하자면 메서드들에 따라서 HTMLCollection과 NodeList의 형태로 받아오게 됩니다.

이 두 녀석들은 마치 배열과 같은 역할을 하지만, 차이가 존재합니다.

 

우선, 어떤 메서드들이 어떤 반환을 하는지 다시 확인해 봅시다.

메서드 명	반환 타입
getElementsByTagName('tagname')	HTML Collection
getElementsByClassName('classname')
getElementsByName('name')	Node List
querySelectorAll('CSS selectors')

 

HTMLCollection이나 NodeList는 결국 Element객체를 묶어서 배열과 같은 형태로 표현합니다.

이제 각각의 타입에 따른 특징을 살펴보도록 합시다.

 

HTMLCollection (살아있는 객체)

살아있는 객체라는 말이 무엇일까요?

HTMLCollection 타입은 DOM과 실시간으로 연결되어 있어 계속해서 바뀌는 상황을 감지합니다.

 

만약 아래와 같은 예제에서 class명이 article인 모든 요소를 HTMLCollection으로 가지고 오면 어떻게 될까요?

let tags = document.getElementsByClassName('article');

See the Pen Untitled by Gon (@gon-91) on CodePen.

HTMLCollection은 살아있는 객체입니다. 따라서 getElementsByClassName 메서드가 실행되는 순간 aritcle클래스 요소들을 가지고 와서 끝나는 것이 아닌, 실시간으로 DOM과 연동되어 값을 담고 있습니다.

 

추가적으로 HTMLCollection과 배열의 차이점등에 대한 내용은 여기를 참조하세요.

 

NodeList (정적인 객체)

NodeList의 특징은 HTMLCollection과 반대의 정적인 개념을 가진 존재입니다.

위의 예제에서 NodeList의 형태로 가지고 온다고 가정해 봅시다.

let tags = document.querySelectorAll('.article');

위처럼 메서드를 호출한 시점에서의 정적인 요소만을 가지고 옵니다. 

따라서 DOM에서의 변화가 있어도 가지고 온 요소들은 변화가 없는 정적인 객체입니다.

 

위의 querySelectorAll 메서드는 정적인 NodeList를 반환합니다.

하지만 NodeList 타입에도 DOM과 실시간으로 연동하는 객체도 있습니다. 이 내용에 대해서는 여기를 참조하세요.