> 웹 프론트엔드 > JS 튜토리얼 > JavaScript의 DOM 조작

JavaScript의 DOM 조작

DDD
풀어 주다: 2024-12-20 20:12:11
원래의
728명이 탐색했습니다.

DOM Manipulation in JavaScript

7일 차: JavaScript의 DOM 조작

날짜: 2024년 12월 14일

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


1. DOM이란 무엇인가요?

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

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

<html>
  <body>
    <h1>Welcome</h1>
    <p>This is a paragraph.</p>
  </body>
</html>
로그인 후 복사
로그인 후 복사

위의 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: 키를 놓을 때 트리거됩니다.

예:

<html>
  <body>
    <h1>Welcome</h1>
    <p>This is a paragraph.</p>
  </body>
</html>
로그인 후 복사
로그인 후 복사

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿