[JavaScript] 자바스크립트 DOM (Document Obejct Model) 가볍게 이해하기

📚 Study/JS, JQuery

[JavaScript] 자바스크립트 DOM (Document Obejct Model) 가볍게 이해하기 - 1

kkh1902 2022. 3. 13. 18:58

728x90

자바스크립트로 웹 페이지 좀 더 자유롭게 다루려면 DOM에 대한 이해가 필요하다.

문서 객체 모델 (DOM)

문서 객체 모델(Document Object Model, DOM)은 말 그대로 웹 페이지 내의 모든 콘텐츠를 객체로 나타내 주는 것이다. 그래서 간단하게 생각하면 웹 페이지를 document라고 부르고, document를 자유롭게 다루기 위해서 객체화 하고자 구현된 개념이 결국이 DOM이라고 생각할 수 있겠다.

그리고 HTML 태그와 글자, 속성 등 document의 담겨있는 모든 요소들을 하나하나를 객체화 한 단위를 가리켜 노드(Node)라고 부른다.

아무튼, 결국 DOM은 웹 페이지를 객체화 한 개념이고, 이 웹페이지의 가장 상단 진입점이 바로 document 객체이다.

document 객체는 전역 객체인 window 객체의 바로 아래 있는데, window 객체는 앞에 window를 생략해도 되기 때문에 일반적으로는 document에 바로 접근해서 메서드나 프로퍼티들을 활용한다.

window.document
document // window는 생략될 수 있다.

Document 객체

window객체가 브라우저 창을 대변하는 것이라면 document 객체는, 브라우저 내에서 컨텐츠를 보여주는 웹 페이지 자체를 대변한다고 할 수 있다. 간단하게 웹 페이지가 document고, 이를 객체화한 것이 document 객체라고 생각해볼 수도 있겠다.

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 // 웹 페이지의 문서 인코딩 형식을 반환

HTML 태그 (노드) 선택하기

뿐 만 아니라 메소드들을 사용하면 다양한 방법으로 웹 페이지 내의 태그들에 접근할 수 있다.

// 파라미터로 전달한 태그이름을 가진 모든 태그들을 반환(배열)
document.getElementsByTagName(태그이름)

// 파라미터로 전달한 ID를 가진 태그를 반환
document.getElementById(아이디)

// 파라미터로 전달한 클래스 이름을 가진 모든 태그들을 반환(배열)
document.getElementsByClassName(클래스이름)

// 파라미터로 전달한 name 속성을 가진 태그를 반환
document.getElementByName(name속성값)

// 파라미터로 전달한 선택자에 맞는 첫 번째 태그를 반환
document.querySelector(선택자)

// 파라미터로 전달한 선택자에 맞는 모든 태그들을 반환(배열)
document.querySelectorAll(선택자)

728x90