먼저 web worker를 이용해서 결과 값이 어떻게 나오는지 미리 확인해본다.
var alist = document.querySelectorAll('a');
console.log(alist[1]);
<a href="1.html">HIPHAP TEAM</a>
var alist = document.querySelectorAll('a');
console.log(alist[0]);
<a href="index.html">SEVENTEEN</a>
var alist = document.querySelectorAll('a');
console.log(alist.length);
5
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
console.log(alist[i]);
i = i + 1;
}
<a href="index.html">SEVENTEEN</a>
<a href="1.html">HIPHAP TEAM</a>
<a href="2.html">VOCAL TEAM</a>
<a href="3.html">PERPOMONCE TEAM</a>
<a href="https://youtu.be/H-WQL-XV8Ak" target="_blank" title="문명특급 세븐틴편">문명특급</a>
5
var alist = document.querySelectorAll('a'); : 모든 a 태그 리스트중 두번째 태그 요청
console.log(alist[1]);
<a href="1.html">HIPHAP TEAM</a>
var alist = document.querySelectorAll('a'); : 모든 a 태그 리스트중 첫번째 태그 요청
console.log(alist[0]);
<a href="index.html">SEVENTEEN</a>
var alist = document.querySelectorAll('a'); : 모든 a 태그 리스트중 개수 요청
console.log(alist.length);
5
var alist = document.querySelectorAll('a'); : 모든 a 태그 리스트를 리스트화
var i = 0;
while(i < alist.length){
console.log(alist[i]);
i = i + 1;
}
<a href="index.html">SEVENTEEN</a>
<a href="1.html">HIPHAP TEAM</a>
<a href="2.html">VOCAL TEAM</a>
<a href="3.html">PERPOMONCE TEAM</a>
<a href="https://youtu.be/H-WQL-XV8Ak" target="_blank" title="문명특급 세븐틴편">문명특급</a>
5
착안해서 a 태그의 모든 문자 색상 또한 바꿀수있다.
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
console.log(alist[i]);
alist[i].style.color = 'powderblue';
i = i + 1;
}
이것을 활용해 야간모드일때 색상을 바꿀수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" value="night" onclick="
var target = document.querySelector('body');
if(this.value === 'night'){
target.style.backgroundColor = 'black';
target.style.color = 'white';
this.value = 'day';
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
alist[i].style.color = 'powderblue';
i = i + 1;
}
} else {
target.style.backgroundColor = 'white';
target.style.color = 'black';
this.value = 'night';
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
alist[i].style.color = 'blue';
i = i + 1;
}
}
">
<h2>Hello world</h2>
</body>
</html>
결과값 !
'cording > 생활코딩' 카테고리의 다른 글
| [Java Script] 함수 return (0) | 2022.03.11 |
|---|---|
| [Java Script] 함수 Parameter, Argument, (0) | 2022.03.10 |
| [Java Script] 배열과 반복문 (0) | 2022.03.09 |
| [Java Script] 반복문 (0) | 2022.03.07 |
| [Java Script] 배열 (0) | 2022.03.07 |
