배열과 반복문_2

배열과 반복문의 활용법에 대해 알아보기에 앞서 querySelectorAll에 대해 알아봅시다.

위 예시는 웹페이지내의 <a>태그를 불러오는 방법에 대한 예제입니다.

첫번째로 실행한 document.querySelector('a');로 웹페이지내의 모든 <a>태그를 불러오려고 하였으나 실제 결과를 보면 <a>태그 하나만 가져오는 것을 볼 수 있습니다.

왜냐하면 querySelector는 <a>태그 중 맨처음 등장한 <a>태그만 가져오기때문입니다.

 

그렇다면 전체 태그를 불러오기위해서는 어떻게해야할까요?

- google에서 "javascript get element by css selector multiple"이라고 검색하여 내용을 참고하시기 바랍니다.

위와 같이 검색해보면 querySelectorAll 이라는 메소드가 있을 것입니다.

 

그렇다면 querySelectorAll을 실행하면 어떻게 될까요?

위 예제를 보면 document.querySelectorAll('a');로 실행하니 NodeList(16) [a,a,a,a]라는 결과가 출력되었습니다.

여기서 대괄호란 배열을 의미합니다.(사실 querySelectorAll의 결과는 노드리스트이지만 배열이라고 이해할 수도 있습니다.)

그렇다면 이 배열의 값을 확인하려면 어떻게해야할까요?

 

이전시간에 공부하였을때 변수를 활용하는 법을 배웠습니다.

이번에도 역시 변수를 활용해 실제 <a>태그를 출력해보겠습니다.

위 예제의 var alist=document.querySlectorAll('a');란 모든<a>태그를 찾아서 alist 라는 변수에 넣어 저장하겠다 라는 뜻입니다.

이렇게 alist의 값을 저장한 뒤 console.log(alist[0]); 배열의 인덱스값을 0으로 지정하면 첫번째 <a>태그가 선택되는 모습을 볼 수 있습니다.

그리고 console.log(alist.length);을 지정하면 alist의 저장된 <a>태그의 개수를 확인할 수 있습니다.

---

위 내용을 바탕으로 반복문을 이용해 alist라는 변수에 담긴 태그를 하나하나 꺼내서 style의 속성을 지정하는 방법을 알아보겠습니다.

먼저, 반복문을 통해 모든 <a>태그를 출력해보겠습니다

 

변수 alist에 현재 페이지의 <a>태그 값들을 저장하고,

i 변수를 이용한 반복문을 통해 alist를 모두 출력하도록 하였습니다.

 

이제 여기서 <a>태그들의 style 태그를 지정하려면 아래와 같이 할 수 있습니다.

 

반복문 안에 alist[i].style.color=red; 를 삽입하여 모든 alist의 글자색을 빨간색으로 적용할 수 있습니다.

---

이전에 학습하였던 야간/주간모드 전환쪽에 스타일을 수정할때도 위에 이용한 방법을 사용할 수 있다.