자바스크립트로 웹 페이지를 자유롭게 다루기 위해서는 DOM에 대한 이해가 필요하다
DOM(Document Object Model)
DOM은 말 그대로 웹 페이지의 모든 콘텐츠들을 객체로 나타내 주는 것이다. 그래서 간단히 생각하면 웹 페이지를 document라 부르고 이러한 document를 자유롭게 다루기 위해 객체화 하고자 구현된 개념이 결국 DOM이라고 생각할 수 있겠다.
cf) HTML 태그와 텍스트, 속성 등 document에 담겨 있는 모든 요소 하나하나를 객체화 한 단위를 Node라고 부른다.
결국 DOM은 웹 페이지를 객체화 한 개념이고 이 웹 페이지의 가장 상단 진입점이 document 객체이다. document 객체는 DOM 트리의 최상위 객체. document 객체는 window 객체 바로 아래에 있는데 window는 생략이 가능하기 때문에 일반적으로는 아래와 같이 document에 바로 접근해서 메서드나 프로퍼티들을 사용한다.
document 객체
window 객체가 브라우저 창을 대변한다면 document 객체는 브라우저 내의 콘텐츠를 보여주는 웹 페이지를 대변한다고 할 수 있다. 심플하게 보면 웹 페이지가 document고 이를 객체화 한 것이 document 객체라고 생각할 수 있겠다.
cf) 브라우저는 HTML 문서를 로드하기 전에 document 객체를 먼저 만든다. 그리고 document 객체를 뿌리로 하는 DOM 트리를 만든다.
window 객체에 대해서는 아래 글 참조.
https://developing-move.tistory.com/222
[Javascript] Window 객체 바로 알기
현재는 다양한 사용처와 플랫폼을 지원하고 있지만, 자바스크립트는 본래 웹 브라우저에서만 사용하기 위해 만들어진 언어다. 그만큼 웹 분야에서의 자바스크립트란 독보적인 존재라고 할 수
developing-move.tistory.com
document 객체의 역할은 다음과 같다.
1) 프로퍼티로 HTML 문서의 전반적인 속성을 나타냄
2) 메서드로 DOM 객체 탐색
3) 메서드로 새로운 DOM 객체 생성
4) 메서드로 HTML 문서에 대한 전반적인 제어 지원
document 객체의 프로퍼티
document 객체를 활용하면 웹 페이지의 상태와 모든 HTML 태그에 접근할 수 있는데 가장 간단하게는 프로퍼티에 태그 이름을 입력해 접근이 가능하다.
document.documentElement // <html> 반환
document.head // <head> 반환
document.title // <title> 반환
document.body // <body> 반환
document.links // href 속성이 있는 <a> 반환
document.images // <img> 반환
document.forms // <form> 반환
document.scripts // <script> 반환
이 외에 웹 페이지의 정보를 담은 프로퍼티들도 있다.
document.doctype // 웹 페이지의 문서 형식을 반환
document.readyState // 웹 페이지의 로딩 상태를 반환
document.documentURI // 웹 페이지의 URI를 반환
document.baseURI // 웹 페이지의 절대 URI를 반환
document.URL // 웹 페이지의 완전한 URL 주소를 반환
document.referrer // 링크(linking)되어 있는 문서의 URI를 반환
document.domain // 웹 페이지가 위치한 서버의 도메인을 반환
document.cookie // 웹 페이지의 쿠키를 반환
document.lastModified // 웹 페이지의 마지막 갱신 날짜 및 시간을 반환
document.inputEncoding // 웹 페이지의 문서 인코딩 형식을 반환
DOM 객체(HTML 태그, Node) 탐색 및 접근
// 파라미터로 전달한 태그 이름을 가진 모든 태그들을 반환(배열)
document.getElementsByTagName(태그이름)
// 파라미터로 전달한 ID를 가진 태그를 반환
document.getElementById(아이디)
// 파라미터로 전달한 클래스 이름을 가진 모든 태그들을 반환(배열)
document.getElementsByClassName(클래스이름)
// 파라미터로 전달한 name 속성을 가진 태그를 반환
document.getElementByName(name속성값)
// 파라미터로 전달한 선택자에 맞는 첫 번째 태그를 반환
document.querySelector(선택자)
// 파라미터로 전달한 선택자에 맞는 모든 태그들을 반환(배열)
document.querySelectorAll(선택자)
DOM 객체 생성
// 1. Element 노드(HTML 태그 노드) 생성, document.createElement(tagName)
const divElement = document.createElement('div');
// 2. Text 노드 생성, document.createTextNode('text')
const textNode = document.createTextNode('Welcome to Javascript');
메서드 이름을 통해 알 수 있는 것과 같이 createElement()를 사용하면 새로운 Element 객체를 생성하고 createTextNode()를 사용하면 텍스트 노드를 생성할 수 있다. 텍스트 노드란 말 그대로 문자를 말한다.
이제 <div></div> 와 같은 형태의 엘리먼트 노드와 Welcome to Javascript 라는 텍스트 노드 객체가 각각 만들어진 것이다. 그렇다고 이들이 곧바로 DOM에 추가가 되는 것은 아니다. 이들은 메모리에 저장되어 있다가 노드를 삽입하는 메서드를 사용해야 실제로 추가된다. 하지만 이 글의 주된 내용은 document 객체를 통해 DOM을 제어할 수 있다는 것이므로 노드의 삽입에 대해서는 간략하게 일부 방법에 대한 예시만 보겠다.
이러한 HTML 문서가 있다고 가정해 보자. 여기에 이전에 보았던 document 객체의 createElement()와 createTextNode()를 이용해 DOM 객체를 생성하고 삽입하는 방법은 다음과 같다.
// 1. Element 노드 생성
const divElement = document.createElement('div');
// 2. Text 노드 생성
const textNode = document.createTextNode('Welcome to Javascript');
// 3. <div></div>에 'Welcome to Javascript' 삽입
divElement.appendChild(textNode); // <div>Welcome to Javascript</div>
// 4. HTML 문서의 contianer div에 접근
const containerNode = document.getElementById('container');
// 5. container div에 <div>Welcome to Javascript</div> 삽입
containerNode.appendChild(divElement);
그리고 위 코드를 실행한 결과는 아래와 같다. appendChild()를 이용해 노드를 삽입하면 접근한 노드의 가장 마지막에 추가된다.
'Javascript > Javascript' 카테고리의 다른 글
| [Javascript] Javascript와 jQuery의 선택자 return 값 차이 바로 알기 (0) | 2024.08.05 |
|---|---|
| [Javascript] 이벤트 추가 바로 알기 (0) | 2024.08.04 |
| [Javascript] undefined과 null 바로 알기 (0) | 2024.08.01 |
| [Javascript] Window 객체 바로 알기 (0) | 2024.08.01 |
| [Javascript] nullish 병합 연산자 '??' (0) | 2024.07.31 |
