[JS] DOM이란? 선택 및 조작

DOM 이란?

DOM이 뭘까? DOM은 Document Object Model의 약자로서, 웹 페이지를 구조화된 ‘객체’로 제공해서 프로그래밍 언어가 문서를 조작할 수 있게 만든 것이다.

다시 말해, 웹 페이지를 객체로 제공함으로써 객체의 “메서드”와 “속성”을 통해 프로그래밍 언어가 문서를 쉽게 조작할 수 있게 되는데, 이를 DOM API라고 한다.

Parsing 파싱

웹 브라우저가 HTML 파일을 읽게 되면, DOM을 구현하게 된다. 이처럼 브라우저가 페이지를 읽고 해석하여 DOM 을 만드는 과정을 Parsing이라 한다. 참고로 Parse라는 영단어의 뜻은 ‘구문 분석하다’이다.

DOM Tree

(출처: 위키피디아)

웹 브라우저가 DOM을 만들 때, DOM은 Tree형태의 계층 구조로 만들어지게 되는데, 이를 DOM Tree 라고 한다.

이러한 DOM Tree의 시작점이 “document” 객체이다. 따라서 DOM을 조작할 때는 주로 document 객체를 사용한다.

Node

DOM의 기본 구성 단위를 Node라고 부른다. DOM Tree의 각 부분이 Node인 것이다.

DOM 선택

DOM을 조작하기 위해서는 먼저 조작하고자 하는 DOM 요소를 선택해야 한다. 이때 다음과 같은 선택 메서드를 사용한다.

document.querySelector(‘CSS selector’)

document 객체의 메서드인 querySelector이다. 인자로는 CSS 선택자가 문자열의 형태로 들어가게 된다. querySelector는 CSS 선택자와 일치하는 첫번째 요소를 선택한다.

document.querySelectorAll(‘CSS selector’)

한편 querySelectorAll은 CSS 선택자와 일치하는 요소 여러 개를 선택하게 된다. 이때 배열과 비슷한 NodeList를 반환한다.

DOM 조작

DOM은 다양한 방법으로 조작할 수 있다.

HTML 컨텐츠 조작

‘textContent’ 속성을 이용하면 된다.

Style 조작

‘style’ 속성을 이용하면 된다.

DOM 요소 조작

(before)

(after)

● document.createElement(‘HTML 태그 명’)

html 요소를 생성하여 반환하는 메서드다.

● Node.appendChild(노드명)

한 노드를 특정 부모 노드의 마지막 자식으로 삽입한다.

● Node.removeChild(노드명)

한 노드를 특정 부모 노드에서 제거한다.

속성 조작

1) 클래스 속성 조작

classList 속성을 통해 어떤 태그에 클래스를 추가하거나 제거할 수 있다.

● Node.classList.add(‘클래스명’)

지정한 클래스 값을 추가할 수 있다.

● Node.classList.remove(‘클래스명’)

지정한 클래스 값을 제거할 수 있다.

● Node.classList.toggle(‘클래스명’)

지정한 클래스 값이 있으면 제거하고, 없으면 추가한다.

2) 일반 속성 조작

일반 HTML 태그 속에 들어 있는 속성(attribute)를 조작할 수 있다.

● Node.getAttribute(‘속성명’)

Node의 지정된 특정 속성의 값을 반환한다.

● Node.setAttribute(‘속성명’, ‘속성 값’)

특정 속성과 속성 값을 설정한다. 이미 속성이 있다면 기존 값은 갱신된다.

● Node.removeAttribute(‘속성명’)

특정 속성을 제거한다.