[JS] 12장: 문서 객체 모델과 이벤트 다루기 (1)

개요

12장은 완전 새로운 내용이 주를 이룬다. 이번 글에서는 문서 객체 모델과 그 노드를 어떻게 다루는지에 대해 설명하고, 이어지는 글에서 폼 조작법과 이벤트를 다루는 법 등에 대해 설명할 예정이다. 

함수 자체를 외우는건 어려운 일이 아니지만, 오늘 내용을 제대로 활용하기 위해서는 이제 적극적인 실습이 필요할 것 같다. 마침 13장이 실전 프로젝트이기도 하고, 그동안 각 장의 마무리 파트에 있는 과제를 생략해왔으니 배운 모든 내용을 종합해서 복습해 봐야겠다.

문서 객체 모델 이해하기

문서 객체 모델 : 웹 브라우저에 표시되는 HTML 문서 구조를 객체화한 모델 구조.

문서 객체 모델이 생성되는 방식

DOM 트리 : 문서 객체 모델은 트리 구조를 가진다. 

루트 노드는 html이며, html은 head와 body를 자식으로 갖는다. 이때 head와 body는 형제관계이고 html은 head와 body의 부모 노드다.

노드 타입 살펴보기

각 노드에는 타입이 있다.

• 문서 노드 : 최상위 document 객체의 노드 타입
• 요소 노드 : h1, p 태그와 같은 요소의 노드 타입
• 속성 노드 : href, src와 같은 속성의 노드 타입
• 텍스트 노드 : 텍스트에 해당하는 노드 타입
• 주석 노드 : 주석에 해당하는 노드 타입

노드 선택하기

속성으로 노드 선택하기

documnet.firstChild; //<DOCTYPE html>
document.firstElementChild; //html

위와 같이, document 객체를 기준으로 모든 노드에 접근할 수 있다.

또한, 필요에 따라 자식에서 부모 노드로 접근하는 속성도 있다. 

이런 속성들은 노드 탐색 속성으로 불리며, 연속적으로 사용될 수 있다.

메서드로 노드 선택하기

DOM 트리가 복잡해진다면, 원하는 노드를 찾아가는 것이 힘들어진다. 이럴 때는 요소 노드를 바로 선택할 수 있는 메서드를 이용한 노드 선택 방법과 적절하게 조합해서 사용한다.

ex ) getElementById, getElementsByClassName, getElemnetsByTagName.

이 때, 메서드 명에 element 's' 처럼 복수형이라면 HTMLCollection 객체를 반환하며, 유사 배열이기 때문에 인덱스로 접근할 수 있다.

CSS 선택자로 노드를 선택하는 메서드도 있다. 

ex ) querySelector, querySelectorAll

이 방법으로는 조금 더 타게팅된 노드 검색을 실행할 수 있다. 

성능으로만 따지면 query보다 get이 미세하게 좋지만, 현대 웹에서는 무시해도 좋을 수준의 차이이기 때문에 책의 저자는 query를 추천한다.

노드 조작하기

콘텐츠 조작하기

주요 속성 : textContent, innerText, innerHTML.

<p id = "title">
	Hello, <span style="display:none;">Javascript!</span>
</p>

<script>
	document.getElementsByClassName("title").textContent; //Hello, JavaScript!
	document.getElementsByClassName("title").innerText; //Hello,
	document.getElementsByClassName("title").innerHTML; //Hello, <span style="display:none;">Javascript!</span>
</script>

스타일 조작하기

	<p id="text">
            text
        </p>

        <script>
            const pEl = document.querySelector("#text");
            pEl.style.color = "red";
        </script>

주의 사항 : CSS 속성이 대시를 포함한다면 카멜 표기법으로 변경해서 작성해야 한다.

 

클래스 속성 조작하기

css로도 여러 클래스를 묶어 전달할 수 있었는데, 자바의 classList 속성으로 css의 클래스를 특정 노드에 추가할 수 있다. ',' 를 통해 여러 클래스를 한 번에 추가할 수도 있다.

데이터 속성 조작하기

사용자 정의 속성인 데이터 속성에는 (노드).dataset으로 접근할 수 있다.

또한, (노드).dataset.(사용자 정의 이름) 으로 속성값을 바꿀수도 있다.

메서드로 속성 조작하기

getAttribute(속성명)으로 속성값을, setAttribute(속성명, 속성값)으로 속성값 설정을, removeAttribute(속성명)으로 속성 삭제를 할 수 있다.

노드 추가/삭제하기

노드 추가하기

새로운 요소를 추가하기 위해서는 우선 노드를 생성하고, 기존 DOM 트리와 연결해야 한다.

create[Element, TextNode, Attribute]() : 해당하는 노드를 생성한다.

.appendChild : 자식노드를 연결한다.

setAttributeNode : 속성 노드를 연결한다.

노드 삭제하기

(부모노드).removeChild(자식노드) 를 통해 노드를 삭제할 수 있다.