DOM(Document Object Model)

DOM 이란??

HTML 문서를 객체기반으로 표현한 것으로서 HTML 문서에 작성된 내용을 트리구조(계층형으로 표현)로 나타냈을 때
각각의 태그, Text, Comment 등을 Node 라고 한다

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

Node 확인하기!!!

  <ul id="test">
        <!-- Node 확인 테스트 주석입니다. -->
        <li id="li1">1번</li>
        <li class="cls">2번</li>
        <!-- 중간 주석 -->
        <li style="background-color: yellow;">3번</li>
        <li>
            <a href="#">4번</a>
        </li>
    </ul>
    <button id="btn1">확인하기</button>

// Node 확인하기
document.getElementById("btn1").addEventListener("click",function(){

    // 부모
    // 요소.parentNode : 요소의 부모 노드를 탐색해서 반환

    // 자식
    // 요소.childNodes : 요소의 자식 노드를 모두 반환(NodeList 형태)
    // 요소.firstChild : 첫 번째 자식 노드를 탐색해서 반환
    // 요소.lastChild : 마지막 자식 노드를 탐색해서 반환
    // 요소.childNodes[인덱스] : 인덱스 번째 자식 노드를 탐색해서 반환

    // 형제
    // 요소.previousSibling : 요소의 이전 형제 노드를 반환
    // 요소.nextSibling : 요소의 다음 형제 노드를 반환

    // #test 의 자식 노드를 모드 얻어와 확인
    const testNodeList = document.getElementById("test").childNodes;
    console.log(testNodeList);

    // 노드 탐색
    const li1 = document.getElementById("li1");
    console.log(li1.parentNode); // 부모노드 탐색 (ul#test)

    // #li1 의 부모 배경색을 orange로 변경 (노드 탐색 활용 방법)
    li1.parentNode.style.backgroundColor = "orange";

    // #li1의 부모노드의 마지막 부분에 "ABCD"라는 text node 추가
    // 요소.append(요소 또는 노드) : 마지막 자식으로 추가
    li1.parentNode.append("ABCD");

    const test = document.getElementById("test")
    // #test의 첫번째 자식 노드 찾기
    console.log(test.firstChild);
    // #test의 마지막 자식 노드 찾기
    console.log(test.lastChild);
    // #test의 자식 노드 중 5번째 인덱스 노드 찾기
    console.log(test.childNodes[5]);
    // #test의 자식 노드 중 5번째 인덱스 노드의 마지막자식으로 "ZZZ"추가하기
    test.childNodes[5].append("ZZZ");
    // #test의 자식노드 중 5번째 인덱스의 이전 형제 노드
    console.log(test.childNodes[5].previousSibling);
    // #test의 자식노드 중 5번째 인덱스의 다음 형제 노드
    console.log(test.childNodes[5].nextSibling);
    // #test의 자식노드 중 5번째 인덱스의 이전 형제 노드의 이전 형제 노드
    console.log(test.childNodes[5].previousSibling.previousSibling);
    
})

라이브 서버를 열면 이렇게 구현되어 있는데 확인하기를 눌러보면 아래 사진처럼 변한다!!

확인하기 버튼을 눌렀을 때

확인하기 버튼을 2번 눌렀을 때

 

콘솔창을 확인해보자!!

---

---

---

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

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

        [Element만 탐색하는 방법]

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

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

        previousElementSibiling : 이전 형제 요소 선택
        nextElementSibiling : 다음 형제 요소 선택
    </pre>
    <button id="btn2">Element 확인하기</button>

document.getElementById("btn2").addEventListener("click", function(){
    const test = document.getElementById("test"); // 부모요소
    const li1 = document.getElementById("li1"); // 자식요소

    // #li1의 부모 요소 탐색
    console.log(li1.parentElement);
    // #li1의 부모 요소의 부모요소 탐색
    console.log(li1.parentElement.parentElement);

    // #test의 모든 자식 요소 탐색
    console.log(test.children);
    // #test의 첫번째 자식 요소
    console.log(test.firstElementChild);
    // #test의 마지막 자식 요소
    console.log(test.lastElementChild);
    // #test의 자식요소 중 2번 인덱스
    console.log(test.children[2])

    // test의 자식요소 중 2번 인덱스의 이전형제 요소 클릭시 
    // 작성된 내용을 alert로 출력
    // this == 이벤트가 발생한 요소
    // == #test의 자식요소중 2번 인덱스의 이전 형제 요소
    // 이벤트가 발생한 요소의 다음다음 형제 요소의 배경색을 red로 변경
    test.children[2].previousElementSibling.addEventListener("click",function(){
        alert(this.innerText);
        // 작성된 내용은 : this.innerText
        this.nextElementSibling.nextElementSibling.
        style.backgroundColor = "red";
    })
})

html에서 만든 버튼!

 

이제 이 버튼을 누른다음 처음 만들었던 리스트에서 js에서 지정한 2번 인덱스의 이전 형제 요소를 누른다면!!

이렇게  alter 창이 뜨고 

배경색이 바뀌는 것을 확인할수 있다!