[39장] DOM - 2 #34
Comments
|
Q. 제가 만든 코드는 DOM을 한번만 변경하지만 필요 없는 컨테이너 <div>가 존재합니다. 이 컨테이너 요소를 추가하지 않으며 기존의 코드와 동일하게 DOM을 한번만 변경 시키는 방법으로 코드를 수정해주세요. <!DOCTYPE html>
<body>
<ul id = "JSStudy"></ul>
</body>
<script>
const $JSStudy = document.getElementById('JSStudy');
const $container = document.createElement('div');
const people = ['건우','종현','영준','효리','승희','혜수','주연'];
people.map(name => {
const $li = document.createElement('li');
const textNode = document.createTextNode(name);
$li.appendChild(textNode);
$container.appendChild($li);
})
$JSStudy.appendChild($container);
</script>
</html>퀴즈 정답
|
|
Q. 다음 O/X 문제에 답해주세요!
퀴즈 정답
|
|
Q. 다음 문제를 읽고 O / X로 답하시오.
퀴즈 정답
|
|
Q. 다음 코드를 보고 li태그의 순서를 유추해보세요. <!DOCTYPE html>
<html>
<body>
<h1>Devcourse</h1>
<ol id="devcourse-web">
<li>backdung</li>
<li>frong</li>
<li>ai</li>
</ol>
</body>
<script>
const $devcourse = document.getElementById('devcourse-web');
const [$back, ] = $devcourse.children;
$devcourse.insertBefore($back, $devcourse.lastElementChild);
$devcourse.removeChild($devcourse.lastElementChild);
</script>
</html>퀴즈 정답
1. frong
2. backdung |
|
Q. 다음 코드의 실행 결과는? <html>
<body>
<ul id="food">
<li>짜장면</li>
<li>짬뽕</li>
</ul>
<ul id="drink">
<li>콜라</li>
<li>맥주</li>
</ul>
<script>
const $food = document.getElementById('food')
const $li = document.createElement('li')
$li.appendChild(document.createTextNode('탕수육'))
$food.insertBefore($li, document.getElementById('drink').lastElementChild)
</script>
</body>
</html>퀴즈 정답DOMException 오류
insertBefore 메서드의 두번째 인수로 전달받은 노드는 반드시 insertBefore을 호출한 노드의 자식노드여야 합니다. 현재 코드의 두번째 인수 노드는 food노드의 자식이 아니므로 DOMException 에러가 발생합니다 |
|
Q. 다음 코드에서 마지막 출력 결과로 <!DOCTYPE html>
<html>
<head>
<style>
body { color: yellow; }
.box { width: 100px; height: 200px; background-color: tomato; border: 1px solid black; }
.box:before { content: 'frong' }
</style>
</head>
<body>
<div class="box">box</div>
<script>
const $box = document.querySelector('.box')
const computedStyle = window.getComputedStyle($box)
const computedStyleBefore = // (1) 의사 요소 :before 스타일을 취득하기 위한 코드
console.log(computedStyle.width, computedStyle.height) // (2)
console.log(computedStyle.display) // (3)
console.log(computedStyleBefore.content) // frong
</script>
</body>
</html>퀴즈 정답
(1) window.getComputedStyle($box, ':before')
(2) 100px 200px (3) block |
데브코스 4기 프롱이들 모던 JS Deep Dive 책 뿌수기😎
아래 템플릿을 복사해서 1개이상 퀴즈를 만들어주세요. 객관식, 주관식, 단답형 모두 상관없습니다!
The text was updated successfully, but these errors were encountered: