배열 & 반복문 활용ⅱ

소스코드 예시

버튼 클릭하면 링크주소 밝은 컬러 or 어두운 컬러 주기

그림 주/야간 밝음,어두움 효과

                               

                              결과

그림 야간/ 밝음표시

1. f12를 누르고 console창에서 다음 코드들을 확인한다

document.querySelectorAll( ) 지정된 실렉터에 일치하는 element들을 list로 반환한다

   var alist = document.querySelectorAll('a'); 모든 a 태그를 가져온다

   var i =0; 카운트 작성

2. while(i < alist.length ){  alist의 개수가 작은 동안 반복한다

    alist[i].style.color = 'blue';

    i = i + 1

}    반복문이 실행될때 a태그를 하나씩 가져온다

 

총 정리

1. document.querySelector('a') 를 입력해 보시면 가장 위에 있는 web을 표시해 준다 결국

    document.querySelector('a') 값만 본다면 web을 둘러싼 a태그만을 지정해 주는 것이죠

    반복문을 빼고 document.querySelector('a').style.color = 'powderblue';  값을 넣어보면

    web만 powderblue로 변하는 것을 볼 수 있습니다.

 

2. 콘솔창에서 document.querySelector('body')를 입력해봅시다. 그럼 body태그 안의 모든

    속성들이 잡혀있을 겁니다 document.querySelector('body'). style.color = 'white'; 을 출력하면

    body안의 모든 폰트색이 흰색으로 변하게 만듭니다 document.querySelector('ol').

    style.color='powderblue' 하게 되면  ol 태그 안의 1,2,3 색상이 변경될 겁니다 querySelector

    함수가 지정해 주는 위치의 차이인 것이죠.

    All을 붙이는 document.querySelectorAll('a'). style.color = 'powderblue'; 은 왜 안되는지 콘솔창에

    document.querySelectorAll('a'). style.color 입력해 보시면 

   모든 태그들을 잡아주는 것이 아니라 해당 태그들을 배열형태로 반환한다

   우리는 이 배열을 풀어서 적용시켜 주어야하기에 반복문을 사용한다