JavaScript의 DOM 조작

7일 차: JavaScript의 DOM 조작

날짜: 2024년 12월 14일

JavaScript 학습 여정 7일차에 오신 것을 환영합니다! 오늘의 주제는 JavaScript의 가장 흥미로운 측면 중 하나인 DOM 조작에 중점을 둡니다. DOM 조작을 통해 웹페이지의 요소를 동적으로 업데이트, 추가 또는 제거하여 대화형 및 사용자 친화적인 페이지를 만들 수 있습니다. 오늘 수업이 끝나면 간단한 To-Do List 프로젝트도 만들어서 지식을 실제로 적용해 볼 수 있습니다.

---

1. DOM이란 무엇인가요?

문서 개체 모델(DOM)은 웹 문서용 프로그래밍 인터페이스입니다. HTML 문서의 구조를 개체 트리로 표현하므로 JavaScript를 사용하여 프로그래밍 방식으로 요소에 액세스하고 조작할 수 있습니다.

다음은 DOM이 HTML을 나타내는 방법의 예입니다.

  
    <h1 id="Welcome">Welcome</h1>
    <p>This is a paragraph.</p>
  

위의 DOM 트리는 다음과 같습니다.

Document
 └── html
      └── body
           ├── h1
           └── p

---

2. DOM 요소 액세스

여러 가지 방법을 사용하여 DOM의 요소에 액세스할 수 있습니다.

getElementById 사용

let title = document.getElementById("title");
console.log(title); // Logs the element with ID "title"

getElementsByClassName 사용

let items = document.getElementsByClassName("item");
console.log(items); // Logs all elements with class "item"

querySelector 및 querySelectorAll 사용

let firstItem = document.querySelector(".item"); // First element with class "item"
let allItems = document.querySelectorAll(".item"); // All elements with class "item"

---

3. DOM 요소 수정

콘텐츠 변경

다음을 사용하여 요소 내부의 텍스트나 HTML을 업데이트할 수 있습니다.

• innerText: 표시되는 텍스트를 업데이트합니다.
• innerHTML: HTML 콘텐츠를 업데이트합니다.

let title = document.getElementById("title");
title.innerText = "Updated Title"; // Changes visible text
title.innerHTML = "<strong>Updated Title</strong>"; // Adds HTML formatting

스타일 변화

요소의 CSS 스타일을 직접 수정할 수 있습니다.

let title = document.getElementById("title");
title.style.color = "blue";
title.style.fontSize = "24px";

수업 추가 또는 제거

let box = document.getElementById("box");
box.classList.add("highlight");  // Adds a class
box.classList.remove("highlight"); // Removes a class

---

4. 이벤트 처리

이벤트를 사용하면 웹페이지를 대화형으로 만들 수 있습니다. 다음은 몇 가지 일반적인 이벤트 유형과 이를 처리하는 방법입니다.

인라인 이벤트 처리

HTML:

<button onclick="alert('Button Clicked!')">Click Me</button>

addEventListener 사용

이 접근 방식은 JavaScript와 HTML을 분리하므로 선호됩니다.

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

공통행사

• 클릭: 요소를 클릭하면 트리거됩니다.
• mouseover: 마우스를 요소 위로 가져갈 때 트리거됩니다.
• keyup: 키를 놓을 때 트리거됩니다.

예:

  
    <h1 id="Welcome">Welcome</h1>
    <p>This is a paragraph.</p>
  

---

5. 프로젝트: 할 일 목록

배운 내용을 간단한 To-Do List 애플리케이션에 결합해 보세요.

HTML 구조

Document
 └── html
      └── body
           ├── h1
           └── p

작동 방식

1. 사용자가 입력 필드에 작업을 입력합니다.
2. '작업 추가'를 클릭하면 새
3. 작업이 있는 요소입니다.
4. 각 작업에는 작업을 제거할 수 있는 "삭제" 버튼이 있습니다.

---

6. 주요 시사점

1. DOM 액세스: getElementById 및 querySelector와 같은 메소드를 사용하세요.
2. DOM 수정: 콘텐츠, 스타일, 클래스를 동적으로 변경합니다.
3. 이벤트 처리: addEventListener를 사용하여 페이지를 대화형으로 만드세요.
4. 연습 프로젝트: 지식을 강화하기 위해 할 일 목록을 작성하세요.

---

7일차 연습 과제

1. 할 일 목록에 '완료로 표시' 기능을 추가하세요.
2. 사용자가 품목과 수량을 입력할 수 있는 쇼핑 목록 앱을 만듭니다.
3. 작은 프로젝트에서 mouseover 및 keydown과 같은 이벤트 유형을 실험해 보세요.

---

다음 단계

내일 8일차에는 오류 처리 및 디버깅에 대해 알아보고 JavaScript 코드에서 예상치 못한 문제를 처리하는 방법을 알아봅니다. 그럼 또 만나요!

위 내용은 JavaScript의 DOM 조작의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!