JavaScript 문서 객체 설명: DOM 속성, 메서드 및 실용 예제

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. 소개

JavaScript는 웹 개발에 필수적인 프로그래밍 언어입니다. 핵심 기능 중 document 객체는 웹 페이지의 구조와 내용을 제어하고 조작하는 데 중심적인 역할을 합니다. 이 글에서는 초급부터 중급 사용자까지 이해할 수 있도록 JavaScript document 객체에 대해 배웁니다.

JavaScript는 무엇에 사용되나요?

JavaScript는 HTML 및 CSS와 함께 사용되는 프로그래밍 언어로, 주로 웹 페이지에 동적인 동작과 사용자 인터랙션을 만들기 위해 사용됩니다. 예를 들어 폼 입력 검증, 팝업 메뉴 표시, 애니메이션 효과 추가 등이 있습니다.

특히 document 객체는 JavaScript를 사용해 웹 페이지의 요소에 접근하고 편집하는 기능을 제공합니다. 이 객체를 통해 HTML 요소를 선택하고, 새 요소를 추가하며, 이벤트를 설정하고, 다양한 작업을 수행할 수 있습니다.

왜 document 객체를 배워야 할까요?

document 객체는 DOM(Document Object Model)의 일부로 작동합니다. DOM은 HTML 또는 XML 문서의 구조를 프로그래밍적으로 조작할 수 있는 형태로 표현한 모델이며, 웹 개발에 필수적인 지식입니다.

이 모델을 이해하고 document 객체를 효과적으로 사용하는 방법을 배우면 다음과 같은 상황을 처리할 수 있습니다:

• 사용자 인터페이스의 동적 업데이트
• 실시간 폼 검증
• 비동기 데이터 로드 및 렌더링(AJAX 또는 Fetch API)
• 모달 창 및 팝업 메뉴 구현

이 글에서 배울 내용

이 글은 실용적인 코드 예제를 사용해 document 객체의 기본부터 고급 사용법까지 체계적으로 설명합니다. 읽고 나면 다음을 이해할 수 있게 됩니다:

• document 객체의 기본 구조와 기능
• HTML 요소를 선택하고 조작하는 방법
• 이벤트 리스너 설정 및 실용 예제
• 중요한 주의사항과 모범 사례

초보자는 기본을 확실히 잡을 수 있고, 중급 사용자는 보다 효율적인 코드를 작성하기 위한 힌트를 얻을 수 있습니다.

2. JavaScript document 객체란?

JavaScript에서 document 객체는 웹 페이지 작업을 위한 가장 중요한 인터페이스 중 하나입니다. DOM(Document Object Model)의 일부로 제공되며, 웹 페이지 내부의 요소를 쉽게 조작하고 수정할 수 있게 해줍니다.

document 객체의 역할

document 객체는 브라우저가 로드한 전체 HTML 문서를 나타냅니다. 이를 통해 JavaScript로 HTML 구조, 스타일, 콘텐츠를 프로그래밍적으로 제어할 수 있습니다.

예를 들어 다음과 같은 작업을 할 수 있습니다:

• HTML 요소 선택 및 편집
• 새 요소 생성 및 추가
• 페이지 배경색이나 텍스트 내용 변경
• 이벤트 리스너 설정으로 사용자 행동 감지

DOM과 document 객체의 관계

DOM(Document Object Model)은 HTML 또는 XML 문서를 트리 구조로 표현합니다. 그 트리의 최상위에 위치하는 것이 document 객체입니다.

아래 다이어그램은 DOM과 document 객체 간의 관계를 간단히 보여줍니다.

document
├── html
│   ├── head
│   │   └── title
│   └── body
│       ├── div
│       ├── p
│       └── button

이처럼 document 객체는 전체 페이지를 트리 형태로 나타내며, 각 요소에 접근하기 위한 시작점 역할을 합니다.

document 객체의 기본 사용법

document 객체를 사용하는 몇 가지 간단한 예제를 살펴보겠습니다.

예제 1: 페이지 제목 가져오기

console.log(document.title); // Get the page title

예제 2: 배경색 변경

document.body.style.backgroundColor = "lightblue";

예제 3: 요소 선택 및 편집

let heading = document.getElementById("main-title");
heading.textContent = "New Title";

이러한 작업을 조합하면 인터랙티브하고 동적인 웹 페이지를 만들 수 있습니다.

document 객체의 주요 기능

1. 실시간 업데이트 – 문서의 변경 사항이 즉시 반영됩니다.
2. 계층 구조에 대한 접근 – DOM 트리를 탐색하여 요소를 유연하게 선택하고 수정할 수 있습니다.
3. 이벤트 관리 – 사용자 작업에 기반한 이벤트 리스너를 추가할 수 있습니다.

3. document 객체의 주요 속성과 메서드

JavaScript document 객체는 웹 페이지 작업을 지원하는 많은 속성과 메서드를 제공합니다. 이 섹션에서는 일반적으로 사용되는 속성과 메서드를 소개하겠습니다.

1. 일반적으로 사용되는 속성

아래는 document 객체의 일반적으로 사용되는 속성과 그 용도입니다.

이 속성들은 웹 페이지에 대한 정보를 쉽게 검색하고 업데이트하는 데 도움이 됩니다.

2. 일반적으로 사용되는 메서드

다음은 요소를 조작하고 새로운 요소를 추가하는 데 사용되는 메서드입니다.

3. 속성과 메서드를 결합한 예제

실제 사용 예제를 살펴보겠습니다.

예제 1: 폼 값 가져오기

let form = document.forms[0];
let input = form.elements["username"];
console.log(input.value);

예제 2: 새로운 요소 생성 및 추가

let newParagraph = document.createElement("p");
newParagraph.textContent = "This is a new paragraph.";
document.body.appendChild(newParagraph);

예제 3: 클릭 이벤트 추가

document.getElementById("myButton").addEventListener("click", () => {
    alert("The button was clicked!");
});

4. 요약

document 객체는 웹 페이지를 조작하는 데 유용한 풍부한 속성과 메서드 세트를 제공합니다. 이를 마스터하면 더 상호작용적이고 기능적인 웹 페이지를 만들 수 있습니다.

4. HTML 요소 선택 및 조작 (코드 예제 포함)

JavaScript의 document 객체를 사용하면 HTML 요소를 쉽게 선택하고, 내용을 편집하며, 속성을 변경할 수 있습니다. 이 섹션에서는 코드 예제와 함께 일반적인 선택 및 조작 기법을 자세히 설명하겠습니다.

1. HTML 요소 선택 방법

1-1. ID로 선택 – getElementById()

HTML 요소에 설정된 ID 속성을 사용하여 요소를 선택합니다.

예제: 요소의 텍스트 변경
HTML:

<h1 id="title">Original Title</h1>

JavaScript:

let title = document.getElementById("title");
title.textContent = "New Title"; // Change the text

핵심 포인트

• ID는 고유해야 합니다. 여러 요소에 동일한 ID를 할당할 수 없습니다.

1-2. 클래스 이름으로 선택 – getElementsByClassName()

동일한 클래스 이름을 공유하는 여러 요소를 선택합니다.

예제: 배경색 변경
HTML:

<div class="box">Box 1</div>
<div class="box">Box 2</div>

JavaScript:

let boxes = document.getElementsByClassName("box");
for (let i = 0; i < boxes.length; i++) {
    boxes[i].style.backgroundColor = "lightblue";
}

핵심 포인트

• 배열처럼 요소를 반복하여 하나씩 조작합니다.

1-3. 태그 이름으로 선택 – getElementsByTagName()

지정된 태그 이름을 가진 모든 요소를 선택합니다.

예제: 모든 단락의 색상 변경
HTML:

<p>Paragraph 1</p>
<p>Paragraph 2</p>

JavaScript:

let paragraphs = document.getElementsByTagName("p");
for (let p of paragraphs) {
    p.style.color = "green";
}

1-4. CSS 선택자로 선택 – querySelector() 및 querySelectorAll()

CSS 선택자를 사용하면 요소를 더 유연하게 선택할 수 있습니다.

단일 요소 선택 – querySelector()

let firstDiv = document.querySelector("div.box");
firstDiv.textContent = "Selected box";

여러 요소 선택 – querySelectorAll()

let allDivs = document.querySelectorAll("div.box");
allDivs.forEach(div => div.style.border = "1px solid red");

2. HTML 요소 조작 방법

2-1. 텍스트 또는 HTML 편집

예시: innerHTML과 textContent의 차이
HTML:

<div id="content">Original text</div>

JavaScript:

let content = document.getElementById("content");

// Change text only
content.textContent = "<b>New text</b>"; // Displayed as plain text

// Change including HTML
content.innerHTML = "<b>New text</b>"; // Displayed in bold

핵심 포인트

• textContent는 태그를 일반 문자열로 취급하며 HTML로 해석하지 않습니다.
• innerHTML은 HTML을 직접 적용하지만 보안에 주의해야 합니다 (XSS 방지).

2-2. 속성 편집

예시: 링크 변경
HTML:

<a id="link" href="https://example.com">Original link</a>

JavaScript:

let link = document.getElementById("link");
link.setAttribute("href", "https://google.com"); // Change the URL
link.textContent = "Link to Google";             // Change the label

2-3. 새 요소 만들기 및 추가하기

예시: 새 리스트 항목 추가
HTML:

<ul id="list">
  <li>Item 1</li>
</ul>

JavaScript:

let list = document.getElementById("list");
let newItem = document.createElement("li");
newItem.textContent = "Item 2"; // Create a new item
list.appendChild(newItem);      // Append to the end of the list

2-4. 요소 제거

예시: 버튼 클릭 시 요소 제거
HTML:

<div id="box">Element to be removed</div>
<button id="deleteBtn">Remove</button>

JavaScript:

let box = document.getElementById("box");
let deleteBtn = document.getElementById("deleteBtn");

deleteBtn.addEventListener("click", () => {
    box.remove(); // Remove the element
});

3. 요약

이 섹션에서는 실용적인 예제를 통해 document 객체를 사용하여 HTML 요소를 선택하고 조작하는 방법을 배웠습니다. 이러한 기술을 숙달하면 웹 페이지를 동적으로 제어하는 것이 훨씬 쉬워집니다.

5. 새 요소 만들기 및 추가 단계 (다이어그램 포함)

JavaScript의 document 객체를 사용하면 새 HTML 요소를 동적으로 생성하고 기존 페이지에 추가할 수 있습니다. 이 섹션에서는 코드 예제와 다이어그램을 통해 요소를 만들고 추가하는 구체적인 단계를 설명합니다.

1. 새 요소 만들기

1-1. 요소 만들기 – createElement()

document.createElement() 메서드를 사용하여 새 HTML 요소를 생성합니다.

예시: 새 단락 요소 만들기

let newParagraph = document.createElement("p"); // Create a new <p> element
newParagraph.textContent = "This paragraph was added dynamically."; // Set the text

핵심 포인트

• 생성된 요소는 아직 DOM에 추가되지 않았습니다.
• 텍스트와 속성을 자유롭게 설정할 수 있습니다.

2. 요소에 속성과 스타일 설정하기

2-1. 속성 설정 – setAttribute()

생성된 요소에 속성을 설정하려면 setAttribute() 메서드를 사용합니다.

예시: 링크 요소에 속성 추가하기

let link = document.createElement("a");
link.textContent = "Google";
link.setAttribute("href", "https://google.com"); // Set the URL
link.setAttribute("target", "_blank");           // Open in a new tab

2-2. 스타일 설정 – style 속성

디자인을 직접 지정하려면 style 속성을 사용합니다.

예시: 버튼 스타일 지정

let button = document.createElement("button");
button.textContent = "Click";
button.style.backgroundColor = "blue"; // Background color
button.style.color = "white";          // Text color
button.style.padding = "10px 20px";    // Padding

3. 요소를 페이지에 추가하기

appendChild() 또는 insertBefore()를 사용하여 생성된 요소를 DOM에 추가할 수 있습니다.

3-1. 끝에 추가 – appendChild()

예시: 리스트 항목 추가
HTML:

<ul id="list">
  <li>Item 1</li>
</ul>

JavaScript:

let list = document.getElementById("list");
let newItem = document.createElement("li");
newItem.textContent = "Item 2"; // Create a new item
list.appendChild(newItem);      // Append to the end of the list

3-2. 특정 위치에 추가 – insertBefore()

예시: 지정된 위치에 항목 삽입

let referenceItem = list.firstElementChild; // Use the first item as a reference
list.insertBefore(newItem, referenceItem);  // Insert before the first item

4. 요소 제거

removeChild() 또는 remove()를 사용하여 생성된 요소를 제거할 수 있습니다.

4-1. 자식 요소 제거 – removeChild()

let itemToRemove = list.lastElementChild; // Get the last item
list.removeChild(itemToRemove);           // Remove it

4-2. 요소 자체 제거 – remove()

newItem.remove(); // Remove itself

5. 실용 예제: 카드 요소 동적으로 생성하기

아래는 새로운 “card” 요소를 동적으로 생성하고, 스타일을 설정한 뒤 페이지에 추가하는 예제입니다.

HTML:

<div id="container"></div>

JavaScript:

let container = document.getElementById("container");

// Create the card element
let card = document.createElement("div");
card.classList.add("card"); // Add a class

// Create the card title
let title = document.createElement("h2");
title.textContent = "Card Title";

// Create the card body text
let description = document.createElement("p");
description.textContent = "This is the description text for the card.";

// Assemble and append
card.appendChild(title);
card.appendChild(description);
container.appendChild(card); // Append to the page

// Styling
card.style.border = "1px solid #ccc";
card.style.padding = "10px";
card.style.margin = "10px";
card.style.width = "200px";
card.style.boxShadow = "0 4px 6px rgba(0, 0, 0, 0.1)";

결과:

Card Title
This is the description text for the card.

6. 요약

이 섹션에서는 새로운 요소를 생성하고, 속성과 스타일을 설정한 뒤 페이지에 추가하는 전체 워크플로우를 배웠습니다. 이러한 기술을 적용하면 동적 웹 콘텐츠를 생성하는 것이 훨씬 쉬워집니다.

6. 이벤트 리스너 설정 방법 (실용 예제)

JavaScript에서는 document 객체를 사용해 이벤트 리스너를 설정하고 사용자 동작에 따라 동적 처리를 실행할 수 있습니다. 이 섹션에서는 이벤트 리스너의 기본 개념부터 실용적인 사용 예제까지 모두 설명합니다.

1. 이벤트 리스너란?

이벤트 리스너는 클릭, 입력, 마우스 이동 등 사용자 동작을 감지하고 해당 작업을 실행하는 메커니즘입니다.

예시: 기본 클릭 이벤트

document.getElementById("myButton").addEventListener("click", () => {
    alert("The button was clicked!");
});

2. 이벤트 리스너 추가 방법

2-1. addEventListener() 기본 사용법

addEventListener() 메서드는 다음 구문을 사용합니다:

element.addEventListener(event, function, useCapture);

매개변수 설명

1. event – 이벤트 유형 (예: click, mouseover, keydown).
2. function – 실행할 함수 (익명 또는 명명된 함수).
3. useCapture – 이벤트 전파 방식 (true는 캡처, false는 버블링).

예시: mouseover 이벤트 추가

let box = document.getElementById("box");
box.addEventListener("mouseover", () => {
    box.style.backgroundColor = "lightblue";
});

3. 자주 사용되는 이벤트 유형

아래는 자주 사용되는 이벤트 유형과 예시입니다.

4. 실용적인 이벤트 리스너 예제

4-1. 버튼 클릭으로 텍스트 변경

HTML:

<button id="changeText">Change</button>
<p id="text">Original text</p>

JavaScript:

let button = document.getElementById("changeText");
let text = document.getElementById("text");

button.addEventListener("click", () => {
    text.textContent = "New text";
});

4-2. Real-time input detection

HTML:

<input type="text" id="nameInput" placeholder="Enter your name">
<p id="output"></p>

JavaScript:

let input = document.getElementById("nameInput");
let output = document.getElementById("output");

input.addEventListener("input", () => {
    output.textContent = "Input: " + input.value;
});

4-3. Change background color on hover

HTML:

<div id="hoverBox" style="width: 100px; height: 100px; background-color: lightgray;"></div>

JavaScript:

let hoverBox = document.getElementById("hoverBox");

hoverBox.addEventListener("mouseover", () => {
    hoverBox.style.backgroundColor = "yellow";
});

hoverBox.addEventListener("mouseout", () => {
    hoverBox.style.backgroundColor = "lightgray";
});

5. How to remove event listeners

You can remove an event listener using the removeEventListener() method.

Example: Remove a click event

function handleClick() {
    alert("Clicked!");
}

let button = document.getElementById("myButton");
button.addEventListener("click", handleClick);

// Remove the event listener
button.removeEventListener("click", handleClick);

Important note

• To remove an event listener, you must reference the same function. Anonymous functions cannot be removed.

6. Summary

In this section, you learned how to set up event listeners, common event types, and practical usage examples. Mastering event handling is essential for creating interactive web applications.

7. Common Practical Use Cases and Applied Scenarios

The JavaScript document object can be applied in many real-world scenarios. In this section, we introduce common use cases and applied scenarios frequently seen in actual development.

1. Dynamic form validation

Form input validation is important for improving user experience. Below is an example that checks input in real time.

HTML

<form id="signupForm">
  <label for="email">Email:</label>
  <input type="email" id="email" required>
  <span id="emailError" style="color: red;"></span>
  <br>
  <button type="submit">Submit</button>
</form>

JavaScript

let emailInput = document.getElementById("email");
let emailError = document.getElementById("emailError");
let form = document.getElementById("signupForm");

// Input validation
emailInput.addEventListener("input", () => {
    let emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailPattern.test(emailInput.value)) {
        emailError.textContent = "Please enter a valid email address.";
    } else {
        emailError.textContent = "";
    }
});

// Check on form submission
form.addEventListener("submit", (event) => {
    if (emailError.textContent !== "") {
        event.preventDefault();
        alert("There is an error in your input.");
    }
});

2. Dynamic content generation

This example dynamically generates new elements based on user actions.

HTML

<div id="container"></div>
<button id="addItem">Add item</button>

JavaScript

let container = document.getElementById("container");
let addButton = document.getElementById("addItem");

addButton.addEventListener("click", () => {
    let newItem = document.createElement("div");
    newItem.textContent = "New item";
    newItem.style.border = "1px solid #ccc";
    newItem.style.padding = "10px";
    newItem.style.margin = "5px 0";
    container.appendChild(newItem);
});

Result: A new item is added each time the button is clicked.

8. Cautions and Best Practices

The JavaScript document object is very powerful, but improper usage can negatively impact performance and security. In this section, we introduce important cautions and best practices to keep your code safe and efficient.

1. Performance optimization

1-1. DOM 작업 최소화

DOM 작업은 비용이 많이 들므로 수행 횟수를 줄여야 합니다.

잘못된 예 (루프 안에서 반복되는 DOM 작업)

for (let i = 0; i < 100; i++) {
    let div = document.createElement("div");
    div.textContent = "Item " + i;
    document.body.appendChild(div);
}

개선된 예 (Document Fragment 사용)

let fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
    let div = document.createElement("div");
    div.textContent = "Item " + i;
    fragment.appendChild(div);
}
document.body.appendChild(fragment);

핵심 포인트

• 프래그먼트를 한 번의 작업으로 DOM에 추가할 수 있어 성능이 향상됩니다.

1-2. 리플로우 및 리페인트 감소

스타일을 자주 변경하면 리플로우와 리페인트가 발생해 렌더링이 느려질 수 있습니다.

잘못된 예

let box = document.getElementById("box");
box.style.width = "100px";
box.style.height = "100px";
box.style.backgroundColor = "red";

개선된 예 (배치 업데이트)

let box = document.getElementById("box");
Object.assign(box.style, {
    width: "100px",
    height: "100px",
    backgroundColor: "red"
});

2. 보안 고려사항

2-1. XSS 공격 방지

innerHTML을 사용하면 악성 스크립트가 삽입될 수 있습니다.

위험한 예

let userInput = "<script>alert('Attack!')</script>";
document.getElementById("output").innerHTML = userInput;

안전한 예

let userInput = "<script>alert('Attack!')</script>";
document.getElementById("output").textContent = userInput;

핵심 포인트

• 사용자 입력을 표시하기 전에 항상 정제(sanitize)해야 합니다.

2-2. 이벤트 리스너 적절히 관리하기

사용되지 않는 이벤트 리스너를 제거하지 않으면 메모리 누수가 발생할 수 있습니다.

잘못된 예

document.getElementById("button").addEventListener("click", () => {
    alert("Clicked!");
});

개선된 예 (필요 없을 때 리스너 제거)

function handleClick() {
    alert("Clicked!");
}
let button = document.getElementById("button");
button.addEventListener("click", handleClick);
button.removeEventListener("click", handleClick);

3. 가독성 및 유지보수성

3-1. 일관된 네이밍 규칙

역할을 명확히 나타내는 설명적인 변수 및 함수 이름을 사용하세요.

잘못된 예

let a = document.getElementById("username");
let b = document.getElementById("password");

개선된 예

let usernameInput = document.getElementById("username");
let passwordInput = document.getElementById("password");

3-2. 재사용 가능한 함수 만들기

코드를 함수로 리팩터링하면 중복을 줄이고 유지보수성을 향상시킬 수 있습니다.

잘못된 예

document.getElementById("btn1").addEventListener("click", () => alert("Button 1"));
document.getElementById("btn2").addEventListener("click", () => alert("Button 2"));

개선된 예

function handleClick(message) {
    alert(message);
}

document.getElementById("btn1").addEventListener("click", () => handleClick("Button 1"));
document.getElementById("btn2").addEventListener("click", () => handleClick("Button 2"));

4. 모바일 및 반응형 고려사항

JavaScript를 사용할 때 모바일 기기에서도 원활하게 동작하도록 해야 합니다.

팁 및 대책

1. 클릭 이벤트 대안 – 모바일에서는 touchstart 또는 touchend를 고려하세요.
2. 뷰포트 설정 – 원치 않는 확대를 방지하도록 뷰포트를 적절히 구성하세요.

   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   

3. 미디어 쿼리와 결합 – 반응형 레이아웃을 위해 CSS 미디어 쿼리를 사용하세요.

5. 요약

이 섹션에서는 document 객체를 안전하고 효율적으로 사용하기 위한 중요한 주의사항과 모범 사례를 다루었습니다.

• 성능 최적화 : DOM 작업을 최소화합니다.
• 보안 : XSS를 방지하고 사용자 입력을 안전하게 처리합니다.
• 유지보수성 : 읽기 쉽고 재사용 가능한 코드를 작성합니다.
• 모바일 지원 : 반응형 디자인과 터치 이벤트를 고려합니다.

9. FAQ: 초보자를 위한 일반 질문

JavaScript document 객체를 사용하기 시작한 초보자들은 다양한 질문과 문제에 직면하는 경우가 많습니다. 이 섹션에서는 Q&A 형식으로 일반적인 질문에 답변합니다.

Q1. getElementById() 로 요소를 선택할 수 없는 이유는 무엇인가요?

A:
공통적인 이유는 다음과 같습니다:

1. 잘못된 ID

• 지정된 ID가 존재하지 않거나 오타가 있습니다.
• 해결책 : HTML에 있는 ID가 JavaScript에서 사용한 ID와 일치하는지 확인합니다.

2. 스크립트 실행 시점

• JavaScript가 HTML이 로드되기 전에 실행되면 요소가 아직 존재하지 않습니다.
• 해결책 : DOMContentLoaded 이벤트를 사용합니다.

  document.addEventListener("DOMContentLoaded", () => {
      let element = document.getElementById("myDiv");
      console.log(element.textContent);
  });
  

Q2. innerHTML과 textContent의 차이점은 무엇인가요?

A:

• innerHTML : HTML 태그를 포함한 모든 콘텐츠를 가져오거나 설정합니다.
• textContent : 텍스트 콘텐츠만 가져오거나 설정합니다 (HTML 태그는 무시됩니다).

Q3. querySelectorAll()이 반환한 요소들을 수정할 수 없는 이유는 무엇인가요?

A:
querySelectorAll()는 정적 NodeList를 반환하며, 이는 배열이 아닙니다. 변경을 적용하려면 반복문을 사용해 순회해야 합니다.

let items = document.querySelectorAll(".item");
items.forEach(item => {
    item.style.color = "blue";
});

Q4. addEventListener()가 작동하지 않는 이유는 무엇인가요?

A:
가능한 이유는 다음과 같습니다:

1. 요소를 찾을 수 없음

• 대상 요소가 올바르게 선택되지 않았습니다.
• 해결책 : 콘솔에서 해당 요소가 존재하는지 확인합니다.

Q5. removeChild()가 오류를 발생시키는 이유는 무엇인가요?

A:
제거하려는 요소는 반드시 부모 요소의 자식이어야 합니다.

let list = document.getElementById("list");
let item = document.getElementById("item1");
list.removeChild(item);

6. 요약

이 FAQ 섹션에서는 초보자들이 흔히 겪는 문제들을 다루었습니다. 요소 선택, 실행 시점, 올바른 메서드 사용에 주의를 기울이면 많은 문제를 예방할 수 있습니다.

10. 결론 및 다음 단계

이 글을 통해 기본 개념부터 실용적인 적용까지 JavaScript document 객체에 대해 배웠습니다. 핵심 포인트를 정리하고 다음 학습 단계에 대해 살펴보겠습니다.

document 객체를 마스터하면 동적이고 인터랙티브하며 효율적인 웹 애플리케이션을 구축할 수 있는 기반을 얻게 됩니다. 다음 단계로는 고급 DOM 조작, API 통합, 최신 프레임워크 등을 탐구하여 실력을 더욱 향상시켜 보세요.