Chapter39

📌문제1

다음 문장의 true, false를 판단하세요.

(1) HTML 문서 내 중복된 id 값을 갖는 HTML 요소가 여러 개 존재하더라도 어떠한 에러도 발생하지 않는다.
(2) 인수로 전달된 id 값을 가진 HTML 요소가 존재하지 않는 경우, getElementById 메서드는 에러를 발생한다.
(3) CSS 선택자 중 `p ~ ul {...}`은 p 요소의 형제 요소 중에 p 요소 바로 뒤에 위치하는 ul요소를 선택한다.
(4) querySelectorAll 메서드는 실시간으로 노드 객체의 상태 변경을 반영하지 않는 객체를 반환한다.

답안 작성

(1) : true
(2) : false
(3) : false
(4) : true

(1) : (686p) HTML 문서 내에 중복된 id 값을 갖는 요소가 여러 개 존재하는 경우, getElementById 메서드는 인수로 전달된 id 값을 갖는 첫 번째 요소만 반환합니다. 
즉, getElementById 메서드는 언제나 단 하나의 요소 노드만을 반환합니다.
따라서 중복된 id가 여러 개 존재하더라도 에러가 발생하지 않습니다.

(2) : (686p) null을 반환합니다.

(3) : (692p) `p + ul {...}`에 대한 설명입니다.
`p ~ ul {...}`은 p요소의 형제 요소 중에 p요소 뒤에 위치하는 ul 요소를 모두 선택합니다.

(4) : (698p) HTMLCollection 객체의 부작용을 해결하기 위해 getElementByTagName, getElementByClassName 대신 querySelectorAll 메서드를 사용할 수 있습니다.
querySelectorAll 메서드는 NodeList 객체를 반환합니다.
NodeList 객체는 실시간으로 노드 객체의 상태 변경을 하지 않는 객체입니다.

하지만 childNodes 프로퍼티가 반환하는 NodeList 객체는 live 객체로 동작합니다.
따라서 노드 객체의 상태 변경과 상관 없이 안전하게 DOM 컬렉션을 사용하기 위해서는
HTMLCollection이나 NodeList 객체를 배열로 변환하여 사용하는 것을 권장합니다.

📌문제2

자식 노드 탐색을 위한 노드 탐색 프로퍼티에 대한 설명입니다.

프로퍼티에 알맞게 짝지어 보세요.

(a) 자식 노드 중에서 요소 노드만 모두 탐색하여 HTMLCollection에 담아 반환한다.
이 프로퍼티가 반환한 HTMLCollection에는 텍스트 노드가 포함되어 있지 않다.

(b) 자식 노드를 모두 탐색하여 NodeList에 담아 반환한다.
이 프로퍼티가 반환한 NodeList에는 요소 노드와 텍스트 노드가 포함되어 있다.

(c) 첫 번째 자식 노드를 반환한다.
이 프로퍼티가 반환한 노드는 텍스트 노드이거나 요소 노드다.

(d) 첫 번째 자식 노드를 반환한다.
이 프로퍼티는 요소 노드만 반환한다.

답안 작성

Node.prototype.childNodes : (b)
Element.prototype.children : (a)
Node.prototype.firstChild : (c)
Element.prototype.firstElementChild : (d)

📌문제3

다음 문장의 true, false를 판단하세요.

(1) 부모 노드가 텍스트 노드인 경우는 없다.
(2) Node.ELEMENT_NODE는 요소 노드 타입을 나타내는 상수로 3을 반환한다.
(3) 요소 노드의 textContent 프로퍼티에 문자열을 할당할 때, HTML 마크업은 파싱되지 않는다.

답안 작성

(1) : true
(2) : false
(3) : true

(1) : (707p) 텍스트 노드는 DOM 트리의 최종단 노드이므로, 부모 노드가 텍스트 노드인 경우는 없습니다.

(2) : (709p) 1을 반환합니다.
Node.TEXT_NODE가 텍스트 노드 타입을나타내는 상수로 3을 반환합니다.

(3) :(713p)
요소 노드의 textContent 프로퍼티에 문자열을 할당ㅇ하면 요소 노드의 모든 자식 노드가 제거되고 할당한 문자열이 텍스트로 추가됩니다.
이 때 할당한 문자열에 HTML 마크업이 포함되어 있더라도 문자열 그대로 인식되어 텍스트로 취급됩니다.
즉 HTML 마크업이 파싱되지 않습니다.

🔗 노드 타입 상수 https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType

📌문제4

다음의 콘솔 출력 결과를 작성하세요.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>

    <ul id="abc">
        <li>A</li>
        <li>B</li>
        <li>C</li>
    </ul>
</body>
<script>
    console.log(app); 
    var app = 1;
    console.log(app);

    const $abc = document.querySelector('#abc');
    console.log($abc.childNodes.length);
    console.log($abc.children.length);
</script>
</html>

정답 및 해설

(1) undefined
(2) 1
id값과 동일한 이름의 전역변수가 자동으로 할당되고 해당 노드 객체가 자동으로 만들어지지만 
script 안에 해당 식별자의 이름으로설정된 변수가 있으면 노드 객체가 할당되지 않는다. 
(3) 7
(4) 3
Node.prototype.childNodes은 요소 노드와 텍스트 노드를 반환하고, 
Element.prototype.children은 요소 노드만 반환한다.

📌문제5

다음 HTML의 출력 결과물을 예측해보세요

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
.green {
    color : green;
}
.blue {
    color : blue;
}
        
</style>
<body>
    <div class="green">a</div>
    <div class="green">b</div>
    <div class="green">c</div>
</body>
<script>
    let $items = document.querySelectorAll('.green');
    console.log($items);
    for(let i =0; i < $items.length; i++){
        $items[i].className = "blue";
    }

    $items = document.getElementsByClassName('blue'); 
    console.log($items);

    for(let i =0; i < $items.length; i++){
        $items[i].className = "green";
    }
</script>
</html>

정답 및 해설

초록색 a
파랑색 b
초록색 c

HTMLCollection은 노드의 객체 상태변화를 실시간으로 반영하는 살아있는 객체이고, 
Nodelist는 childNodes 프로퍼티가 반환하는 NodeList 객체가 아닌 이상 none-alive 객체이다.
따라서 실시간으로 바뀌기 때문에 $items의 인덱스가 3 => 2로 변화해 1, 3번째 요소만
바뀌게 된다.

둘 다 예측하지 못할 결과를 가져올 수 있기 때문에, 배열로 변환해 사용하는 것이 좋다.

📌문제6

다음을 읽고 true or false를 판단하세요

(1) getElementById로 요소를 가져올 때 해당 id 값을 가진 요소가 한 개 이상이라면 
에러를 발생시킨다.
(2) Node.prototyle.nextSibling은 형제 노드 중에서 다음 형제 요소 노드를 반환한다. 
(3)노드 탐색 프로퍼티는 읽기 전용 접근자 프러퍼티이고, 값을 대입하면 에러를 발생시킨다.

정답 및 해설

(1) false
getElementById로 요소를 가져올 때 해당 id 값을 가진 요소가 한 개 이상이라면 
에러를 발생시키지 않고 맨 처음의 요소를 가져온다. 
(2) false
Node.prototype.nextSibling은 형제 노드 중에서 다음 형제 노드를 반환하는데, 요소 노드일 수도 있고
텍스트 노드일 수도 있다. 이것을 방지하기 위해서는 
Element.prototype.nextElementSibling을 사용하면 된다.
(3) false
노드 탐색 프로퍼티는 읽기 전용 접근자 프러퍼티이고, 값을 대입하면 에러를 발생시키지 않는다.

📌문제7

각 보기의 `true`, `false`를 판단하시오.

(1) : 문서 노드(document 객체)는 html문서의 <html>를 가리킨다.
(2) : 노드 객체는 4가지(문서 노드, 요소 노드, 어트리뷰트 노드, 텍스트 노드)로 구성되어 있다.
(3) : textContent 프로퍼티에 문자열을 할당하면 텍스트로 추가되어서 HTML 마크업이 파싱되지 않는다.

정답 및 해설

(1) : false (p680)
문서노드(Document 객체)는 DOM 트리의 루트 노드이고, <html>은 HTML 문서의 루트 요소입니다.

(2) : false (p680, p709)
교재 p680에서 12종류라고 언급합니다.
그리고 12개의 노드 타입은 p709를 참고하여 nodeType에 의해 12종류를 알 수 있습니다. (링크 참고)

(3) : true (p713)
textContent에 문자열을 할당하면 모든 자식 노드를 제거하고 해당 문자열을 추가한다.
문자열에 html 태그가 있어도 파싱되지 않고 문자열로 취급된다.

🔗Document (MDN)
🔗Document.documentElement (MDN)
🔗Node.nodeType

📌문제8

`노드(Node)`와 `요소(Element)`가 동일한 지 판단하시오. 다르다면 차이점을 작성하시오.

정답 및 해설

노드와 요소는 동일하지 않다.

노드(Node)는 여러 DOM 타입이 상속하는 인터페이스이다.
대표적인 프로퍼티로 baseURI, childNodes, firstChild, textContent 등이 있다.
메서드로는 appendChild(), hasChildNodes(), removeChild() 등이 있다.

요소(Element)는 Document 객체 안의 모든 객체가 상속하는 인터페이스이다.
대표적인 프로퍼티로 classList, innerHTML, tagName 등이 있다.
메서드로는 addEventListener(), closest(), querySelector() 등이 있다.

요소는 노드를 상속받는다.

🔗Node (MDN)
🔗Element (MDN)

📌문제9

`HTMLCollection`과 `NodeList`의 차이점을 작성하시오.

정답 및 해설

모두 DOM API가 여러 개의 결과값을 반환하기 위한 DOM 컬렉션 객체이다.
또한 모두 유사 배열 객체이면서 이터러블이다.

HTMLCollection
항상 실시간으로 반영하는 객체이므로 순회를 하면서 HTMLCollection의 노드를 조작하는 경우 원하는 대로 실행하지 않을 수 있다.
따라서 스프레드 문법이나 Array.from()으로 배열로 변환하여 사용하는 것을 권장한다.

NodeList
childNodes프로퍼티를 제외하고 실시간을 반영하지 않는 객체이므로 자유롭게 순회하고 노드를 제어하면 된다.

p695 ~ 699
🔗HTMLCollection (MDN)
🔗NodeList (MDN)

📌문제10

모든 노드객체에서 이벤트를 발생시킬 수 있는 이유에대해서 설명하세요.

답안작성

모든 노드객체는 EventTarget을 상속받기때문에 EventTarget에 정의된 addEventListener메서드를통해 이벤트를 발생시킬 수 있다.

📌문제11

책에선 HTMLCollection객체를 사용하지 않는것을 권장하는데, 그 이유에대해서 서술하고(1) HTMLCollection를 반환하는 DOM API(2)를 작성하세요.

답안작성

(1) HTMLCollection객체는 실시간으로 노드 객체의 상태 변경을 반영하는 live DOM 컬렉션 객체이기 때문에 동작을 파악하기가 어렵다. 따라서 좀더 안전하게 HTMLCollection객체가 이터러블임을 감안하여 스프레드 문법으로 배열로 변환후 유용한 배열의 고차함수를 사용하자. 

(2) getElementsByTagName, getElementsByClassName

📌문제12

출력결과를 예측하세요.

    <div class="container">
      텍스트
      <div></div>
    </div>
    <script>
      const $container = document.querySelector(".container");

      console.log($container.nodeValue); // (1)
      console.log($container.textContent[0]); // (2)
      console.log($container.innerText[0]); // (3)
    </script>

답안작성

(1) null
(2) 
(3) 텍

📌문제13

true or false

 - HTML5는 innerHTML 프로퍼티로 삽입된 script요소 내의 자바스크립트 코드를 실행하지 않는다. 
 - DOcument.prototype.createElement(tagName) 메서드로 요소노드를 생성하는 과정에서 리플로우,리페인트가 실행된다.
 - Document.prototype.createDocumentFragment 메서드를 사용하면 불필요한 컨테이너 태그가 돔에 추가되는것을 방지 할 수 있다.

답안작성

(1) true - p.717
(2) false - 이후  Node.prototype.appendChild메서드를 통해 별도로 DOM에 추가해주는 과정을 거칠때 리플로우,리페인트가 실행된다.
(3) true - p.726

📌문제14

true or false

- HTML태그(div,span,input…)의 어트리뷰트는 변환된 DOM요소의 프로퍼티로 참조할 수 없다.
- HTML태그(div,span,input…)의 어트리뷰트의 역할은 변환된 DOM요소의 프로퍼티의 초기값을 지정한다.
- 모든 DOM프로퍼티는 사용자 입력에의해 변경된 최신 상태를 관리한다.

답안작성

(1) false - attribues프로퍼티로 접근가능.
(2) true - p. 738 
(3) false - 사용자 입력에의한 상태 변화와 관련있는 DOM프로퍼티만 최신 상태 값으로 유지.

📌문제15

true or false 를 고르시오

1. innerHTML = ‘<div>1<div>’; innerHTML += ‘<div>2<div>’; 일때 <div>1<div>은 유지하고 새로운 div요소만 추가된다.
2. 모든 HTML 어트리뷰트는 DOM 프로퍼티를 가진다. 
3. 요소 노드의 초기 상태는 DOM 노드가 관리하며, 최신 상태는 어트리뷰트 노드가 관리한다.

###답안 작성

(1) false
innerHTML 프로퍼티는 HTML 마크업 문자를 할당하는 경우 요소 노드의 모든 자식 노드를 제거하고 할당한 HTML 마크업 문자열을 파싱하여 DOM을 변경한다. 
(2) false
대부분의 어트리뷰트는 DOM 노드를 가지지만 예외도 존재한다. 예를 들어 textContent 프로퍼티는 대응하는 어트리뷰트를 가지지 않는다. 
(3) false
요소 노드의 초기 상태는 어트리뷰트 노드가 관리하며, 최신 상태는 DOM 노드가 관리한다.

📌문제16

다음 실행 결과를 예측하시오

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
        <div id="app"></div>
    <script>
        const $app = document.querySelector("#app");
        $app.innerHTML = '<script>alert("hello")</script>'
        $app.innerHTML = `<img src='x' onerror="alert('bye')"/>`;
    </script>
</body>
</html>

답안 작성

alert('bye') 가 실행된다. script 태그는 html5에서는 막아주기 때문에 실행되지 않고, 
이미지의 onerror는 이미지를 가져올 수 없을 때 일어나는 것으로, 코드에서 이미지를 
가져올 수 없기 때문에 onerror 안의 함수가 실행된다. 이러한 방식이 가능하기 때문에, 
innerHTML은 xss공격에 위험하다.

📌문제17

다음 코드를 보고 app의 결과를 예측하시오

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
        <div id="app" style="width : 100px; height : 100px"></div>
    <script>
        const $app = document.querySelector("#app");
        $app.style.backgroundColor = "red";
        console.log($app.style.backgroundColor); // (3)
        console.log($app.style.opacity); // (4)
    </script>
    <style>
        #app {
            background-color: blue;
            height : 200px;
            opacity: 0.5;
        }
    </style>
</body>
</html>

답안 작성

(1) width : 100px
(2) height : 100px
(3) background-color : red
style 프로퍼티는 인라인 스타일로 적용되기 때문에 일반적인 css 보다 우선순위에 있다. 

(4) - 1 콘솔 결과 : red
(4) - 2 콘솔 결과 : 아무것도 출력되지 않음 
style 프로퍼티는 인라인 스타일만 반환한다. 따라서 클래스를 적용한 스타일이나 
상속을 통해 암묵적으로 적용된 스타일은 style 프로퍼티로 참조할 수 없다. 
따라서 html 요소에 적용되어있는 모든 css 스타일을 참조해야할 경우 getComputedStyle
메서드를 이용한다.

📌문제18

`innerHTML`, `insertAdjacentHTML`은 왜 `XSS(Cross-Site Scripting)`에 취약한지 작성하시오.

정답 및 해설

정답 : 데이터(htmlString)을 파싱하기 때문이다.
두 키워드는 주어진 데이터(htmlString)을 파싱하여 document에 새로운 요소를 추가를 합니다.
파싱하는 과정에서 악성 script를 주입하는 XSS 공격에 노출됩니다.
이를 막기 위해 HTML5부터는 데이터(htmlString)에 script 태그가 들어간 경우 실행하지 않도록 하였습니다.
하지만 <img src='x' onerror='alert(1)'> 같은 경우는 막지 못합니다.
따라서 해당 키워드를 지양하시는 것을 권장합니다.

🔗innerHTML (MDN)

📌문제19

교재에서 요소 노드의 상태를 2곳에서 관리한다고 명시되어 있습니다. 초기 상태는 `어트리뷰트 노드`가 관리하며, 최신 상태는 `DOM 프로퍼티`가 관리합니다. 왜 2가지 상태로 관리하는 이유를 작성하시오.

정답 및 해설

초기 상태를 관리하지 않으면 웹페이지를 처음 표시하거나 새로고침할 때 초기 상태를 표시할 수 없기 때문입니다.
따라서 사용자 입력에 따른 최신 상태를 관리해야 하면서, 초기 상태를 관리해야 한다.

p739

📌문제20

노드를 조작하는 메서드 중에 `insertBefore`를 이용하여 노드를 이동하면 아래의 브라우저 렌더링에서 어느 부분부터 시작하는지 고르시오.

(1) : DOM tree
(2) : CSSOM tree
(3) : Render tree
(4) : Layout (Reflow)
(5) : Paint (Repaint)

정답 및 해설

Layout
노드의 이동뿐만 아니라 추가, 삭제, 변경 등 노드를 조작하는 경우, 변경사항을 반영하기 위해 Layout(Reflow)부터 시작하게 됩니다.
다만, DOM tree에 변경사항을 반영하지만 다시 DOM tree를 만들지는 않습니다.

🔗Reflow 와 Repaint

📌문제21

innerHTML 프로퍼티를 사용한 DOM 조작은 구현이 간단하고 직관적이지만 다양한 단점이 존재합니다.

innerHTML 프로퍼티의 단점에 대해 아는 대로 설명하세요.

답안 작성

(1) : 크로스 사이트 스크립팅 공격에 취약합니다.
(2) : 요소 노드의 innerHTML 프로퍼티에 HTML 마크업 문자열을 할당하는 경우,
요소 노드의 모든 자식 노드를 제거하고 할당한 HTML 마크업 문자열을 파싱하여 DOM을 변경합니다.
(3) : 새로운 요소를 삽입할 때 삽입될 위치를 지정할 수 없습니다.

📌문제22

다음 코드가 어떤 역할을 하는지 설명해보세요.

<html>
    <head>
        <style>
            .box{
                width: 100px;
                height: 100px;
                background-color: royalblue;
            }
            .red { color: red}
            .blue {color: blue}
        </style>
    </head>
<body>
    <div class="box red">Hello!</div>
    <script>
        const $box=document.querySelector('red')
    </script>
</body>
</html>

(1) $box.classList.add('DeepDive');
(2) $box.classList.contains('box');
(3) $box.classList.remove('blue');

답안 작성

(1) : add 메서드는 인수로 전달한 1개 이상의 문자열을 class 어트리뷰트 값으로 추가합니다.
    : class = "box red DeepDive"
(2) : contains 메서드는 인수로 전달한 문자열과 일치하면 클래스가 class 어트리뷰트에 포함되어 있는지 확인합니다.
    : true
(3) : 인수로 전달한 1개 이상의 문자열과 일치하는 클래스를 class 어트리뷰트에서 삭제합니다.
    : 인수로 전달한 문자열과 일치하는 클래스가 class 어트리뷰트에 없으면 에러 없이 무시합니다.
    : class = "box blue"

📌문제23

다음 코드의 실행 결과를 작성하고, 그 이유를 설명하세요.

<html>
<body>
    <div>test</div>
    <ul id="fruits">
        <li>Apple</li>
        <li>Banana</li>
    </ul>
    <script>
        const $fruits = document.getElementById('fruits')
        const $li = document.createElement('li')
        $li.appendChild(document.createTextNode('Orange'))
        $fruits.insertBefore($li, document.querySelector('div')) // (1)
    </script>
</body>
</html>

답안 작성

DOMException
insertBefore 메서드는 첫 번째 인수로 전달받은 노드를 두 번째 인수로 전달받은 노드 앞에 삽입합니다.
따라서 두 번째 인수로 전달 받은 노드는 반드시 insertBefore 메서드를 호출한 노드의 자식 노드이어야 합니다.
즉 $fruits 요소의 자식노드이어야 합니다.

Files

ch39-해설.md

Latest commit

History

ch39-해설.md

File metadata and controls

Chapter39

📌문제1

다음 문장의 true, false를 판단하세요.

답안 작성

📌문제2

자식 노드 탐색을 위한 노드 탐색 프로퍼티에 대한 설명입니다.

프로퍼티에 알맞게 짝지어 보세요.

답안 작성

📌문제3

다음 문장의 true, false를 판단하세요.

답안 작성

📌문제4

다음의 콘솔 출력 결과를 작성하세요.

정답 및 해설

📌문제5

다음 HTML의 출력 결과물을 예측해보세요

정답 및 해설

📌문제6

다음을 읽고 true or false를 판단하세요

정답 및 해설

📌문제7

각 보기의 true, false를 판단하시오.

정답 및 해설

📌문제8

노드(Node)와 요소(Element)가 동일한 지 판단하시오. 다르다면 차이점을 작성하시오.

정답 및 해설

📌문제9

HTMLCollection과 NodeList의 차이점을 작성하시오.

정답 및 해설

📌문제10

모든 노드객체에서 이벤트를 발생시킬 수 있는 이유에대해서 설명하세요.

답안작성

📌문제11

책에선 HTMLCollection객체를 사용하지 않는것을 권장하는데, 그 이유에대해서 서술하고(1) HTMLCollection를 반환하는 DOM API(2)를 작성하세요.

답안작성

📌문제12

출력결과를 예측하세요.

답안작성

📌문제13

true or false

답안작성

📌문제14

true or false

답안작성

📌문제15

true or false 를 고르시오

📌문제16

다음 실행 결과를 예측하시오

답안 작성

📌문제17

다음 코드를 보고 app의 결과를 예측하시오

답안 작성

📌문제18

innerHTML, insertAdjacentHTML은 왜 XSS(Cross-Site Scripting)에 취약한지 작성하시오.

정답 및 해설

📌문제19

교재에서 요소 노드의 상태를 2곳에서 관리한다고 명시되어 있습니다. 초기 상태는 어트리뷰트 노드가 관리하며, 최신 상태는 DOM 프로퍼티가 관리합니다. 왜 2가지 상태로 관리하는 이유를 작성하시오.

정답 및 해설

📌문제20

노드를 조작하는 메서드 중에 insertBefore를 이용하여 노드를 이동하면 아래의 브라우저 렌더링에서 어느 부분부터 시작하는지 고르시오.

정답 및 해설

📌문제21

innerHTML 프로퍼티를 사용한 DOM 조작은 구현이 간단하고 직관적이지만 다양한 단점이 존재합니다.

innerHTML 프로퍼티의 단점에 대해 아는 대로 설명하세요.

답안 작성

📌문제22

다음 코드가 어떤 역할을 하는지 설명해보세요.

답안 작성

📌문제23

다음 코드의 실행 결과를 작성하고, 그 이유를 설명하세요.

답안 작성

각 보기의 `true`, `false`를 판단하시오.

`노드(Node)`와 `요소(Element)`가 동일한 지 판단하시오. 다르다면 차이점을 작성하시오.

`HTMLCollection`과 `NodeList`의 차이점을 작성하시오.

`innerHTML`, `insertAdjacentHTML`은 왜 `XSS(Cross-Site Scripting)`에 취약한지 작성하시오.

교재에서 요소 노드의 상태를 2곳에서 관리한다고 명시되어 있습니다. 초기 상태는 `어트리뷰트 노드`가 관리하며, 최신 상태는 `DOM 프로퍼티`가 관리합니다. 왜 2가지 상태로 관리하는 이유를 작성하시오.

노드를 조작하는 메서드 중에 `insertBefore`를 이용하여 노드를 이동하면 아래의 브라우저 렌더링에서 어느 부분부터 시작하는지 고르시오.