HTML 문서의 DOM 요소(DOM 요소는 문서 객체 모델(Document Object Model)을 말하는 것으로 HTML 요소들을 나타내는 트리 구조를 말한다.)를 동적으로 조작하기 위해서는 특정 DOM 요소를 찾고, 그 요소의 속성을 변경해야 할 때가 있습니다. JavaScript를 사용하여 DOM 요소를 탐색하고 속성을 변경하는 방법을 살펴보겠습니다.

DOM 요소 찾기

특정 DOM 요소를 찾기 위해서 querySelector나 getElementById와 같은 메서드를 사용할 수 있습니다.

getElementById를 이용한 요소 찾기

let myElement = document.getElementById('my-id');

querySelector를 이용한 요소 찾기

let myElement = document.querySelector('.my-class');

속성 변경하기

찾은 DOM 요소의 속성을 변경하기 위해서는 해당 요소의 프로퍼티에 새로운 값을 할당하면 됩니다.

속성 변경하기

myElement.style.color = 'red';  // 스타일 속성 변경
myElement.textContent = '새로운 텍스트';  // 텍스트 내용 변경
myElement.setAttribute('class', 'new-class');  // 속성 추가 또는 변경

결론

JavaScript를 사용하여 DOM 요소를 찾고 속성을 변경하는 방법을 살펴보았습니다. 이를 통해 HTML과 CSS로 구조와 스타일을 만들고 JavaScript를 사용하여 동적으로 변경함으로써 웹 페이지를 조작할 수 있습니다. 동적 요소 변경을 통해 사용자 경험을 향상시키는 다양한 기능을 구현할 수 있습니다.

참고 자료: MDN Web Docs