- 문서 객체 모델
1) 개념
문서 객체 모델은 넓은 의미로 웹 브라우저가 HTML 페이지를 인식하는 방식이며, 좁은 의미로는 document 객체와 관련된 객체의 집합이다.
다음 그림은 트리 구조인 문서 객체 모델을 표현한 것이다.
이때 head, body와 같은 HTML 태그를 요소 노드라고 하며, "Header", 'Index"와 같은 요소 노드 안에 들어 있는 글자를 텍스트 노드라고 한다.
2) 텍스트를 갖는 노드의 생성과 노드의 연결
다음 표는 요소 노드와 텍스트 노드를 생성하는 document 객체의 메서드를 정리한 표이다.
메서드 이름 |
설명 |
createElement(tagName) |
tagName의 요소 노드를 생성함 |
createTextNode(text) |
text라는 글자를 가지는 텍스트 노드를 생성함 |
이렇게 노드를 생성한 후에, 문서 객체 모델은 트리 구조이기 때문에 문서 객체에 노드를 연결해야 한다.
이를 위해 문서 객체의 appendChild() 메서드를 사용한다. appendChild() 메서드는 현재 객체에 맨 마지막에 매개 변수로 넘어 온
노드를 연결한다.
3) 텍스트를 갖지 않는 노드의 생성과 노드의 연결
텍스트 노드를 갖지 않는 대표적인 HTML 태그는 img이다.
img 태그는 텍스트 노드 대신 많은 속성이 있고, 사실 이런 속성도 내부적으로 노드이다.
다음은 속성을 설정하고 가져 오는 메서드를 정리한 표이다.
메서드 이름 |
설명 |
setAttribute(name, value) |
객체의 name 속성을 value로 지정함 |
getAttribute(name) |
객체의 name 속성 값을 return함 |
다음은 위의 메서드를 활용하여 이미지 객체의 속성을 지정하는 예제이다.
