[DOM] JavaScript를 사용하여 CSS 선택자를 활용한 HTML 태그 조작

querySelector 함수와 CSS 선택자

JavaScript의 'querySelector' 함수는 CSS 선택자를 사용하여 HTML 태그를 선택하는 데 사용됩니다.

CSS 선택자는 HTML 요소를 선택하는데 도움이 되며, 여러 가지 선택자 중에서 기본 선택자, ID 선택자, 클래스 선택자 등이 있습니다. 예를 들어 '#output'는 ID가 'output'인 HTML 태그를 선택합니다.

let output = document.querySelector("#output");

위 코드는 ID가 "output"인 HTML 태그를 선택하여 'output' 변수에 저장합니다.

 

HTML 내용 변경 및 스타일 조작

선택한 HTML 태그를 통해 내용을 변경하거나 스타일을 조작할 수 있습니다.

'innerHTML' 속성은 선택한 태그 내에 HTML 내용을 삽입할 수 있으며, 'style' 속성을 사용하여 CSS 스타일 속성을 변경할 수 있습니다.

// html
<div id="output" style="background-color: aqua;"></div>


// Javascript
let output = document.querySelector("#output");
output.innerHTML = "Hello world!!!";
output.style.fontSize = "50px"
output.style.textAlign = "center"

위 코드는 "Hello world!!!" 라는 텍스트를 선택한 HTML 태그 내에 삽입하고, 해당 태그의 글꼴 크기를 50px로 텍스트 정렬을 가운데로 변경합니다.

결과