JavaScript의 DOM 조작 이해: 초보자 가이드-JS 튜토리얼-php.cn

JavaScript의 DOM 조작 이해: 초보자 가이드

Susan Sarandon

풀어 주다： 2025-01-17 22:32:10

원래의

736명이 탐색했습니다.

Understanding DOM Manipulation in JavaScript: A Beginner’s Guide

이 초보자 가이드에서는 대화형 웹 페이지를 만들기 위한 강력한 기술인 JavaScript의 DOM(문서 개체 모델) 조작을 살펴봅니다. 정적 콘텐츠를 역동적이고 매력적인 경험으로 변환할 수 있는 기본 사항을 다루겠습니다.

DOM 이해

DOM은 HTML 문서를 트리와 같은 객체 구조로 표현하는 프로그래밍 인터페이스입니다. 가계도처럼 생각해 보세요. <html> 태그는 <head> 및 <body>로 분기되는 루트이며, 이는 <title>, <div> 및 과 같은 다른 요소로 추가로 분기됩니다. JavaScript를 사용하면 이러한 요소에 액세스하고 수정하고 추가하고 제거하고 재정렬할 수 있습니다.

DOM 조작을 배워야 하는 이유

동적 콘텐츠: 사용자 작업에 따라 웹페이지 콘텐츠(텍스트, 이미지)를 업데이트합니다.
대화형 기능: 모달, 드롭다운, 슬라이더와 같은 요소를 만듭니다.
이벤트 처리: 사용자 입력(클릭, 키 누르기, 마우스 이동)에 응답합니다.

DOM 요소 액세스

요소를 선택하는 것이 첫 번째 단계입니다. JavaScript는 여러 가지 방법을 제공합니다:

1. 아이디별

<code class="language-javascript">const element = document.getElementById('myId');</code>

로그인 후 복사

2. 클래스 이름별

<code class="language-javascript">const elements = document.getElementsByClassName('myClass');</code>

로그인 후 복사

3. 태그 이름별

<code class="language-javascript">const paragraphs = document.getElementsByTagName('p');</code>

로그인 후 복사

4. CSS 선택기 사용(querySelector/querySelectorAll)

<code class="language-javascript">const firstElement = document.querySelector('.myClass'); // First element matching the selector
const allElements = document.querySelectorAll('.myClass'); // All matching elements</code>

로그인 후 복사

일반적인 DOM 조작

1. 콘텐츠 변경

요소 텍스트 또는 HTML 수정:

- 텍스트 내용:

<code class="language-javascript">document.getElementById('example').textContent = 'New Text';</code>

로그인 후 복사

- HTML 콘텐츠:

<code class="language-javascript">document.getElementById('example').innerHTML = '<b>Bold Text</b>';</code>

로그인 후 복사

2. 속성 변경

요소 속성 업데이트 또는 추가:

<code class="language-javascript">const image = document.querySelector('img');
image.setAttribute('src', 'newImage.jpg');
image.setAttribute('alt', 'New Description');</code>

로그인 후 복사

3. 스타일 수정

.style 또는 CSS 클래스를 사용하여 요소 모양 변경:

<code class="language-javascript">const box = document.getElementById('box');
box.style.backgroundColor = 'blue';
box.style.color = 'white';

box.classList.add('active');
box.classList.remove('inactive');
box.classList.toggle('highlight');</code>

로그인 후 복사

4. 요소 추가 및 제거

요소를 동적으로 생성 및 조작:

- 생성 및 추가:

<code class="language-javascript">const newDiv = document.createElement('div');
newDiv.textContent = 'I am a new div!';
document.body.appendChild(newDiv);</code>

로그인 후 복사

- 요소 제거:

<code class="language-javascript">const element = document.getElementById('removeMe');
element.remove();</code>

로그인 후 복사

이벤트 처리

DOM 조작과 이벤트 리스너를 결합하여 사용자 작업에 응답합니다.

예: 버튼 클릭

(간결함을 위해 예제 코드는 생략되었지만 버튼 요소에 이벤트 리스너를 추가하는 것도 포함됩니다.)

공통 이벤트: click, mouseover, keydown 등

DOM 탐색

관련 요소에 액세스하려면 .parentNode, .parentElement, .children, .childNodes, .nextElementSibling, .previousElementSibling 등의 속성을 사용하여 DOM 트리를 탐색하세요.