나의 React 여정: 5일차

오늘은 웹 개발의 기본 개념인 DOM Manipulation의 세계로 모험을 떠났습니다. DOM(문서 개체 모델)은 HTML과 JavaScript 사이의 다리 역할을 하며 웹 페이지와 동적으로 상호 작용하고 수정할 수 있도록 해줍니다. 제가 배운 내용은 다음과 같습니다.

DOM 조작이란 무엇입니까?
DOM 조작은 JavaScript를 사용하여 웹페이지의 구조, 스타일 또는 콘텐츠와 상호작용하고 변경하는 프로세스입니다.

요소 액세스
DOM을 조작하려면 먼저 요소를 선택하거나 액세스해야 합니다. JavaScript는 이를 달성하기 위한 여러 가지 방법을 제공합니다.

getElementById: ID로 요소를 선택합니다.

const header = document.getElementById('main-header');
console.log(header); // Logs the element with ID 'main-header'

querySelector: CSS 선택기를 사용하여 첫 번째로 일치하는 요소를 선택합니다.

const firstButton = document.querySelector('.btn');
console.log(firstButton); // Logs the first element with class 'btn'

querySelectorAll: 일치하는 모든 요소를 ​​NodeList로 선택합니다.

const allButtons = document.querySelectorAll('.btn');
console.log(allButtons); // Logs a list of all elements with class 'btn'

다른 방법:

• getElementsByClassName(클래스 이름으로 요소 선택).
• getElementsByTagName(태그 이름으로 요소 선택).

요소 조작
1. 콘텐츠 변경
요소의 내용을 변경하려면 innerHTML 또는 textContent 속성을 사용하세요.

const title = document.getElementById('title');
title.innerHTML = 'Welcome to My React Journey!';
title.textContent = 'Day 5 - DOM Manipulation';

2. 스타일 바꾸기
스타일 속성을 사용하여 스타일을 동적으로 업데이트할 수 있습니다.

const button = document.querySelector('.btn');
button.style.backgroundColor = 'blue';
button.style.color = 'white';

3. 수업 추가/제거
클래스를 추가, 제거 또는 전환하려면 classList 속성을 ​​사용하세요.

button.classList.add('active');   // Adds 'active' class
button.classList.remove('btn');  // Removes 'btn' class
button.classList.toggle('hidden'); // Toggles 'hidden' class

4. 속성
src, alt, href 등과 같은 속성을 수정할 수 있습니다.

const image = document.querySelector('img');
image.setAttribute('src', 'new-image.jpg');
image.setAttribute('alt', 'A beautiful scenery');

이벤트 처리
DOM 조작은 종종 이벤트와 함께 진행됩니다. 클릭, 키 누르기, 마우스 움직임과 같은 사용자 상호 작용을 들을 수 있습니다.

예: 클릭 이벤트 추가

const button = document.querySelector('.btn');
button.addEventListener('click', () => {
    alert('Button clicked!');
});

예: 입력 시 콘텐츠 업데이트

const input = document.querySelector('#name-input');
input.addEventListener('input', () => {
    const display = document.querySelector('#name-display');
    display.textContent = `Hello, ${input.value}!`;
});

동적 요소 생성
요소를 동적으로 생성하고 추가할 수 있습니다.

const newElement = document.createElement('p');
newElement.textContent = 'This is a new paragraph added dynamically!';
document.body.appendChild(newElement);

마지막 생각
DOM 조작은 놀라울 정도로 강력하여 개발자가 대화형의 동적 웹 페이지를 만들 수 있도록 해줍니다. 이는 가상 DOM을 사용하여 DOM 업데이트를 보다 효율적으로 처리하는 React와 같은 프레임워크의 기초를 형성합니다.

React Native 여정을 더욱 발전시키면서 이러한 개념이 어떻게 작용하는지 보게 되어 기쁩니다.

6일차, 나왔어요! ?

위 내용은 나의 React 여정: 5일차의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!