JavaScript 배열, 반복문의 활용

 

 

document.querySelector('a') : 제일 처음 나오는 a 태그 출력

 

document.querySelectorAll('a') : 문서에 존재하는 전체 a (노드 리스트) 출력

➝ 배열은 아니지만 배열이라고 생각

 

alist[n]에 들어간 수의 순서에 맞는 a 태그 출력

 

반복문 while을 활용하여 a 태그를 모두 출력

 

활용

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

 

위 코드를 클릭시 버튼의 이름과 배경, 글씨색이 바뀌는 if 조건문에 대입시 글씨색을 바꿀 수 있음

 

예시

        <input 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;
        }
            }
            ">

 

 

결과 : 

(작동 x)

 

클릭시 day 로 바뀌며 배경색이 검은색, 글자색이 파우더블루로 바뀜, 바뀐 후에 day 버튼 클릭시 원상태로 돌아옴

 

 

컴퓨터는 배열과 반복문을 활용해 정보를 많이 전달해주기 때문에 이를 활용하는 경우가 많다.