DOM(Document Object Model)

📝 DOM, 요소추가제거, 함수 작업 후 세미프로젝트 작업
#230302

📌 DOM

HTML(웹문서, 웹페이지) 문서를 객체 기반으로 표현한 것

→ HTML 문서에 작성된 내용을 트리구조(계층형으로 표현)로 나타냈을 때
각각의 태그, TEXT, COMMENT 등을 Node 라고 한다.

//html을 dom으로 표시했을 경우

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

🏷️Node 확인하기

<부모>

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

<자식>

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

<형제>

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

(형제는 태그 사이에 보이지 않는 공백부분까지 카운트함)

✔️ Node와 Element의 차이

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

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

🏷️ Element 확인하기

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

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

previousElementSibling : 이전 형제 요소 선택
nextElementSibling : 다음 형제 요소 선택

🏷️innerHTML을 이용한 요소 생성 및 추가

*innerHTML 원리

1) 특정 요소의 내부 내용을 새로운 내용으로 덮어씌움
(기존 내용이 사라지는 문제 발생)

2) 덮어씌워지는 새로운 내용을 단순 문자열로 추가하는 것이 아닌
HTML 요소가 포함되어 있으면 이를 해석 할 수 있도록
HTMLParser를 이용함
(추가적인 해석을 진행하기 때문에 속도가 느림)

💻 실무에서는 innerHTML보다 createElement()를 더 많이 사용함

document.createElement("태그명");
이거 쓸 때는 해당 태그 요소를 생성만하여 반환
요소가 생성될 뿐이지 화면 추가되는 것이 아니다!