[DOM] DOM과 JavaScript를 사용하여 HTML 태그 스타일 변경하기

DOM(Document Object Model) 

HTML문서의 구조를 표현,웹브라우저에서 HTML 태그를 조작하는 데 중요한 역할을 함.

javaScript를 사용하여 DOM을 조작하면 웹페이지의 내용을 동적으로 변경하고 스타일을 조절할 수 있습니다.

이글에서는 JavaScript의 'querySelector' 함수와 'style' 속성을 사용하여 HTML 태그의 배경색을 변경하는 해보겠습니다.

 

querySelector 함수

JavaScript에서 'querySelector' 함수는 HTML 태그를 선택하고 조작 하는데 사용됩니다. 이 함수는 css 선택자와 유사한 방식으로 태극를 선택합니다. 사용법은 다음과 같습니다.

document.querySelector("태그").style.속성 = "값";

• "태그"는 HTML 태그를 나타내며, CSS 선택자를 사용할 수 있습니다.
• 'style'은 HTML 태그의 스타일 속성을 나타냅니다.
• '속성'은 스타일 속성 중 하나를 나타내며, 예를 들어 'backgroundColor'는 배경색을 나타냅니다.
• "값"은 속성에 설정하려는 값이며, 문자열로 표현됩니다.

배경생 변경 예제

이제 예젝 코드를 통해 HTML 문서 내의 'h1'와 'h2'태그의 배경색을 변경하는 방법을 알아 보겠습니다.

//  html 코드
<h1>process - 1</h1>
<h2>process - 2</h2>

//javascript 코드
document.querySelector("h1").style.backgroundColor ="red"
document.querySelector("h2").style.backgroundColor ="yellow"

위 코드는 h1 태그의 배경색을 빨간색으로 h2 태그의 배경색을 노란색으로 변경합니다. 이와 같은 방식으로 querySelector 함수와 style 속성을 사용하면 원하는 HTML 태그의 스타일을 동적으로 조작할 수 있습니다.

결과