[javascript] DOM 조작하기

18 Dec 2023

javascript

JavaScript는 웹 페이지의 Document Object Model(DOM)을 조작하는 데 사용될 수 있습니다. DOM은 HTML 문서의 구조화된 표현이며, JavaScript를 사용하여 해당 요소들을 선택하고 조작할 수 있습니다.

이 블로그 포스트에서는 JavaScript를 사용하여 DOM을 조작하는 다양한 방법에 대해 알아보겠습니다.

내용

요소 선택하기
요소 조작하기
이벤트 처리하기

요소 선택하기

JavaScript를 사용하여 DOM 요소를 선택하는 방법은 다양합니다. document.getElementById, document.getElementsByClassName, document.getElementsByTagName 등의 메서드를 사용하여 원하는 요소를 선택할 수 있습니다.

예시:

// ID를 사용하여 요소 선택
let elementById = document.getElementById('myElementId');

// 클래스 이름을 사용하여 요소 선택
let elementsByClass = document.getElementsByClassName('myClassName');

// 태그 이름을 사용하여 요소 선택
let elementsByTag = document.getElementsByTagName('div');

요소 조작하기

선택된 요소를 조작하여 내용을 변경하거나 스타일을 적용할 수 있습니다. innerText, innerHTML, style 속성 등을 사용하여 요소를 조작할 수 있습니다.

예시:

// 내용 변경하기
elementById.innerText = '새로운 내용';

// 스타일 적용하기
elementById.style.color = 'blue';

이벤트 처리하기

JavaScript를 사용하여 이벤트를 처리할 수 있습니다. addEventListener 메서드를 사용하여 원하는 이벤트에 대한 리스너를 등록할 수 있습니다.

예시:

// 클릭 이벤트 처리
elementById.addEventListener('click', function() {
  // 클릭 이벤트가 발생했을 때 실행되는 코드
});

이렇게 JavaScript를 사용하여 DOM을 조작하는 것은 웹 페이지의 동적인 기능을 추가하고 사용자와의 상호작용을 개선하는 데 유용합니다.

참고자료:

MDN web docs - Manipulating documents

이상으로 JavaScript로 DOM을 조작하는 방법에 대해 알아보았습니다. JavaScript의 강력한 기능을 활용하여 웹 페이지를 더욱 동적이고 흥미로운 것으로 만들어 봅시다!