[Javascript] DOM

해당 글은 모든 자바스크립트 개발자가 알아야 하는 33가지 개념에서 열세 번째인 DOM and Layout Trees 항목을 공부하면서 간단하게 작성한 글이다.

 

브라우저가 html 파일을 메모리에 보관할 수 있는 object 형태로 변환시킨 후 Tree 구조를 만들어낸다. 이것을 Document Object Model (DOM)이라고 부른다. DOM을 이용해서 자바스크립트로 웹페이지를 제어하는 것이 가능하다. 따라서 자바스크립트로 웹페이지를 수정할 때 html 원본 파일 조작하는 것이 아닌 DOM을 조작하는 것이다.

Node vs Element

node란 임의의 DOM 객체를 얘기한다. 즉, DOM tree에 존재하는 모든 것들을 node라고 하고 element는 그러한 node 중에서 div, a, h1과 같은 html 태그들을 가리키는 node이다. 그러므로 element는 다양한 종류의 node 중에 하나인 것이다.

querySelector

다양한 selector를 활용해서 DOM에서 selector와 일치하는 첫 번째 element를 찾아오는 API이다. 만약 없으면 null을 반환한다. 만약 selector와 일치하는 element를 모두 찾고 싶다면 querySelectorAll을 사용한다. 그런데 querySelectorAll은 NodeList 객체를 반환하고 NodeList는 유사 배열로 배열은 아니지만 배열의 매서드 중 하나인 forEach()는 사용 가능하다.

const div1 = document.querySelector('div'); // 첫번째 div element를 가져옴
const div2 = document.querySelectorAll('div'); // 모든 div element를 NodeList 형식으로 가져옴

append vs appendChild

두 가지 모두 자식 노드를 추가해준다. 하지만 차이점은 다음과 같다.

 

1. append는 인자 값으로 문자열과 Node 객체를 받지만 appendChild는 Node 객체만 받는다.

   parentNode.append("hello world");
   parentNode.append(childNode);
   
   parentNode.appendChild(childNode);​

2. append는 한 번에 여러 개의 노드를 추가할 수 있지만 appendChild는 한 개만 가능하다.

   parentNode.append("hello world", childNode1, childNode2);
   
   parentNode.appendChild(childNode);​​

3. append는 반환 값이 없지만 appendChild는 추가된 노드의 참조값을 반환한다.

remove vs removeChild

두 가지 모두 노드를 삭제한다. 정확히 말하자면 노드를 삭제한다기보다는 부모-자식 관계를 없애는 것이다. 자식 노드를 삭제해도 자식 노드는 가비지 컬렉터에 의해 삭제되지 않는 이상 메모리에 계속 남아있다.

 

두 메서드의 차이점으로는 remove는 삭제하고자 하는 자식 노드의 reference만 필요하고, removeChild는 부모와 자식 노드의 reference가 모두 필요하다.

childNode.remove();

parentNode.removeChild(childNode);

children vs childNodes

두 가지 모두 자식 노드를 반환하지만 차이점은 children은 element 노드만을 포함한 HTML Collection을 반환하고 childNodes는 NodeList를 반환하는데 element 노드 포함 다른 종류의 노드들도 반환한다.

/*
html 파일
<p>
	<b> 안녕하세요! </b> 반갑습니다.
</p>
*/

const p = document.querySelector('p');
p.children;  //HTMLCollection은 자식 element만 가져오기 때문에 <b>만 가져온다.
p.childNodes; //node에는 element 뿐만 아니라 text node도 있기 때문에 <b> 와 '반갑습니다' 를 가져온다.