JavaScript로 제어할 태그 선택하기

생활코딩 WEB2 - JavaScript 강의를 듣고 기억하고 싶은 내용을 정리했습니다.

버튼을 클릭하면 body 태그에 스타일 속성이 생기는 동작을 만들어봅니다. 자바스크립트 문법에 따라 웹브라우저에게 태그를 선택하도록 해야 합니다. 무엇을 하고 싶은지 정했다면 적절한 키워드로 검색해봅니다. javascript selector tag by css selector 를 검색하면 아래와 같은 내용을 찾을 수 있습니다.

element = document.querySeletor(Selector);

// body 태그를 선택한다면

document.querySelector('body');

선택한 body 태그에게 스타일 속성을 적용해야 합니다. 모른다면 또 검색해봅니다. javascript element style 정도로 검색해서 .style 을 붙인다는 것을 알게 되면 아래처럼 쓸 수 있습니다.

document.querySelector('body').style;

body 태그의 background-color 와 color 를 바꾸고 싶어서 추가로 검색해 완성을 해보면 아래와 같습니다.

document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';

버튼을 클릭했을 때 위 javascript 가 실행되는 코드를 아래처럼 작성할 수 있습니다.

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