[39장] DOM - 1 #32
Comments
|
Q. O/X 퀴즈입니다.
퀴즈 정답1. 모든 노드는 EventTarget 인터페이스를 상속받는다.2. 어떠한 에러도 발생하지 않는다. 만약에 원하는 id를 갖는 노드를 찾고싶을 때 getElementById 메서드를 사용한다면 전달된 id값을 갖는 첫 번째 요소 노드만 반환한다. 3. class는 여러 개의 값을 가질 수 있지만 id는 가능하지 않다. |
|
Q. 다음 코드에서 파란색이 되는 li 요소의 과일 이름을 모두 말해주세요! <!DOCTYPE html>
<html>
<head>
<style>
.red { color: red; }
.blue { color: blue; }
</style>
</head>
<body>
<ul id="fruits">
<li class="red">Apple</li>
<li class="red">Banana</li>
<li class="red">Orange</li>
</ul>
<script>
const $elems = document.getElementsByClassName('red');
for(let i = 0; i< $elems.length; i++) {
$elems[i].className = 'blue';
}
</script>
</body>
</html>퀴즈 정답
위 같은 경우 첫번째 반복에서 |
|
Q. 다음 코드의 의도는 frong class를 가진 li는 초록색, backdung class를 가진 li는 주황색으로 변경하는 것 입니다. <!DOCTYPE html>
<head>
<style>
.devcourse { color: blue; }
.frong { color: green; }
.backdung { color: orange; }
</style>
</head>
<html>
<body>
<ul>
<li class="devcourse">프롱이</li>
<li class="devcourse">백둥이</li>
</ul>
<script>
const $el = document.getElementsByClassName('devcourse');
for (let i = 0; i < $el.length; i++) {
if (i === 0) $el[i].className = 'frong';
else $el[i].className = 'backdung';
}
</script>
</body>
</html>퀴즈 정답
해결방법
<script>
// 스프레드 연산자를 이용한 방법
const $el = document.getElementsByClassName('devcourse')
const $elArr = [...$el];
for (let i = 0; i < $elArr.length; i++) {
if (i === 0) $elArr[i].className = 'frong';
else $elArr[i].className = 'backdung';
}
// +while문을 이용하는 방법, for문을 역방향으로 순회하는 방법도 있습니다.
</script> |
|
Q. 퀴즈 내용
<!DOCTYPE html>
<html>
<head>
<title>Dom 예제</title>
</head>
<body>
<ul>
<li class="language java">Java</li>
<li class="language javascript">JavaScript</li>
<li class="language kotlin">Kotlin</li>
</ul>
<script>
const $languageLi = document.getElementsByClassName("language javascript");
$languageLi.forEach((elem) => {
elem.style.color = "yellow";
});
</script>
</body>
</html>퀴즈 정답
getElementByClassName 메서드는 여러 개의 요소 노드 객체를 갖는 DOM 컬렉션 객체인 HTMLCollection 객체를 반환한다.
HTMLCollection 객체는 forEach 메서드를 지원하지 않기 때문에 배열로 변환해야 한다.
[...$languageLi].forEach |
|
Q. 다음 나열된 인터페이스들을 상속 순서에 맞게 답을 써주세요. (화살표 방향대로 상속됩니다) 퀴즈 정답Object > EventTarget > Node > Element > HTMLElement > HTMLInputElement > input |
|
Q. 자식 노드를 탐색하기 위한 Node.prototype.childNodes
Element.prototype.children
Node.prototype.firstChild
Element.prototype.firstElementChild
퀴즈 정답
2-4-3-1
|
데브코스 4기 프롱이들 모던 JS Deep Dive 책 뿌수기😎
아래 템플릿을 복사해서 1개이상 퀴즈를 만들어주세요. 객관식, 주관식, 단답형 모두 상관없습니다!
The text was updated successfully, but these errors were encountered: