<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="wrap">
<h1>돔 제어</h1>
<h2 id="firstTitle">선택자</h2>
<h3 class="nextTitle">부모 요소 선택자</h3>
<div>
<p class="obj1">현재 id가 "obj1"인 요소를 기준으로, 부모 요소는 ‘div’요소입니다.</p>
</div>
<h3>자식 요소 선택자</h3>
<ul class="obj3">
<li>리스트1</li>
<li class="theObj1">리스트2</li>
<li>리스트3</li>
</ul>
<h3>형 요소 선택자</h3>
<ul>
<li>리스트4</li>
<li class="obj4">리스트5</li>
<li>리스트6</li>
</ul>
<h3>동생 요소 선택자</h3>
<ul>
<li>리스트7</li>
<li class="obj5">리스트8</li>
<li>리스트9</li>
</ul>
</div>
<script>
//1. 전체 요소의 font-size를 20px로 지정하세요.
// document.body.style.fontSize = '20px';
const $wrap = document.getElementById('wrap');
// $wrap.style.background = 'yellow';
$wrap.style.fontSize = '20px';
//2. h1요소의 폰트 색상을 red로 지정하세요.
$wrap.firstElementChild.style.color = 'red';
//3. id가 firstTitle인 요소의 폰트 색상을 green으로 지정하세요.
document.getElementById('firstTitle').style.color = 'green';
//4. 클래스가 nextTitle인 요소의 폰트 색상을 blue로 지정하세요.
$wrap.firstElementChild.nextElementSibling.nextElementSibling.style.color = 'blue';
//5. 클래스 obj3의 자식요소 li요소 모두의 font-weight를 bold로 지정하세요.
const $obj3 = document.querySelectorAll('#wrap > .obj3');
for (let $li of $obj3) {
$li.style.fontWeight = 'bold';
console.log($obj3);
}
//6. 클래스 obj3의 요소 노드를 취득한 후 해당 요소 노드를 통해
// 클래스 theObj1을 취득한 뒤 폰트색상을 red로 지정하세요.
const $theObj1 = $obj3[0].firstElementChild.nextElementSibling;
$theObj1.style.color = 'red';
//7. 클래스 obj5의 요소 노드를 취득한 뒤 부모 요소 노드에
// 접근하여 border를 2px dashed #f00 으로 지정하세요.
const $obj5par = $wrap.lastElementChild;
console.log($obj5par);
const $obj5 = $obj5par.children[1];
$obj5.parentElement.style.border = '2px dashed #f00';
//8. 클래스 obj4의 요소 노드를 취득한 뒤 다음 형제 노드에
// 접근하여 폰트 색상을 orange로 지정하세요.
const $obj4par = $obj5par.previousElementSibling.previousElementSibling;
console.log($obj4par);
const $obj4 = $obj4par.children[1];
console.log($obj4);
$obj4.nextElementSibling.style.color = 'orange';
//9. 클래스 obj5의 요소 노드를 취득한 뒤 이전 형제 노드에
// 접근하여 text-align을 right로 지정하세요.
$obj5.previousElementSibling.style.textAling = 'right';
console.log($obj5.previousElementSibling);
</script>
</body>
</html>
==================↓ 정답========
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="wrap">
<h1>돔 제어</h1>
<h2 id="firstTitle">선택자</h2>
<h3 class="nextTitle">부모 요소 선택자</h3>
<div>
<p class="obj1">현재 id가 "obj1"인 요소를 기준으로, 부모 요소는 ‘div’요소입니다.</p>
</div>
<h3>자식 요소 선택자</h3>
<ul class="obj3">
<li>리스트1</li>
<li class="theObj1">리스트2</li>
<li>리스트3</li>
</ul>
<h3>형 요소 선택자</h3>
<ul>
<li>리스트4</li>
<li class="obj4">리스트5</li>
<li>리스트6</li>
</ul>
<h3>동생 요소 선택자</h3>
<ul>
<li>리스트7</li>
<li class="obj5">리스트8</li>
<li>리스트9</li>
</ul>
</div>
<script>
//1. 전체 요소의 font-size를 20px로 지정하세요.
document.querySelector('*').style.fontSize = '20px';
//2. h1요소의 폰트 색상을 red로 지정하세요.
const $h1 = document.querySelector('h1');
$h1.style.color = 'red';
//3. id가 firstTitle인 요소의 폰트 색상을 green으로 지정하세요.
const $firstTitle = $h1.nextElementSibling;
$firstTitle.style.color = 'green';
//4. 클래스가 nextTitle인 요소의 폰트 색상을 blue로 지정하세요.
$firstTitle.nextElementSibling.style.color = 'blue';
//5. 클래스 obj3의 자식요소 li요소 모두의 font-weight를 bold로 지정하세요.
const $obj3 = document.querySelector('.obj3');
for (let $li of $obj3.children) {
$li.style.fontWeight = '700';
}
//6. 클래스 obj3의 요소 노드를 취득한 후 해당 요소 노드를 통해
// 클래스 theObj1을 취득한 뒤 폰트색상을 red로 지정하세요.
// $obj3.children[1].style.color = 'red';
$obj3.querySelector('.theObj1').style.color = 'red';
//7. 클래스 obj5의 요소 노드를 취득한 뒤 부모 요소 노드에
// 접근하여 border를 2px dashed #f00 으로 지정하세요.
const $obj5 = document.querySelector('.obj5');
$obj5.parentElement.style.border = '2px dashed #f00';
//8. 클래스 obj4의 요소 노드를 취득한 뒤 다음 형제 노드에
// 접근하여 폰트 색상을 orange로 지정하세요.
const $obj4 = document.querySelector('.obj4');
$obj4.nextElementSibling.style.color = 'orange';
//9. 클래스 obj5의 요소 노드를 취득한 뒤 이전 형제 노드에
// 접근하여 text-align을 right로 지정하세요.
$obj5.previousElementSibling.style.textAlign = 'right';
</script>
</body>
</html>
