[JavaScript] DOM

📌DOM(Document Object Model)

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

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

🔊 Node 확인하기

→ 태그(요소 노드), 속성, 주석, 내용(텍스트 노드) 등을 모두 표현

Node 는 각각의 태그 TEXT, COMMENT등을 의미한다. 

<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>

 

➰ 요소.childNodes : 요소의 자식 노드를 모두 반환 

test의 자식 요소를 모두 반환 해보세요. 
document.getElementById("btn1").addEventListener("click", function () {

	const nodeList = document.getElementById("test").childNodes

}

➰ 부모 노드 탐색 : parentNode

부모노드를 찾으세요.
    const li1 = document.getElementById("li1");
    console.log(li1.parentNode);

부모 노드의 배경색 변경 
liq.parentNode.style.backgroudnColor = "pink";

✳ append : 요소 추가 ( 마지막에 덧붙인다. )

부모 노드 마지막에 새로운 노드 추가 
li1.parentNode.append("ABCD");

✳ firstChild: 첫번째 자식 노드 탐색

첫번째 자식 노드 탐색 하시요
console.log(document.getElementById("test").firstChild);

✳ lastChild: 마지막 자식 노드 탐색 

마지막 자식 노드 탐색 하세요.
console.log(document.getElementById("test").lastChild);

 

✳ 중간에 존재하는 자식 노드 탐색 : 부모요소.childNode[인덱스]

    console.log(nodeList[11]);
    nodeList[11].append("1234");

✳ 이전 형제 노드 탐색 : previousSibling
    다음 형제 노드 탐색 : nextSibling

 

    console.log(nodeList[8].previousSibling);
    console.log(nodeList[8].nextSibling);

❗ 노드 탐색을 위한 구문을 연달아 사용 가능 (8 > 5번째 인덱스 검색)

console.log(nodeList[8].previousSibling.previousSibling.previousSibling);

🔊 Element 확인하기

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

 

➰  children : 자식 요소만 모두 선택

    const list = document.getElementById("test").children;
    console.log(list);

➰  parentElement : 부모 요소 선택

    //#test의 첫번째 자식 요소
    document.getElementById("test").firstElementChild.style.backgroundColor = "red";

 

➰  firstElementChild : 첫 번째 자식 요소 선택

➰  lastElementChild  : 마지막 자식 요소 선택

➰ previousElementSibling : 이전 형제 요소 선택

➰  nextElementSibling     : 다음 형제 요소 선택