자바스크립트 공부중에 질문드립니다.
배열의 요소(item)은 객체인가요?
아래 코드에서, this가 가르키는 대상이 무엇인지 모르겠습니다.
제가 시도해본것은,,
먼저 this 대신 checking이나 checking[i]를 넣어도 오류가 뜹니다.. parentNode를 찾을 수 없다고하네요
그런데 this가 가르킬 것은 저 두개밖에 없어보입니다..
그래서 제가 내린 결론은,
this가 checking을 가르키게되면 checking은 현재 배열인데, this는 한개만 가르켜야 하므로 여러개를 담고 있는 배열은 가르킬 수 없다.
따라서 this는 checking[i]를 가르키는데, 이때 checking[i]는 array의 item 이므로 객체가 아니다.
그런데 this는 객체이기때문에 this로는 실행이 되는 것이다
이런 이상한 앞뒤안맞는 결론이 나와버렸습니다. 결과를 보고 끼워맞추려니,, 안되네요
제 생각의 오류를 짚어주셨으면 합니다.
아래는 js 코드입니다.
var checking = document.querySelectorAll('.check');
// var fontColor= document.querySelector('.check');
for (var i=0; i<checking.length; i++){
checking[i].addEventListener('click',function(){
this.parentNode.style.color='#ccc';
});
}
이것은 html 코드입니다.
DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>연습문제 2title>
<style>
ul{
list-style: none;
}
li {
font-size:20px;
line-height: 35px;
}
.check {
color:#ccc;
font-size:20px;
margin-right:25px;
}
.check:hover {
color:#222;
}
style>
head>
<body>
<h1>할 일 목록h1>
<ul>
<li><span class="check">✓span>할 일 1 li>
<li><span class="check">✓span>할 일 2 li>
<li><span class="check">✓span>할 일 3 li>
<li><span class="check">✓span>할 일 4 li>
<li><span class="check">✓span>할 일 5 li>
ul>
<script src="quiz2.js">
script>
body>
html>
