In this post, 05 JavaScript lecture is introuduced.

Tag control

JavaScript 에서 동적으로 CSS 선택자(selector)를 이용하여 특정 tag를 선택하게 할 수 있다.

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

querySelector() 안에는 선택할 CSS 선택자를 입력한다. 위 처럼 적으면 body tag가 선택되는 것인데 ‘#first’ 라고 적으면 id값이 first인 tag를 선택하게 되는 것이다.

querySelector() 로 CSS 선택자를 이용해서 tag를 선택한 다음, 위 코드의 의미는 버튼이 클릭 되었을 때만 위와 같이 style 속성이 적용되게 JavaScript 코드를 이용하여 작성한 것이다.

<body style="background-color: black;">
</body>