11. JS DOM

🔅 DOM(Document Object Model)

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

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

📍 Node

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

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

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

** 요소.append(요소 또는 노드) : 마지막 자식으로 추가

📍 Element

• children : 자식 요소만을 모두 선택
• parentElement : 부모 요소 선택
• firstElementChild : 첫번째 자식 요소 선택
• lastElementChild : 마지막 자식 요소 선택
• previousElementSibling : 이전 형제 요소 선택
• nextElementSibling : 다음 형제 요소 선택

📍 Node와 Element의 차이점

• Node : 태그(요소 노드), 속성, 주석, 내용(텍스트 노드), 공백 등 모두 표현
• Element : Node의 하위개념, 요소 노드만을 표현!

🌟 DOM 요소 생성(document.createElement())

해당 태그 요소를 생성하여 반환 -> 요소가 생성될 뿐, 화면에 추가되는 것은 아니다

// createElement()
const btn4 = document.getElementById("btn4");
const div4 = document.getElementById("div4");

let count4 = 1;

btn4.addEventListener("click", function(){

    if(count4 <= 10){

		const div = document.createElement("div");
        const input = document.createElement("input");

        // #div4 > div > input
        // div의 내용으로 count4 추가 후 1증가
        div.innerText = count4;
        count4++;

        div.append(input);
        div4.append(div);
    }

});

참고) innerHTML로 요소 생성 및 추가

const btn3 = document.getElementById("btn3");
const div3 = document.getElementById("div3");

let count3 = 1;

btn3.addEventListener("click", function(){
    if(count3 <= 10){
        const input = "<input type='test'>";

        div3.innerHTML += "<div>"+ count3 + input +"</div>";
        count3 ++;
    }
});