문서객체모델 DOM
Document Object Model(DOM)이란 문서 객체 모델이다. 다시 말해서 “문서(=HTML 문서)”를 “객체화”시킨 것을 “DOM”이라고 부른다. 여기서 객체라고 하는 것은 자바스크립트의 자료형 중의 하나인 객체(Object)를 말한다. 객체는 프로퍼티와 메소드들을 가지고 있을 수 있기 때문에, HTML의 각각의 정보들을 각각의 객체로 나눠서 저장할 수 있다.
HTML 문서를 DOM으로 변환시키는 이유?
자바스크립트 언어 구조 상, HTML 페이지에 있는 태그와 속성들을 바로 다룰 수 없다. 따라서 웹페이지에 있는 HTML 요소들을 자바스크립트의 문법에 맞게 고쳐야 하는데, 앞서 말한 것처럼 자바스크립의 자료형 중에 “객체(Object)”를 이용하면 HTML 페이지를 표현할 수 있다. 이렇게 변환시켜준 문서 객체가 DOM이다.
사람 => HTML 페이지 ← [상호 동기화] → DOM (문서 객체) <= 자바스크립트
HTML 페이지와 DOM 구성
- Figure 1의 왼쪽:
우리가 인터넷 브라우저에서 보는 HTML 페이지를 보여준다. 이는 구문 분석 단계를 거쳐서, 자바스크립트가 이해할 수 있는 (=자바스크립트 문법에 맞는) HTML DOM으로 변환시킨다. - Figure 1의 오른쪽:
HTML DOM의 구조이다. 각각의 네모들은 하나의 객체를 나타내는데, 이러한 객체들은 부모-자식의 관계로 서로 연결되어져 있다. 자바스크립트를 이용하여 DOM의 객체들을 수정한다면, 상호 연동되어져 있는 HTML 페이지가 수정되게 된다.
노드(Node)의 개념
- 노드:
Figure 1. 오른쪽 그림 DOM의 구조를 보면, DOM을 구성하는 각각의 단위체를 노드(Node)라고 부른다. - 노드 = 객체:
하나의 노드는 하나의 객체라 생각하면 쉽게 이해할 수 있다. 아래에서 자세히 설명되지만, 자바스크립트는 각각의 노드를 각각의 객체로 불러와서 처리한다. - 노드의 종류 대표 3가지:
1) 요소 노드 (Element Node), 2) 텍스트 노드 (Text Node), 3) 속성노드 (Attribute Node). 자세한 내용은 아래에서 다룬다.
요소 노드 (Element Node)
- 요소 노드=태그?
HTML 페이지의 각각의 태그들은 (DOM에서) 각각의 노드로 변환된다. 이러한 노드를 요소 노드라고 부른다. 보통 요소(Element)라고 자주 언급하는데, 이는 요소 노드의 줄임말이다. 따라서 태그를 요소라고 생각하면 되는데, 사실 엄밀히 말하면 차이점이 있다. - 요소와 태그의 차이점
HTML 페이지에서 태그는 다음의 3가지 구성으로 이뤄져 있다. Figure 1의 왼쪽 그림에 표시되어 있듯이, 태그는 “시작 태그”, “컨텐트” (Content, 내용에 해당하는데 영어 그대로 사용하겠다.), “종료 태그”의 패턴으로 되어 있다. 이를 통틀어 “요소”라고 부른다. - 요소는 사실 DOM의 용어
요소라는 단어는 구문 분석 단계 이후에 생성되는 DOM 내부에서 사용되는 용어이기 때문에, 엄밀히 말하면 HTML 페이지에서 사용해서는 안되지만 보편적으로 혼용해서 사용되고 있다.[참고1] 따라서 이 포스트에서도 편의상 혼용하여 사용하겠다. - 요소 노드의 부모-자식 구조
HTML 페이지에서 태그들의 구조를 보면, <html></html> 태그 안에 <head></head>와 <body></body>태그가 들어가 있다. 이렇게 포함된 구조를 DOM에서는 부모객체와 자식객체로 연결한다. (Figure 2)
텍스트 노드 (Text Node)
요소: <시작태그> 컨텐트 </끝태그> 예: <p id="demo">코딩에서부터 찾는 즐거움</p> <p id="demo"><a href="https://oursmalljoy.com">코딩에서부터 찾는 즐거움</a></p>
- 요소의 구조
앞에 설명했듯이, 요소는 시작태그, 컨텐트, 그리고 끝태그로 이뤄져 있다. - 컨텐트에 들어 갈 수 있는 것
컨텐트에는 위의 예제처럼 1) 글자가 들어갈 수도 있고, 또 2) 다른 태그가 들어가 있을 수도 있다. - 텍스트 노드
만약 컨텐트에 글자가 들어가 있을 경우, 이 글자들을 새로운 객체에 저장하는데, 이 객체를 “텍스트 노드”라고 부른다. - 텍스트 노드의 부모-자식 구조
텍스트 노드는 컨텐트를 가지고 있는 태그의 노드의 자식노드가 된다. 아래 Figure 3을 보면, 텍스트 노드는 p 태그의 요소 노드의 자식노드에 위치한다.
속성 노드 (Attribute Node)
<p id="demo">코딩에서부터 찾는 즐거움 <p>
- 속성 노드
태그는 여러 속성(attribute)들을 가질 수 있다. 위의 예제에서는 p 태그는 id라는 속성에 demo라는 값을 가지고 있다. 이러한 속성들은 속성 노드에 저장된다. - 속성 노드의 종속 구조
속성 노드는 그 속성을 가지고 있는 태그의 요소 노드를 부모 노드로 가지고 있다. 아래 Figure 4를 보면, 속성노드는 p 태그의 요소노드에 자식 노드로 붙어 있음을 볼 수 있다.
그 외의 노드
- 노드는 “요소 노드”와 “텍스트 노드”, “속성 노드” 외에도 상당히 많은 종류의 노드들이 있다. [참고2] HTML에 들어 있는 모든 것들이 다 노드로 변환된다고 생각하면 된다. 예를 들면 주석 또한 Comment Node로 생성된다. 참고로 HTML 코드에 빈칸이 있다면 빈칸 또한 텍스트 노드로 변환된다.
DOM과 자바스크립트의 상호작용
자바스크립트의 객체 구성
- Figure 5의 오른쪽을 보면, DOM의 노드를 가지고 오기 위해 크게 3 가지의 객체가 존재한다: “Element Node 객체”, “Text Node 객체”, “Attribute Node 객체”.
- 세 가지 노드객체 모두 Node라는 이름을 가진 객체로부터 상속 받는다. (참고: 실제로는 중간 단계에 더 많은 객체 들이 있지만, 위 그림은 간략화시켰다. 자세한 내용은 차후에 다른 포스트에서 다뤄질 것이다.) 상속의 개념을 잘 이해하고 있다면, 세 가지 노드객체 모두는 Node 객체가 가지는 속성과 메소드를 다 사용할 수 있다는 것을 알 것이다. 다시 말해 공통적으로 사용되는 속성과 메소드들은 Node 객체에 들어가 있다.
- 개별적으로 필요한 속성과 메소드들은 각각의 노드 객체에 들어가 있다. “Attribute Node 객체”를 예로 들면, DOM에 있는 “속성 노드”의 속성값들을 변경할 수 있는 속성과 메소드들을 가지고 있다. 이를 통해서 DOM의 “속성 노드”를 컨트롤하게 되고 이것은 HTML 페이지 수정으로 연결된다. “텍스트 노드”와 “요소 노드”도 같은 맥락으로 이해하면 된다.
DOM 노드 가져오기
- 요소 노드:
자바스크립트에서는 요소 노드를 가져오는 다양한 방법을 제시한다. 예를 들면, document.getElementById 라던지 document.getElementsByTagName, 또는 document.querySelector 등이 있다. - 텍스트 노드:
텍스트 노드를 직접 가져올 수 있는 방법은 아쉽게도 없다. 따라서 DOM의 “요소 노드”를 먼저 “요소 노드 객체”로 가져오고, 이 객체가 가지고 있는 속성들을 이용하여 “텍스트 노드”와 “속성 노드”로 접근할 수 있다. 예를 들어 “자식 노드”를 가져오는 방법은 요소객체.children 또는 요소객체.childNodes이다. - 속성 노드:
속성 노드 또한 직접 가져올 수 있는 방법이 없다. DOM의 “속성 노드”를 가져오는 방법은 요소객체.attributes이 있다. 또한 “DOM - 부모 노드:
부모 노드는 요소객체.parentNode로 가져올 수 있다.
각각의 방법들은 차후의 포스트에서 다뤄질테니 현재로는 전체 그림을 잡는데만 집중하자. DOM 노드를 제거하거나 새로운 DOM 노드를 추가하는 것도 자바스크립의 Node 객체의 속성과 메소드를 사용하면 가능하다.
