[WEB2 JavaScript] 23.배열과 반복문의 활용 | 초코더

지난 시간에 이어 배열과 반복문을 활용한 a태그의 색을 변경해보겠습니다.

우선 1억개의 a태그가 있다고 치면 이 많은 a태그들의 색은 배열과 반복문을 통해 나타낼 수 있습니다.

 

먼저 여러개의 a태그들을 한 배열에 담는 코드를 아래에 작성해볼게요.

qeurySelector는 하나의 선택자를 선택하는 것이였다면 querySelectorAll은 괄호안에 있는 모든태그를 선택해줍니다.

var alist = document.querySelectorAll('a');

 

 

그럼 이제 반복문을 이용해서 alist안에 있는 모든 태그들의 style을 변경해보겠습니다.

아래와 같이 반복문을 이용해 alist의 모든 원소들의 color 값을 변경해주었습니다.

var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
    alist[i].style.color = 'powderblue';
    i += 1
}

모든 a태그의 color색 변경

 

night모드 일때는 powderblue로, day모드 일때는 blue로 적용해주기 위한 전체 코드를 짜보겠습니다.

<h1><a href="index.html">WEB</a></h1>
  <input id="night_day" type="button" value="night" onclick="
    var target = document.querySelector('body');
    if(this.value === 'night'){
      target.style.backgroundColor = 'black';
      target.style.color = 'white';
      this.value = 'day';

      var alist = document.querySelectorAll('a');
      var i = 0;
      while(i < alist.length){
        alist[i].style.color = 'powderblue';
        i = i + 1;
      }
    } else {
      target.style.backgroundColor = 'white';
      target.style.color = 'black';
      this.value = 'night';

      var alist = document.querySelectorAll('a');
      var i = 0;
      while(i < alist.length){
        alist[i].style.color = 'blue';
        i = i + 1;
      }
    }
  ">
  <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>