생활코딩 WEB2 JavaScript - 4. 제어할 태그 선택하기

채개바라 2023. 12. 20. 17:15

2023. 12. 20. 17:15

어떤 태그의 스타일 속성을 동적으로, 상호작용에 의해서 넣으려고 함

자바스크립트 문법에 따라 웹브라우저에게 그 태그를 선택하도록 해야 함

그러기 위해서 만들어진 것이 querySelector

Document.querySelector()

querySelector()는 CSS 선택자를 사용하여 요소를 선택한다. id, class, 속성 등 다양한 선택자를 사용할 수 있다.

querySelector(#id) => id 값 id를 가진 요소를 찾습니다.
querySelector(.class) => class 값 class를 가진 요소를 찾습니다.
querySelector('body') => body 태그를 찾습니다.

<body>
    <h1><a href="index.html">WEB</a></h1>
    <input type="button" value="night" onclick="
    document.querySelector('body')
    ">

document.querySelector('body'): <body>태그를 직접 선택하는 코드

Style.속성

위에서 "document.querySelector('body')" 코드로 body태그를 제어대상으로 정했다면,
"style.backgroundColor"은 제어대상인 body의 배경색깔로 제어대상을 보다 세부적으로 확정하는 것

<input type="button" value="night" onclick="
document.querySelector('body').style.backgroundColor='black';">

→ "night" 버튼을 클릭하면, 웹 페이지 내 body 태그의 배경색을 검은색으로 하겠다.

StartCode