자바스크립트 공부(7) - 문서 객체 모델(DOM) (1)

문서 객체 모델(DOM)이란 웹 문서의 모든 요소를 자바스크립트를 이용하여 조작할 수 있도록 객체를 사용해 문서를 해석하는 방법이다. 자바스크립트를 이용해 웹 문서의 텍스트, 이미지 등의 요소를 제어하기 위해서는 반드시 이해해야 하는 개념이다.

---

 

1. DOM 트리

---

DOM은 웹 문서의 요소를 부모 요소와 자식 요소로 구분한다. 이런 구조는 나무를 거꾸로 뒤집은 것 같은 모양을 가지고 있어 'DOM 트리'라고 불린다.

출처 : TCP School (http://www.tcpschool.com/ajax/ajax_basic_node)

DOM 트리는 가지와 노드로 표현하는데, HTML 요소만 표현하지 않는다. HTML 요소 내에 속한 텍스트, 이미지도 자식으로 간주하고 DOM 트리에 표현한다.

 

• 요소(Element) 노드 : 웹 문서의 태그
• 텍스트(Text) 노드 : 태그가 품고 있는 텍스트, 요소 노드의 자식 노드이다.
• 속성(Attribute) 노드 : 태그의 속성, 요소 노드의 자식 노드이다.
• 주석(Comment) 노드 : 주석

 

https://software.hixie.ch/utilities/js/live-dom-viewer/

Live DOM Viewer

위 링크에 접속하면 DOM 트리가 만들어지는 과정을 실시간으로 확인할 수 있다.

 

 

2. DOM 요소에 접근하기

---

자바스크립트로 DOM 요소에 접근할 때에는 선택자를 주로 사용한다.

1. id 선택자로 접근하기 - getElementByID()

document.getElementByID("idName")

2. class 값으로 접근하기 - getElementsByClassName()

CSS에서 class 선택자는 여러 번 사용할 수 있기 때문에 getElementsByClassName() 함수명에는 's'가 붙고, 실제로 2개 이상의 웹 요소에 접근한다.

document.getElementsByClassName("className")

콘솔 창에서 위와 같은 소스를 입력하면 HTMLCollection 값이 출력된다. HTMLCollection은 여러 개의 HTML 요소를 담고 있는 자료 형식으로, 배열과 비슷하다. 이 함수로 접근한 요소 중 1개의 요소에만 접근하고자 할 때는 맨 뒤에 배열처럼 [인덱스 번호]를 붙이면 된다.

3. querySelector(), querySelectorAll()

두 함수는 모두 id, class 값 또는 태그 이름을 사용할 수 있다. 선택자 값을 사용할 때는 CSS와 동일하게 class 값 앞에는 .을, id 값 앞에는 #을 붙인다. 태그 이름은 기호 없이 태그 이름만 사용한다.
두 함수는 접근하는 DOM 요소 개수에 차이가 있다. querySelector() 함수로 class 선택자나 태그 이름을 사용할 때는 첫 번째 요소에만 접근할 수 있다. 전체 class 값에 접근하기 위해서는 querySelectorAll() 함수를 사용한다. 이때는 NodeList를 반환하는데, 여러 개의 노드를 모아 놓은 것으로 HTMLCollection과 마찬가지로 배열과 비슷하다.

4. getElementByID()와 querySelector()의 차이

getElementByID() 함수처럼 함수명에 'Element'가 포함된 함수는 요소 노드까지만 접근할 수 있다. 반면 querySelector(), querySelectorAll() 함수는 요소 노드뿐만 아니라 텍스트 노드, 속성 노드까지 접근 가능하다.