[WEB2 JavaScript] 12.제어할 태그 선택하기 | 초코더

오늘은 자바스크립트의 기초인 제어할 태그 선택하는 법에 대해서 공부해볼게요!

우선 저는 생활코딩을 참조하면서 공부를 했습니다.

앞으로도 공부하는 것들을 쭉 기록하면서 공유해볼게요!!ㅎㅎ

 

 

 

HTML코드에서 제어하고 싶은 선택자를 어떻게 선택하는지에 대해 알아볼게요.

우선 body태그 전체를 선택하고 싶다면 이런식으로 사용해줍니다.

코드에서 하나하나 이해하는 것도 중요하지만 어떻게 쓰이는지 알고 바로 써보면서 익숙해지는게 중요한 것 같아요.

document.querySelector('body')

 

 

 

그럼 선택자를 선택했으니 이제 스타일을 변경하는 법입니다.

이렇게 해주면 body태그에 있는 style의 backgroundColor가 black으로 변경됩니다.

원래 HTML에서 스타일을 변경할 때에는 background-color로 사용하였지만 JavaScript에서는 대문자를 이용하여 backgroundColor로 사용합니다.

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

 

위에 것을 이용해서 버튼을 눌렀을 때 색이 변하는 코드를 짜보았습니다. 

실행해보시면 night버튼을 누르면 배경이 검정_글씨가 흰색, day버튼을 누르면 배경이 흰색_글씨가 검정으로 바뀝니다.

요기 아래는 전체코드입니다.

 

<h1><a href="index.html">WEB</a></h1>
  <input type="button" value="night" onclick="
    document.querySelector('body').style.backgroundColor = 'black';
    document.querySelector('body').style.color = 'white';
  ">
  <input type="button" value="day" onclick="
    document.querySelector('body').style.backgroundColor = 'white';
    document.querySelector('body').style.color = 'black';
  ">
  <ol>
    <li><a href="1.html">HTML</a></li>
    <li><a href="2.html">CSS</a></li>
    <li><a href="3.html">JavaScript</a></li>
  </ol>
  <h2>JavaScript</h2>
  <p>
    JavaScript (/ˈdʒɑːvəˌskrɪpt/[6]), often abbreviated as JS, is a high-level, dynamic, weakly typed, prototype-based, multi-paradigm, and interpreted programming language. Alongside HTML and CSS, JavaScript is one of the three core technologies of World Wide Web content production. It is used to make webpages interactive and provide online programs, including video games. The majority of websites employ it, and all modern web browsers support it without the need for plug-ins by means of a built-in JavaScript engine. Each of the many JavaScript engines represent a different implementation of JavaScript, all based on the ECMAScript specification, with some engines not supporting the spec fully, and with many engines supporting additional features beyond ECMA.
  </p>