DOM : Document Object Model

DOM 이란 무엇인가?

• DOM 이란 ? Document Object Model의 약자로, HTML 요소를 Object 처럼 조작할 수 있는 모델이다. DOM 을 활용해 HTML로 구성된 웹페이지를 동적으로 움직이게 만들 수 있다. 아주 중요한 녀석이다!
• DOM에서 찾을 수 없는 요스의 반환값이 왜 undefined 가 아니고 null 일까?? 일단 DOM 객체에서의 null은 값이 존재하지 않음 혹은 해당 노드가 없음을 의미한다고 한다.
• undefined와 null의 차이 : undefined는 변수를 선언하고 값을 할당하지 않은 상태, null은 변수를 선언하고 빈 값 을 할당한 상태. 즉, 의도적으로 비어 있음을 의미한다고 한다. (또 typeof undefined === 'undefined' 이지만 typeof null === 'object' 라고 한다.)

출처 : https://poiemaweb.com/js-dom

• DOM 을 내가 이해한 대로 정리하자면... DOM 은 HTML 문서를 트리구조로 계층화 하여 정리한 객체 데이터이다. 이 데이터를 통해 각 노드 혹은 element 에 접근해서 동적으로 상호작용 할 수 있도록 돕는다.
• DOM 에 대해서 공부하다 보면 node 와 element 개념이 나오는데, node는 element의 상위 개념이라고 한다. DOM 이 각 노드별로 계층화 된 트리구조이고, element(태그)는 node 의 종류 중 하나인 것이다. node의 종류는 텍스트 혹은 주석이 될 수도 있다고 한다.
• 자바스크립트에서 DOM 은 document 객체에 구현되어 있다. 따라서 자바스크립트에서는 document.찾고자 하는 프로퍼티 이름으로 요소에 접근할 수 있다. 또한 DOM의 구조를 파악할 때 console.dir을 사용하면 편리하다. mdn 에 따르면, console.dir은 자바스크립트 객체의 모든 속성을 볼 수 있는 방법이라고 한다. 특정 객체의 하위 개체를 쉽게 파악할 수 있어서 DOM 요소를 조회할 때 사용하면 유용하다.

DOM 과 자바스크립트의 차이점?

• DOM !== JavaScript : DOM 은 자바스크립트의 일부가 아니다.
• 웹 페이지는 일종의 문서인데, 이를 객체 지향적으로 표현한 것이 바로 DOM 객체이다. 자바스크립트같은 프로그래밍 언어로 DOM을 조작하고 수정할 수 있는 것은 맞지만, 엄밀히 말하면 둘은 독립적인 개념이다.
• MDN에 따른 정리는 다음과 같다. API(web) = DOM + JavaScript(스크립팅 언어)
• 프로그래밍 언어와 독립적으로 존재한다는 것은, 즉 자바스크립트가 아닌 다른 언어로도 DOM을 조작할 수 있다는 의미이다.

DOM 다뤄보기!

• DOM으로 HTML Element 추가 후 기존 요소에 추가하기

// 새로운 div 를 생성하여 tweeDiv 변수에 저장
const tweetDiv = document.createElement('div');

// container Id를 가진 요소를 조회하여 container 변수에 저장
const container = document.querySelector('#container');

// container에 tweetDiv 를 맨 마지막 자식 요소로 추가
container.append(tweetDiv);

• 생성한 HTML Element 변경하기

const oneDiv = document.createElement('div');

// 생성한 요소의 textContent 변경
oneDiv.textContent = 'dev'; // <div>dev<div>

// class 추가 : 해당 클래스로 지정된 스타일이 있다면 동일하게 적용된다.
oneDiv.classList.add('tweet');

// setAttribute로 요소의 어트리뷰트 지정 가능
// 첫 번째 인자로 어트리뷰트 이름, 두 번째 인자로 어트리뷰트 값을 받는다.
oneDiv.setAttribute('id','yes');

• DOM으로 HTML Element 삭제하기

// 삭제할 요소 1개를 특정지을 수 있는 경우
tweetDiv.remove();

// 여러개의 요소를 삭제할 경우 : 반복문을 이용한다.

// 1. con.firstChild가 조회되는 동안 firstChild를 삭제.
//... 이 때 조건문을 수정하여 삭제되는 갯수 등을 제한할 수 있다.
while(con.firstChild){
    con.removeChild(con.firstChild); }

// 2. 특정 클래스로 구성된 노드리스트를 순회하여 삭제.
const tweets = document.querySelectorAll('.tweet')
tweets.forEach(function(tweet){
    tweet.remove();
})
// or
for (let tweet of tweets){
    tweet.remove()
}

• 모든 요소를 지우는 방법은 위 방법 이외에도 innerHtml이라는 메서드가 존재한다. 다만 innerHtml의 경우 외부인이 <scripts> 태그 내에 악성 코드를 심어 공격하는 XSS 에 취약하므로, 텍스트를 변경할 땐 textContent를, 요소 자체를 삽입할 때는 insertAdjacentHTML을 사용할 것을 권장한다.

참고자료

https://2ssue.github.io/common_questions_for_Web_Developer/docs/Javascript/13_undefined&null.html#undefined

undefined와 null의 차이점을 설명하세요 | 2ssue's dev note

https://hianna.tistory.com/711

[Javascript] node와 element의 차이

https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction

DOM 소개 - Web API | MDN

https://til-devsong.tistory.com/m/101

웹페이지를 다룰 때 주의해야 할 속성, innerHTML