JavaScript를 사용하면 HTML 문서의 DOM(Documents Object Model) 요소를 수정할 수 있습니다. 이 글에서는 JavaScript를 사용하여 DOM 요소를 선택하고 텍스트 내용을 수정하는 방법에 대해 알아보겠습니다.

1. DOM 요소 선택하기

특정 요소를 선택하기 위해 document.querySelector() 메서드를 사용할 수 있습니다. 이 메서드는 CSS 선택자를 통해 요소를 찾을 수 있습니다.

예를 들어, 아이디가 “myElement”인 요소를 선택하고 싶다면:

const element = document.querySelector("#myElement");

2. 텍스트 내용 수정하기

선택된 요소의 텍스트 내용을 수정하려면 textContent 속성을 사용할 수 있습니다. 예를 들어, 선택된 요소의 텍스트 내용을 “새로운 텍스트”로 변경하려면:

element.textContent = "새로운 텍스트";

3. HTML 내용 수정하기

요소의 HTML 내용을 수정하려면 innerHTML 속성을 사용할 수 있습니다. 예를 들어, 선택된 요소의 HTML 내용을 변경하려면:

element.innerHTML = "<p>새로운 HTML 내용</p>";

마무리

JavaScript를 사용하여 DOM을 수정하는 것은 웹 애플리케이션 개발에서 중요한 부분입니다. 적절히 사용하면 사용자 경험을 향상시킬 수 있습니다.

더 많은 정보를 원하시면 MDN web docs를 참고하세요.

이상으로 JavaScript를 사용하여 DOM 요소를 수정하는 방법에 대해 알아보았습니다.