WEB2 - JavaScript 23 (배열과 반복문의 활용)

WEB2 - JavaScript 23 (배열과 반복문의 활용)

배열과 반복문의 활용

배운 내용을 가지고 주간 모드에서와 야간 모드에서 링크 목록을 뚜렷하게 만들어보자.

먼저 3.html 웹페이지에서 개발자도구, 검사로 들어가 console 에서 이 웹페이지에 있는 모든 a 태그를 가져와 보자.

document.querySelector('a') 라고 입력하면 하나만 가지고 온다.

querySelector 라고 하는 저 메소드, 함수, 명령(다 같은말)은 a태그에 해당되는 첫 번째 것만 가지고 오는 특성을 가지고 있기 때문.

추천 검색어 javascript get element by css selector multiple

추천 검색어 javascript querySelectorAll

이것을 alist 라는 변수에 담고 console.log( ); 을 입력

console.log(); 를 입력하면 괄호 안에 있는 결과가 이 console 창에 출력된다.

괄호 안에 alist[0] 을 넣으면 첫 번째 태그가 나오고 alist[1] 을 넣으면 두 번째 태그가 선택되는 것을 볼 수 있다.

그리고 배열답게 length를 넣으면 몇개의 a 태그를 찾았는지가 화면에 출력되는 것을 볼 수 있다.

이 점을 착안해서, 반복문을 이용해서 alist 라는 변수에 담겨있는 태그들을 하나하나 꺼내서 그것의 style 속성을 지정할 수 있을 것이다.

우선 alist 에 a 태그들의 목록을 담고 있는 배열을 담았다.

var alist = document.querySelectorAll('a');

var alist = document.querySelectorAll('a'); 다음으로 반복문, while문 넣기

var alist = document.querySelectorAll('a');

var i = 1;

while(i < alist.length){

alist[i];

i = i + 1;

}

var alist = document.querySelectorAll('a'); var i = 1; while(i < alist.length){ alist[i]; i = i + 1; } 그리고 추가로 잘 되는지 화면에 출력하기 위해 console.log를 넣는다.

var alist = document.querySelectorAll('a');

var i = 1;

while(i < alist.length){

console.log(alist[i]);

i = i + 1;

}

모든 태그를 화면에 출력할 수 있게 된다.

출력 확인 후 예제에 코드 입력하기.

开启 —— alist[1].style.color = 'limegreen';

关闭 —— alist[1].style.color = 'mediumspringgreen';

(alist[1]. 반복문이 진행될 때마다 그 원소에 들어있는 a 태그를 가리킨다.)

WEB1 - JavaScript WEB网络 计算机语言-常见语言 HTML超文本标记语言 CSS层叠样式表 JavaScript -JavaScript JavaScript即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。 更多>>

from http://livebyfaith117.tistory.com/27 by ccl(A) rewrite - 2021-09-19 22:01:32