JavaScript는 DOM(Document Object Model) 요소의 속성을 동적으로 변경하는 강력한 기능을 제공합니다. 이를 통해 웹 페이지의 내용이나 모양을 사용자 상호작용에 따라 변경할 수 있습니다. 이번 글에서는 JavaScript를 사용하여 DOM 요소의 속성을 변경하는 방법을 알아보겠습니다.

1. getElementById를 사용하여 요소 찾기

우선 변경하려는 요소를 식별해야 합니다. 이를 위해 getElementById 메서드를 사용하여 해당 요소를 찾을 수 있습니다.

const element = document.getElementById('myElement');

위 코드는 ‘myElement’라는 ID를 가진 요소를 찾아 element 변수에 할당합니다.

2. 속성 변경하기

2.1. 속성값 변경

요소의 속성 값을 변경하려면 해당 속성에 새 값을 할당하면 됩니다.

element.src = 'newImage.jpg';

위 코드는 element의 src 속성에 ‘newImage.jpg’를 할당하여 이미지를 변경합니다.

2.2. 클래스 추가 및 제거

여러 클래스를 가진 요소의 클래스를 추가하거나 제거할 수도 있습니다.

element.classList.add('newClass');
element.classList.remove('oldClass');

위 코드는 element에 ‘newClass’를 추가하고 ‘oldClass’를 제거합니다.

3. 속성 이벤트 처리

특정 이벤트에 대한 속성을 변경할 수도 있습니다.

element.onclick = function() {
  // 클릭 이벤트 발생 시 실행되는 코드
};

위 코드는 element를 클릭했을 때 실행될 코드를 할당합니다.

이제 여러분은 JavaScript를 사용하여 DOM 요소의 속성을 성공적으로 변경할 수 있을 것입니다. 동적으로 웹 페이지의 내용을 제어하는 데 유용하게 활용할 수 있습니다.

참고문헌:

• MDN Web Docs
• W3Schools JavaScript Tutorial