티스토리 뷰

배열과 반복문을 활용하기 위해 검색을 또 먼저 해봅시다.

a태그의 폰트색깔을 바꿔주려고 하는 것이기 때문에 모든 a태그를 가져와야 합니다

그런데 여태까지 사용을 했던 querySelector은 하나의 태그만을 가져 오는 것이기 때문에 검색이 필요합니다.

javascript get element by css selector multiple

검색을 하고 뒤적거리면 이런 코드가 나오게 됩니다. 그런데 이 코드가 자신이 원하는게 맞는건지

잘 확신이 안되잖아요? 그러면 이 코드도 검색을 해보면 됩니다.

javascript querySelectorAll

검색을 한 것을 콘솔창에서 입력을 한번 해봅시다.

querySelectorAll은 해당 태그를 모두 가져와 배열 형식으로 가지고 있습니다. 그래서 이것을 변수에 추가하고 

출력을 해봤더니 첫번째 링크가 나오는 것을 확인하실 수 있습니다.

alist의 인덱스 번호를 바꿔주면 해당 태그가 log에 뜨게 됩니다. 똑같이 length도 사용할 수 있습니다.

그러면 이것을 이용해서 a 태그를 모두 가져와 반복문을 통해 폰트의 색상을 바꿀 수도 있지 않을까요? 

이제 이 코드를 그대로 카피해서 원래 만들었던 코드에 넣어주면 됩니다.

중복되는 내용은 위로 빼주고 추가를 해주면 night일 때는 powderblue색깔이 day일 때는 blue 색깔이 되게

만들었습니다

댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2025/04   »
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30
글 보관함