<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 id="title">DOM(Document Object Model)</h1>
<h2 id="sub-title">문서 객체 모델</h2>
</body>
<script src="main.js"></script>
</html>
Document Object Model(DOM) - 문서 객체 모델
웹 브라우저 안에 나타나는 콘텐츠 부분을 웹 페이지라고도 부르지만 웹 문서라고도 표현한다.
그래서 DOM을 간단하게 요약하면 웹 페이지에 나타나는 HTML 문서 전체를 객체로 표현한 것이다.
그리고 이미 사용해봤던 document 객체가 이 웹 문서의 최상단 객체로 진입점의 역할을 하며,
document 객체를 활용하면 웹 페이지 내부에 무엇이든 수정할 수 있고 새로운 컨텐츠를 만들어 낼 수 있다.
▼ 콘솔에 documnet 객체를 출력
// DOM (Document Object Model)
console.log(document);
console.log(typeof document) // document의 자료형 : object
윈도우 객체와는 다르게 HTML 태그가 출력이 되는 것을 볼 수가 있는데
이 document의 자료형은 object이지만 DOM의 경우에는 직접적으로 접근하게되면
객체가 아니라 DOM에 해당하는 HTML이 출력이 된다는 점이다.
▼ 만약 DOM을 태그가아니라 객체로 보고 싶다면 콘솔 객체의 dir 메소드를 활용한다
// DOM (Document Object Model)
console.log(document);
console.log(typeof document); //object
console.dir(document) // dir 메소드를 활용하여 객체확인
console.log 방식으로 출력해서 태그 형태로 출력이된 반면
console.dir 방식으로 출력해서 객체 형태로 출력하여 다양한 프로퍼티들이 출력이 된 모습을 확인할 수 있다.
※ 콘솔에서 값 자체를 확인하고 싶다면 log메소드를,
객체의 속성들을 살펴보고 싶다면 dir 메소드를 활용한다
아무튼 이 DOM 개념에 따르면 문서 내의 모든 태그들은 다 각각의 객체라는 말인데,
querySelector를 활용하여 HTML파일 내의 태그를 선택해보자면
title이라는 id를 가진 태그는 h1 태그인 것을 확인할 수 있다. ▼
<body>
<h1 id="title">DOM(Document Object Model)</h1>
<h2 id="sub-title">문서 객체 모델</h2>
</body>▼ title id에 변수를 생성
const title = document.querySelector('#title')
그러면 콘솔 창에서도 title 변수를 바로 사용할 수있다.
▼ 콘솔창에서 title 입력
이렇게 접근한 title id를 가진 h1 태그가 출력되는 걸 확인할 수 있다.
또한 title에 점을 한번 찍어주면 수많은 프로퍼티들이 존재하는 걸 확인할 수 있다. ▼
▼ 프로퍼티 활용
title.style.color = 'red'
style이라는 프로퍼티에 접근하고 color라는 프로퍼티 값을 red로 할당하였다.
작성하고 엔터를 누르면 h1 태그의 색깔이 red로 변경되는 것을 확인할 수 있다. ▼
이렇게 DOM을 활용하면 자바스크립트로 HTML 태그를 객체처럼 자유롭게 다룰 수 있다.
잠깐 HTML 태그의 구조를 살펴보자면
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 id="title">DOM(Document Object Model)</h1>
<h2 id="sub-title">문서 객체 모델</h2>
</body>
<script src="main.js"></script>
</html>▲ 가장 바깥에 HTML 태그 안에 body 태그와 head 태그, head 태그안에는 meta 태그와 title 태그,
body 태그 안에는 h1,h2 태그와 script 태그로 이렇게 태그 안에 태그 형태의 계층 구조를 이루고 있다.
▲ 그리고 이 계층 간의 관계를 부모 태그와 자식 태그라는 용어로 표현한다.
▲ 또한 DOM도 이 HTML 문서를 객체화한 것이기 때문에 document 객체를 최상위로 해서 똑같이 계층 구조를 이루고 이 것을 나무에 비유해서 DOM 트리라고 표현한다.
▲ 이 DOM 트리에서는 각 객체를 Node 라는 용어로 표현하며
각 노드 간의 관계를 부모 노드와 자식노드 라고 하고
▲ 같은 위치의 노드 끼리는 형제 노드라고 부른다.
DOM 트리의 구조를 잘 파악하고 필요한 노드에 좀 더 자유롭게 접근하기 위해서는
부모, 자식, 형제라고 부르는 관계를 잘 이해해야 한다.
그리고 DOM 트리에 표현되는 노드에는 다양한 타입, 즉 다양한 종류가 있는데
대표적으로 태그를 표현하는 노드(html, head, body, meta, title, h1, h2, script등등)를 요소 노드(Element Node)라고 부르고 문자열을 표현하는 노드 (예를 들면 title, h1과 h2에 있는 텍스트) 를 텍스트 노드(Text Node)라고 부른다,
구조를 이미 다 파악하였다면 일반적으로 텍스트 노드들은 요소 노드의 자식 노드가 된다는 것이며
따로 자식 노드를 가질 수 없기 때문에 나무의 잎사귀에 비유해서 잎 노드(leaf node) 라고 부른다.
사실 잎 노드라는 용어보다는 텍스트 노드는 요소 노드의 자식 노드가 되고
스스로는 자식 노드를 가질 수 없는 구조적인 특징이라고 볼 수 있다.
이 밖에도 HTML 문서에 작성된 코멘트를 표현하는 코멘트 노드(Comment Node)
문서 전체를 표현하는 문서 노드(Documnet Node) 등 12가지 노드 타입이 있지만
현재는 사용하지 않는 타입도 있고 대부분의 DOM 트리는 요소 노드와 텍스트 노드로 구성되기 때문에
다른 것들 보다 이 두 가지는 꼭 기억하는 것이 좋다.
DOM Standard
dom.spec.whatwg.org
★GitHub 주소 (DOM)
https://github.com/SeopE9611/JavaScript_soloPlay/tree/main/interactive_JS/05.DOM
JavaScript_soloPlay/interactive_JS/05.DOM at main · SeopE9611/JavaScript_soloPlay
Contribute to SeopE9611/JavaScript_soloPlay development by creating an account on GitHub.
github.com
'JS' 카테고리의 다른 글
| (7) Interactive JavaScript - 요소 노드 프로퍼티 (0) | 2024.10.10 |
|---|---|
| (6) Interactive JavaScript - Approach the DOM Tree (0) | 2024.10.09 |
| (4) Interactive JavaScript - window 객체 (0) | 2024.10.08 |
| (1)~(3) Interactive JavaScript 내용 정리 (0) | 2024.10.08 |
| (3) Interactive JavaScript - Event and Button_click (0) | 2024.10.08 |