이 포스팅은 PC로 작성되었습니다.
모바일로 보시는 분들에게는 가끔
줄 바꿈이 어색하게 보일 수 있습니다.
지난 포스트
드디어 오늘은 지난번에 공부한 배열과 반복문을 이용해서 실제로 써먹을 수 있는 예를 하나 공부해보겠습니다.
역시 이번 생활코딩 강의 영상에서도 이고잉 님은 검색의 중요성을 언급하십니다.
하지만.. 그것도 영어를 어느정도 알아야 가능하겠죠. ㅎㅎ
아직 저에게는 영어로 원하는 코드를 검색하는 게 어렵네요.
위의 소스 코드는 PC에서 드래그 후,
ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다.
ctrl+c(복사)는 불가능합니다.
let alist = document.querySelectorAll('a');
let i = 0;
while(i < alist.length){
alist[i].style.color = 'powderblue';
i++;
}
라는 소스 코드가 추가되었습니다.
(i = i + 1; 대신에 왜 i++; 를 썼는지에 대해서는 지난 포스트에 설명을 했습니다.)
먼저, 변수를 선언하는 let을 써준 뒤에 모든 <a> 태그를 가져옵니다.
지금까지 써왔던 document.querySelector로는 처음 나오는 <a> 태그 하나밖에 가져오지 않기 때문에
document.querySelectorAll('a'); 로 써줍니다.
그리고 지난번에 배운 반복문을 이용해서 모든 <a> 태그들에 style.color를 powderblue로 해줍니다.
위의 소스 코드로 완성된 파일을 올려두겠습니다.
다음 포스트
이 글이 도움이 됐다면 하단의 ♡ 공감 버튼을 꾹 눌러서
빨간 하트♥로 만들어주세요.
지인에게 보여주고 싶은 글이었다면
공감 버튼 옆을 클릭해서 SNS에 공유해주세요.
댓글은 블로그 운영에 큰 힘이 됩니다.
'front-end > JavaScript' 카테고리의 다른 글
자바스크립트, 함수 Function 2 (0) | 2021.02.01 |
---|---|
자바스크립트, 함수 Function 1 (0) | 2021.01.31 |
자바스크립트, 배열과 반복문 (0) | 2021.01.29 |
자바스크립트, 중복되는 코드 제거 (0) | 2021.01.28 |
자바스크립트, 조건문의 활용 (0) | 2021.01.27 |
댓글