05. DOM 에 접근하기
다음 결과 화면을 참고하여 조건에 맞게 웹 문서를 작성하세요.
1. 항목 앞 체크 표시를 누르면 항목 텍스트의 글자색이 바뀌며 가로줄이 그려지는 프로그램을 작성한다.
2. 체크 표시 부분을 가져와 노드 리스트를 만든다. <span class="check"> 요소를 이용한다.
3. 노드 리스트에 있는 요소 전체를 반복하면서 click 이벤트가 발생하면 실행할 함수를 연결한다.
4. 클릭이 발생한 요소에서 글자 색상 스타일을 회색(#CCC) 으로 바꾼다.
5. 클릭한 요소의 부모 노드에서 밑줄 스타일(text-decoration) 을 가로줄(line-through) 로 바꾼다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JAVA SCRIPT 문제 5</title>
<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>
// 코드를 작성하세요
</script>
</body>
</html>
</html>
결과 화면
A. 해설
1. 항목 앞 체크 표시를 누르면 항목 텍스트의 글자색이 바뀌며 가로줄이 그려지는 프로그램을 작성한다.
2. 체크 표시 부분을 가져와 노드 리스트를 만든다. <span class="check"> 요소를 이용한다.
--> querySelectorAll(".check") 를 사용하여 check 변수에 넣어둔다.
3. 노드 리스트에 있는 요소 전체를 반복하면서 click 이벤트가 발생하면 실행할 함수를 연결한다.
--> for 문을 사용하여 check[ i ].addEventListener("click", function( ) { }); 작성한다.
4. 클릭이 발생한 요소에서 글자 색상 스타일을 회색(#CCC) 으로 바꾼다.
--> 실행할 함수 { } 안에 this.style.color = "#CCC", this.parentNode.style.color = "#CCC" 작성한다.
5. 클릭한 요소의 부모 노드에서 밑줄 스타일(text-decoration) 을 가로줄(line-through) 로 바꾼다.
--> 실행할 함수 { } 안에 this.style.textDecoration = "line-through" 작성한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JAVA SCRIPT 문제 5</title>
<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>
var check = document.querySelectorAll(".check");
for (i = 0; i < check.length; i++) {
check[i].addEventListener("click", function() {
this.style.color = "#CCC";
this.parentNode.style.color = "#CCC";
this.parentNode.style.textDecoration = "line-through";
});
}
</script>
</body>
</html>
</html>
출처 | Do it! HTML+CSS+자바스크립트 웹 표준의 정석(고경희)
'💠문제 풀이 > JavaScript 문제 풀이' 카테고리의 다른 글
06. 새로운 요소 추가하기 (0) | 2022.08.29 |
---|---|
04. 자바스크립트의 내장 객체를 사용한 문제 II (0) | 2022.08.24 |
03. 자바스크립트의 내장 객체를 사용한 문제 I (0) | 2022.08.23 |
02. 함수 선언하고 호출하는 문제 II (0) | 2022.08.16 |
01. 함수 선언하고 호출하는 문제 I (0) | 2022.08.16 |