자바스크립트 기초 개념 - 배열과 반복문 #13

index.html 웹 페이지에 있는 모든 <a>태그를 가져와보자.

 

querySelector는 1개만 가져온다. querySelector라는 메소드(함수)는 a태그의 해당하는 첫 번째 하나만 가져오는 특성이 있다.

 

'javascript get element by css selector multiple' 검색

 

https://www.w3schools.com/jsref/met_document_queryselectorall.asp

이 값을 변수에 넣어보자

이 점에 착안해서 우리는 뭘 할 수 있을까? 반복문이다.

이와 같이 된다. 이제 콘솔창에 있는 코드를 복사해서 실제 html파일에 작성하자.

<input type="button" value="밤" onclick="
  var target = document.querySelector('body');
  var target2 = document.querySelector('a');
  var target3 = document.querySelector('#grid');
  var target4 = document.querySelector('#member');
    if(this.value === '밤') {
      target.style.backgroundColor = 'black';
      target.style.color = 'white';
      target2.style.color = 'blue';
      target3.style.color = 'green';
      target4.style.color = 'red';
      this.value = '낮';


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

개발자도구를 켜놓고 새로고침을 하여 변화를 확인해보자.