1. 다음 HTML 코드를 보고 문제를 해결해주세요.
<head>
<style>
.done {
opacity: 0.5;
text-decoration: line-through;
}
</style>
</head>
<body>
<div id="main">
<h2>음식</h2>
<ul id="food_list">
<li>햄버거</li>
<li>치킨</li>
<li>피자</li>
</ul>
<h2>나라</h2>
<ul id="country_list">
<li>한국</li>
<li>일본</li>
<li>미국</li>
<li>영국</li>
</ul>
</div>
</body>
(1) 코드에서 1번과 2번의 접근 대상은?
const foodList = document.querySelector("#food_list");
const countryList = document.querySelector("#country_list");
// 1번
console.log(
foodList.parentElement.children[2].nextElementSibling.children[2]
);
// 2번
console.log(
countryList.parentElement.firstElementChild.nextElementSibling
.children[1]
);
답:
1번: 미국
2번: 치킨
(2) 아래 코드에서 1, 2, 3번 중 done 클래스를 추가 하는 코드를 모두 고르시오
const foodList = document.querySelector("#food_list");
const item = foodList.children[0];
// 1번
item.classList.add("done");
// 2번
item.classList.toggle("done");
// 3번
item.classList.remove("done");
답: 1, 2
2. 이벤트 객체 프로퍼티의 공통 프로퍼티 type과 target에 대해서 설명하시오.
답:
type은 이벤트의 종류를 나타내는 프로퍼티다. 클릭, 마우스 오버 등 다양한 종류의 이벤트가 존재한다.
target은 이벤트가 발생한 요소를 나타내는 프로퍼티다.
정리하자면 type은 어떤 종류의 이벤트인지를 식별하고 target은 이벤트가 발생한 요소를 참조해서 해당 요소에 대한 조작을 할 수 있도록 도와준다.
+) 이외에도 currenTarget, timeStamp, bubbles 공통 프로퍼티가 존재한다.
- currenTarget: 이벤트 핸들러가 등록된 요소
- timeStamp: 이벤트 발생 시각(페이지가 로드된 이후부터 경과한 밀리초)
- bubbles: 버블링 단계인지를 판단하는 값
+) target과 currentTarget의 차이점
target은 부모로부터 이벤트가 위임되어 발생하는 자식의 위치, 내가 클릭한 자식 요소를 반환한다.
하지만 currentTarget은 실제로 이벤트가 부착된 부모의 위치를 반환한다.
'코드잇 스프린트 > Daily Quiz' 카테고리의 다른 글
| [코드잇 스프린트] 0328 데일리 퀴즈 (0) | 2024.03.28 |
|---|---|
| [코드잇 스프린트] 0327 데일리 퀴즈 (0) | 2024.03.27 |
| [코드잇 스프린트] 0323 데일리 퀴즈 (0) | 2024.03.23 |
| [코드잇 스프린트] 0322 데일리 퀴즈 (0) | 2024.03.22 |
| [코드잇 스프린트] 0321 데일리 퀴즈 (0) | 2024.03.21 |
