자바스크립트 DOM이란?
자바스크립트의 DOM(Document Object Model, 문서 객체 모델)은 웹페이지를 구성하는 HTML 요소들을 표현하는 인터페이스입니다. DOM을 활용하면 웹페이지의 내용이나 스타일을 자유롭게 변경하고 조작할 수 있습니다.
DOM에 접근하는 방법
DOM은 아주 간단하게 확인할 수 있습니다. 웹페이지에서 마우스 오른쪽 버튼을 클릭한 뒤 '검사(Inspect)'를 선택해 보세요. 그러면 화면 한쪽(오른쪽 또는 왼쪽)에 현재 보고 있는 페이지의 HTML 요소들이 나타납니다. 이 요소들 위에 마우스를 올리면 해당 요소가 페이지의 어느 부분을 나타내는지 하이라이트로 표시되기 때문에 직관적으로 파악할 수 있습니다.
또한 개발자 도구의 콘솔(Console)에서 코드를 작성하면 페이지의 내용이나 스타일을 직접 조작할 수도 있습니다.
DOM의 트리 구조
DOM은 부모 요소와 그 안에 중첩된 자식 요소들로 이루어진 트리(tree) 데이터 구조입니다. 자식 요소를 가지지 않는 요소는 '잎(leaves)'이라고 부릅니다.
페이지를 검사해 보면 트리의 최상위 노드는 document이며, 그 아래 html 태그가 있고, 다시 script와 title을 포함하는 head 태그가 하나의 트리로 뻗어 나가는 것을 볼 수 있습니다. body 태그는 head 태그와 분리되어 있으며, 서로 다른 요소들을 담는 별개의 트리로 구성됩니다. 아래는 Career Karma 홈페이지를 표현하는 요소들의 예시입니다.
위 이미지에서 body 태그의 특정 div 자식 요소 위에 마우스를 올리면 홈페이지의 해당 영역이 하이라이트되는 것을 확인할 수 있습니다. 이 글에서는 앞으로 DOM을 조작하기 위해 꼭 알아야 할, DOM에서 요소를 선택하는 다양한 방법을 살펴보겠습니다.
DOM에서 요소 선택하기
DOM에서 요소를 선택하는 방법은 크게 두 가지입니다. 하나는 getElements 계열 메서드를 사용하는 것이고, 다른 하나는 querySelector 계열 메서드를 사용하는 것입니다.
getElement 메서드
getElement 메서드는 태그 이름, 클래스 이름, id 중 하나를 문자열 인수로 받습니다. 태그 이름과 클래스 이름으로 검색하면 HTML 컬렉션(HTML Collection)이라는 배열과 유사한 객체가 반환되며, 이 객체를 통해 찾고 있는 요소가 페이지에서 몇 번 나타나는지 알 수 있습니다.
document.getElementsByTagName('p') : Career Karma 홈페이지에는 현재 7개의 p 태그가 있다는 점에 주목하세요.
document.getElementsByClassName('hzjqne') : 지정된 클래스를 가진 모든 요소를 포함하는 HTML 컬렉션을 반환합니다.
document.getElementById('__NEXT_DATA__') : id로 요소를 가져오면 일치하는 단일 요소가 콘솔에 반환됩니다. id 이름은 고유해야 하기 때문에 컬렉션이 아닌 하나의 요소만 반환됩니다.
querySelector 메서드
querySelector 메서드를 사용할 때는 클래스 이름 앞에는 마침표(.), id 이름 앞에는 해시 기호(#)를 반드시 붙여야 합니다. querySelector()나 querySelectorAll() 메서드를 사용할 때 가장 흔히 저지르는 실수가 바로 이 기호를 빠뜨리는 것입니다.
위 스크린샷에서 볼 수 있듯이, 클래스나 id를 가진 요소가 정상적으로 반환된 것을 확인할 수 있습니다.
또 하나의 차이점은 querySelectorAll()을 사용하면 HTML 컬렉션 대신 노드 리스트(NodeList)라는 배열과 유사한 객체가 반환된다는 점입니다.
HTML 컬렉션과 노드 리스트의 핵심적인 차이는 노드 리스트에는 .forEach() 메서드를 사용할 수 있다는 점입니다. DOM을 조작할 때 HTML 컬렉션에는 이 메서드를 사용할 수 없습니다. 하지만 자바스크립트에는 HTML 컬렉션이나 노드 리스트처럼 배열과 유사한 객체(array-like object)로부터 실제 배열을 만들 수 있는 메서드가 있습니다. 바로 Array 클래스의 .from() 메서드이며, 사용법은 Array.from(arrayLikeObject)와 같습니다.
참고로 querySelector 계열 메서드만으로도 getElements 계열 메서드로 선택할 수 있는 모든 요소를 선택할 수 있습니다.
마무리
DOM은 웹페이지의 HTML을 표현하는 강력한 인터페이스입니다. DOM은 트리 구조로 되어 있으며, 페이지를 검사하면 이 구조를 직접 눈으로 확인할 수 있습니다. querySelector()나 getElements 계열 메서드를 잘 활용하면 자바스크립트로 화면의 요소들을 자유롭게 조작할 수 있습니다.