ep.08 배열과 반복문의 활용

우리가 앞서 사용해본 배열과 반복문의 조합을 통해 데이터를 쉽게 꺼내 쓸 수 있는 코드들을 만들어보았습니다.

여기서 조금 더 나아가, 조금 더 실용적인 예시를 들어 심화학습을 해보도록 하겠습니다.

 

예제) 아래 코드들의 a태그를 찾아 색깔을 바꾸어라.

 

이 상황에서 a태그를 찾아봅시다.

구글에 javascript find elements multiple정도로 검색을 해보면 될 겁니다. 우리는 모든 태그들을 다 외울 수 없기 때문에 항상 구글에서 속성을 검색하여 쓰는 방법을 터득해야 합니다. 굳이 완벽하게 칠 필요도 없이 필요한 키워드만 몇 개씩 조합하여 검색하면 됩니다.

이렇게 우리는 querySelectorAll이라는 문법을 통해 모든 a를 배열속에 집어넣을 수 있게 됩니다.

이때 우리는 변수의 중요성을 미리 알고 있기 때문에, 위와 같이 var alist라는 변수에 모든 a를 집어넣는 배열을 만들 수 있게 됩니다.

document.querySelectorAll('a'); // ''안에는 본인이 필요한 요소를 넣으면 된다.

그럼 그 배열속에 담겨있는 a는 자동적으로 index값, 즉 순서를 가질 것이고 그 순서를 사용하여 while문의 조건을 만들어 주면 쉽게 코드를 짤 수 있게 됩니다. if 명령문과 else 명령문 안에 각각 while문을 사용하여, alist의 color 속성을 blue로 또는 노란색으로 바꿔줄 수 있겠죠?

<h3><a href="#">WEB</a></h3>
<input id="n_d" type="button" value="night" onclick="
    
    var target = document.querySelector('body');
    
    
    var alist = document.querySelectorAll('a');
    var i = 0;
    //조건문
    if(this.value === 'night'){
        target.style.background = 'black';
        target.style.color = 'white';
        this.value = 'day';
        
        
        while(i< alist.length){
            alist[i].style.color = '#ff0'
            i++; //반복문
        }
        
    }else{
        target.style.background = 'white';
        target.style.color = 'black';
        this.value = 'night';
        
        while(i< alist.length){
            alist[i].style.color = 'blue'
            i++; //반복문
        }
    }      
    
">
<ul>
    <li><a href="#">1. html</a></li>
    <li><a href="#">2. css</a></li>
    <li><a href="#">3. javascript</a></li>
</ul>            
<p>안녕하세요. 정민입니다. 안녕하세요. 정민입니다. 안녕하세요. 정민입니다. 안녕하세요. 정민입니다.</p>


</body>

한 줄 요약: while문을 적재적소에 사용하여 배열과 함께 시너지 효과를 내자!

alist라는 변수 안에 우리가 필요한 a의 데이터를 배열로 집어넣자!