JavaScript - DOM Document: A Beginner's Guide

안녕하세요, 열망하는 프로그래머 여러분! 오늘 우리는 자바스크립트와 문서 객체 모델(DOM)의 세계로 흥미로운 여정을 떠납니다. 이 용어들이 조금 두려울 수 있지만, 이 튜토리얼이 끝나면 당신은 웹 페이지를 마음대로 조작할 수 있을 것입니다!

JavaScript - DOM Document

HTML DOM Document는 무엇인가요?

집을 짓는 것을 상상해보세요. 그 집의 도면은 HTML 문서와 같고, 브라우저에서 보이는 실제 집은 그 도면에 따라 만들어집니다. 그런데 집이 지어진 후에 벽의 색을 바꾸고 싶거나 새로운 창을 추가하고 싶다면 어떻게 할까요? 이때 DOM이 등장합니다!

HTML DOM(문서 객체 모델)은 HTML 문서를 프로그래밍 인터페이스로 제공합니다. 문서의 구조를 트리와 같은 계층 구조로 표현하며, 각 노드는 문서의 일부를 나타내는 객체입니다.

문서 객체

이 트리의 뿌리는 document 객체입니다. 이는 우리 집의 기초와 같아서, 모든 것은 이 위에 쌓입니다.

간단한 예제를 시작해보겠습니다:

<!DOCTYPE html>
<html>
<head>
<title>My First DOM Page</title>
</head>
<body>
<h1>Welcome to DOM!</h1>
<p>This is a paragraph.</p>
</body>
</html>

이 HTML 구조에서 document가 최상단에 있고, 그 뒤로 html, head, body 등이 이어집니다.

DOM Document 객체에 접근하는 방법

이제 DOM이 무엇인지 이해했으니, 접근 방법을 배워보겠습니다. 자바스크립트에서는 document 키워드를 사용하여 문서 객체에 쉽게 접근할 수 있습니다.

간단한 예제를 보겠습니다:

console.log(document);

브라우저 콘솔에서 이를 실행하면 전체 문서 객체를 볼 수 있습니다. 마치 우리 집을 위에서 내려다보는 것과 같습니다!

DOM Document 속성

문서 객체는 HTML 문서의 다양한 부분에 접근할 수 있도록 하는 많은 속성을 가지고 있습니다. 몇 가지 속성을 탐구해보겠습니다:

Document childElementCount 속성

childElementCount 속성은 요소가 가지는 자식 요소의 수를 반환합니다. 문서 객체의 경우, <html> 요소의 직접 자식 요소의 수를 반환합니다.

console.log(document.childElementCount);

보통 1을 반환합니다. <html> 요소는 보통 하나의 직접 자식 요소만 가지고 있습니다: <body> 요소입니다.

Document Links 속성

links 속성은 문서 내의 모든 <a>와 <area> 요소 중 href 속성을 가진 요소들의 모음을 반환합니다.

console.log(document.links);

이는 "우리 집에 몇 개의 문(링크)이 있는가?"를 묻는 것과 같습니다.

Document Title 속성

title 속성은 현재 문서의 제목을 가져오거나 설정합니다.

console.log(document.title);
document.title = "My New Title";

이는 집의 명판을 변경하는 것과 같습니다!

실무 예제

이제 우리의 지식을 실제 세계의 예제로 적용해보겠습니다:

예제 1: 페이지 제목 변경

document.title = "Welcome to " + document.title;
console.log("The new title is: " + document.title);

이 스크립트는 현재 페이지 제목의 앞에 "Welcome to "를 추가합니다. 마치 집의 명판에 친절한 인사를 추가하는 것과 같습니다!

예제 2: 링크 수 계산

let linkCount = document.links.length;
console.log("This page has " + linkCount + " links.");

이 스크립트는 페이지에 몇 개의 링크가 있는지 계산합니다. 마치 집을 나가는 길이 몇 개인지 세는 것과 같습니다!

예제 3: 페이지 내용 수정

let newHeading = document.createElement("h2");
newHeading.textContent = "This heading was added by JavaScript!";
document.body.appendChild(newHeading);

이 스크립트는 새로운 <h2> 요소를 생성하고, 그 텍스트 내용을 설정한 후, <body>의 끝에 추가합니다. 마치 자바스크립트로 새로운 방을 추가하는 것과 같습니다!

일반적인 DOM Document 메서드

다음은 일부 일반적인 DOM 문서 메서드입니다:

메서드	설명
`document.getElementById(id)`	지정된 ID를 가진 요소를 반환합니다
`document.getElementsByClassName(name)`	지정된 클래스 이름을 가진 요소들의 모음을 반환합니다
`document.getElementsByTagName(name)`	지정된 태그 이름을 가진 요소들의 모음을 반환합니다
`document.createElement(name)`	요소 노드를 생성합니다
`document.createTextNode(text)`	텍스트 노드를 생성합니다
`document.querySelector(selector)`	CSS 선택자와 일치하는 첫 번째 요소를 반환합니다
`document.querySelectorAll(selector)`	CSS 선택자와 일치하는 모든 요소들을 반환합니다

결론

축하합니다! 당신은 자바스크립트를 사용한 DOM 조작의 첫 걸음을 내딛었습니다. DOM은 동적이고 상호작용적인 웹 페이지를 만드는 도구입니다. 마치 마법의 지팡이를 가지고 있어서, 웹 페이지의 어떤 부분이든 마음대로 바꿀 수 있습니다!

여러분의 여정을 계속하면서 더 많은 흥미로운 방법을 발견할 것입니다. 연습을 계속하고, 호기심을 유지하며, 두려워 말고 실험해보세요. 얼마 지나지 않아, 당신의 자바스크립트 멜로디에 춤을 추는 웹 페이지를 만들 수 있을 것입니다!

미래의 웹 마법사 여러분, 행복하게 코딩하세요!

Credits: Image by storyset