JavaScript11

 <h1>제목</h1>

    <h1>DOM(Document Object Model)</h1>

    <pre>
        HTML(웹문서, 웹페이지) 문서를 객체 기반으로 표현한 것
        -> HTML 문서에 작성된 내용을 트리구조(계층형으로 표현)로 나타냈을 때
        각각의 태그, TEXT, COMMENT 등을 Node 라고 한다.

        document : {
            DOCTYPE : html,
            HTML : {
                HEAD : {
                    TITLE : { TEXT : "문서제목" },
                    STYLE : {...},
                    META : {...},
                },
                BODY : {
                    H1: { TEXT : "제목", ATTRIBUTE : "속성" },
                    COMMENT : { TEXT : "주석내용" },
                    DIV : {...}
                }
            }
        }
    </pre>

    <hr>
    <h1>Node 확인하기</h1>

    <ul id="test">
        <li id="li1">1번</li>
        <li class="cls">2번</li>
        <li style="background-color: aquamarine;">3번</li>
        <li>
            <a href="#">4번</a> 
        </li>
    </ul>

    <button id="btn1">확인하기</button>


    <h1>Node와 Element의 차이</h1>
    <pre>
        Node : 태그(요소 노드), 속성, 주석, 내용(텍스트 노드) 등 모두 표현.

        Element : Node의 하위 개념 요소 노드만을 표현

        [Element만 탐색하는 방법]

        children : 자식 요소만을 모두 선택
        parentElement : 부모 요소 선택

        firstElementChild : 첫 번째 자식 요소 선택
        lastElementChild : 마지막 자식 요소 선택

        previousElementSibling : 이전 형제 요소 선택
        nextElementSibling : 다음 형제 요소 선택
    </pre>

    <button id="btn2">Element 확인하기</button>

    <hr>

    <h2>요소 생성 및 추가</h2>

    <h3>innerHTML을 이용한 요소 생성 및 추가</h3>
    <pre>
        * innerHTML 원리
        1) 특정 요소의 내부 내용을 새로운 내용으로 덮어씌움
        (기존 내용이 사라지는 문제 발생)
        
        2) 덮어씌워지는 새로운 내용을 단순 문자열로 추가하는 것이 아닌
        HTML 요소가 포함되어 있으면 이를 해석 할 수 있도록
        HTMLParser를 이용함
        (추가적인 해석을 진행하기 때문에 속도가 느림)
    </pre>
    <button id="btn3">innerHTML로 생성</button>
    <div class="area" id="div3"></div>
    
    <hr>
    
    <h3>DOM 요소 생성(document.createElement()) 및 추가</h3>
    <button id="btn4">createElement로 생성</button>
    <div class="area" id="div4"></div>