[JavaScript] DOM(Document Object Model)

DOM이란?

Document Object Model 은 문서객체모델이며 XML이나 HTML문서에 접근하기 위한 일종의 인터페이스이다.
이 객체 모델은 문서내의 모든요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다.

DOM의 표준모델

W3C DOM 표준은 세가지 모델로 구분된다.

1. Core DOM: 모든 문서 타입을 위한 DOM 모델
2. HTML DOM: HTML 문서를 위한 DOM 모델
3. XML DOM: XML 문서를 위한 DOM 모델

우리는 이중 HTML DOM을 가장 많이 접하게 될 것이다. HTML DOM을 통해 JavaScript로 HTML에 접근하고 조작 할 수 있다.

웹 프론트엔드에서의 DOM

여러 DOM Element로 구성된 하나의 웹 페이지는 Window를 최상위 부모로 하는 트리구조를 생성하게 된다.
추후에 Event 포스트에서 다룰 부분이지만 여러 이벤트들은 모두 이 트리구조의 전파경로에 따라 전파가 된다.
전파경로는 Event 포스트에서 다루겠다.

자바스크립트를 이용해 DOM의 조작

DOM요소 선택

웹페이지는 javascript에서 document라는 객체를 통해 선택할 수 있다.
즉 document.선택방식 을 통해 html 문서내에서 원하는 DOM 요소를 선택할 수 있게 되는 것이다.
자주사용하는 DOM 요소 선택 방식 일부를 작성해보겠다..

// id 값을 통한 선택
let item = document.getElementById('id')
// class 값을 통한 선택
let item = document.getElementClassName('class')
// css 선택자를 통한 선택 
let item = document.querySelector('.class')
// css 선택자를 통한 동일한 모든 요소를 유사배열형태로 전달받는다.
let item = document.querySelectorAll('.class')

...

element 노드의 조작

document 객체에서 element를 선택할 수 있는 것처럼 선택된 DOM 요소를 조작할 수도 있다.
만일 id 값이 'red'인 div 태그의 스타일을 조작하고 싶은 경우를 가정 하여 코드를 작성해 보겠다.

// id 값이 red인 element를 document 객체에서 선택
let element = document.getElementById('red')
// 선택된 element node의 style의 color 속성을 레드로 변경
element.style.color = 'red';

element 노드 하위의 text 노드를 조작

DOM 요소(html 파일의 tag) 안에는 텍스트가 위치할 수 있으며 우리는 이 텍스트 노드 또한 조작을 할 수 있다.
예를 들어 class 값이 'content'인 div 태그 내부의 텍스트를 변경하는 경우를 가정하여 코드를 작성해 보겠다.

let element = document.querySelector('content')
// <p>를 태그가 아닌 텍스트 그자체로 인식한다.
element.innerText = "<p>Apple    Banana</p>"
// <div>태그 안의 자식 태그로 <p>가 생성되고 <p>태그 안의 텍스트가 생성된다.
element.innerHTML = "<p>Apple Banana</p>"
// innerText의 경우 공백이 중복되어 있는 경우에는 한개의 공백만을 가지는데 textContent는 공백을 그대로 가져온다.
element.textContent = "Apple    Banana"