자바스크립트: 웹 페이지 개발을 위한 DOM 조작

 

 

 

안녕하세요 오늘은 자바스크립트에서 DOM (document object model)을 조작하여 웹페이지를 동적으로 움직여 보겠습니다.

 

 

 

1. 요소 선택:

 

DOM을 통해 웹 페이지의 요소를 선택하기 위해 document.querySelector() 또는 

document.querySelectorAll() 메서드를 사용할 수 있습니다.

 

// 단일 요소 선택
const element = document.querySelector('.my-element');

// 여러 요소 선택
const elements = document.querySelectorAll('p');

 

document.querySelector():

CSS 선택자를 사용하여 클래스 이름이 'my-element'인 문서 내 첫 번째 일치하는 요소를 반환합니다.

 

document.querySelectorAll():

CSS 선택자를 사용하여 문서 내 모든 <p>와 일치하는 요소의 NodeList(유사 배열)을 반환합니다.

 

 

 

 

 

2. 속성 변경:

 

DOM을 통해 선택한 요소의 속성을 변경하기 위해서는 해당 속성에 접근하고 값을 수정하면 됩니다.

 

const element = document.querySelector('.my-element');

// 'class' 속성 값 변경
element.setAttribute('class', 'new-class');

 

element.setAttribute(name, value): 지정된 이름과 값으로 속성을 설정합니다.

 

 

const element = document.querySelector('.my-element');

// 'class' 속성 제거
element.removeAttribute('class');

 

element.removeAttribute(name): 지정된 이름의 속성을 제거합니다.

 

 

 

 

 

3. 이벤트 처리: 

 

특정 이벤트가 발생했을 때 DOM 요소에 대한 반응을 정의하기 위해 이벤트 리스너를 추가합니다.

 

const button = document.querySelector('#my-button');

// 클릭 이벤트 처리
button.addEventListener('click', function() {
  console.log('Button clicked!');
});

// 마우스 오버 이벤트 처리
button.addEventListener('mouseover', function() {
  button.style.backgroundColor = 'red';
});

// 이벤트 제거 (예: 클릭 한 번만 처리)
function handleClick() {
  console.log('Button clicked!');
  button.removeEventListener('click', handleClick);
}

button.addEventListener('click', handleClick);

 

element.addEventListener(event, callback): 지정된 이벤트가 발생했을 때 실행될 콜백 함수를 등록합니다.

element.removeEventListener(event, callback): 등록된 이벤트 리스너를 제거합니다.

 

 

 

 

 

(응용) 요소 생성 및 추가:

 

DOM을 사용하여 요소를 동적으로 생성하고 문서에 추가할 수 있습니다.

 

// 새로운 <div> 요소 생성
const newDiv = document.createElement('div');

// 텍스트 내용 설정
newDiv.textContent = 'Hello, world!';

// 스타일 설정
newDiv.style.color = 'blue';
newDiv.style.fontSize = '20px';

// 문서의 특정 부모 요소에 추가
const parentElement = document.querySelector('.parent');
parentElement.appendChild(newDiv);

 

 

 

 

 

(응용) 요소 제거:

 

DOM을 사용하여 요소를 제거할 수 있습니다.

 

const elementToRemove = document.querySelector('.remove-me');

// 부모 요소로부터 자식 요소 제거
elementToRemove.parentNode.removeChild(elementToRemove);

 

 

 

 

 

(응용) 클래스 조작:

 

DOM을 사용하여 클래스를 추가, 제거 또는 토글할 수 있습니다.

 

const element = document.querySelector('.my-element');

// 클래스 추가
element.classList.add('highlight');

// 클래스 제거
element.classList.remove('highlight');

// 클래스 토글 (추가되어있으면 제거, 없으면 추가)
element.classList.toggle('highlight');

 

 

 

 

(응용) 이벤트 위임:

 

이벤트 위임은 하위 요소들의 이벤트 처리를 상위 컨테이너에서 관리하는 기법입니다.

 

const container = document.querySelector('.container');

container.addEventListener('click', function(event) {
  if (event.target.matches('.item')) {
    // .item 요소가 클릭되었을 때 처리할 로직
    console.log('Item clicked:', event.target.textContent);
  }
});

 

 

 

 

(응용) 속성 값 읽기: 

 

DOM에서 요소의 속성 값을 읽어올 수 있습니다.

 

const link = document.querySelector('a');

// href 속성 값 읽기
console.log(link.getAttribute('href'));

 

 

요소 생성 및 추가, 요소 제거, 클래스 조작, 이벤트 위임, 속성 값 읽기 등을 통해 

동적인 웹 페이지를 구현할 수 있습니다. 

이러한 기능들은 자바스크립트를 사용하여 상호작용이 많은 웹 애플리케이션을 개발하는 데에 유용합니다.

 

다음에는 좀더 다양한 이벤트 처리 방법들을 알아보겠습니다.

 

감사합니다.