DOM(Document Object Model)

하성화·2022년 2월 22일

DOM이란?

DOM은 Document Object Model의 약자로, 말 그대로 HTML요소(Document)를 Object처럼 조작할 수 있는 Model이다.

DOM과 자바스크립트

DOM은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM을 수정할 수 있다.

CREATE

document.createElement('div')

createElement메소드를 이용하면 elment를 생성할 수 있다.
생성된 element를 JavaScript에서 사용하려면 다음과 같이 변수에 할당하여 사용해야한다.

const fruitDiv = document.createElement('div')

APPEND

생성된 element를 확인하기 위해서는 APPEND해야 한다.
APPEND를 통해 fruitDiv를 DOM트리 구조에 연결한다.
아래의 코드는 append메소드를 통해 생성된 fruitDiv를 body안에 삽입하는 코드이다.

document.body.append(fruitDiv)

부모 노드에 자식 노드를 추가하는 메서드는 append와 appendChild가 있다.
두 메서드의 대표적인 차이는 append는 노드 객체와 DOMstring을 모두 사용할 수 있고 한번에 여러개의 자식 요소를 설정할 수 있다.
반면에, appendChild는 오직 노드 객체만 받을 수 있고 한번에 하나의 노드만 추가할 수 있다. 또한, append와 다르게 추가된 객체를 반환한다.

READ

DOM으로 HTML element의 정보를 조회하기 위해서는 querySelector를 이용한다.
첫 번째 인자로 셀렉터를 전달하여 확인할 수 있다.
셀렉터로는 HTML tag("div"), id("#fruitList"), calss(.fruit)가 많이 사용된다.
querySelector 에 '.fruit' 을 첫 번째 인자로 넣으면, 클래스 이름이 fruit 인 HTML 엘리먼트 중 첫 번째 엘리먼트를 조회할 수 있다.

const onefruit = document.querySelector('.fruit')

하지만 querySelector는 하나의 element만을 가져오기 때문에 여러개의 엘리먼트를 가져오기 위해서는 querySelectorAll을 사용해야 한다.

const fruits = document.querySelectorAll('.fruit')

querySelectorAll로 찾은 element들은 배열이 아닌 유사배열로서 forEach함수는 사용할 수 있지만, reduce함수를 사용할 수 없다.
유사배열을 배열로 바꾸는 방법은 다음과 같다.

const fruits = document.querySelectorAll('.fruit'); // returns NodeList
const fruitArray = Array.prototype.slice.call(fruits); // converts NodeList to Array

// OR
const fruits = document.querySelectorAll('.fruit');
const fruitArray = Array.from(fruits);

// OR
const fruitArray = […document.querySelectorAll('.fruit')];

UPDATE

기존에 생성한 빈 div 태그를 업데이트하여, 보다 다양한 작업을 할 수 있다.
textContent를 사용해서, 비어있는 div element에 문자열을 입력한다.

console.log(onefruit) // <div></div>
oneDiv.onefruit = 'dev';
console.log(onefruit) // <div>dev</div>

textContent외에도 innerHTML과 innerText같은 속성으로도 UPDATE할 수 있다.
하지만, innerHTML은 string을 elemnet로 변환하여 UPDATE하는 속성이고,
textContent는 elemnt내의 content 부분에 text만 넣어주는 메소드이다.

class를 추가하여 CSS 스타일링이 적용될 수 있도록 할 수도 있다.

oneDiv.classList.add('fruit')
console.log(onefruit) // <div class="tweet">dev</div>

DELETE

remove메소드를 통해 element를 삭제 할 수 있다.

var fragment = document.createDocumentFragment();
const fruitDiv = document.createElement('div')
fragment.append(fruitDiv)
fruitDiv.remove() // 삭제

반복문을 활용하여 모든 자식 엘리먼트를 삭제할 수 있습니다.

// 자식 element가 없을 때 까지 삭제
var fragment = document.createDocumentFragment();
while (fragment.firstChild) {
  fragment.removeChild(fragment.firstChild);
}

클래스 이름이 fruit인 엘리먼트만 찾아서 지우는 방법도 있습니다.

const fruits = document.querySelectorAll('.fruit')
fruits.forEach(function(fruit){
    fruit.remove();
})

remove와 removeChild의 차이

remove() 는 노드를 메모리에서 삭제하고 종료.
removeChild()는 메모리에 해당 노드는 그대로 존재한다. 부모 노드와의 부모-자식관계를 끊어 DOM 트리에서 해제하고, 관계를 끊은 해당 노드 반환. 반환값을 변수에 저장하지 않으면 노드의 참조가 더이상 없기 때문에, 자바스크립트 엔진에 의해 잠시 후 메모리에서 삭제된다.

하성화

다음 포스트