DOM 조작

앤더손씨·2022년 2월 22일

⌚️ DOM과 javascript

DOM은 HTML이 파싱되어 만들어진 객체로 javascript는 이렇게 웹에서 제공하는 API인 DOM을 이용하여 웹사이트에 접근하고 명령을 내릴 수 있다.

DOM은 브라우저 환경에서 제공되는 web API이다. 이러한 호스트 객체는 런타임의 종류에 따라 달라지는데, 예를들어 Node.js가 호스트 환경일 경우 이때 제공되는 API에는 브라우저 환경이 아니기 때문에 DOM과 관련된 내용들이 존재하지 않는다. 대신 브라우저 환경에서는 보안상의 이유로 제약된 파일시스템과 관련한 API를 제공한다.

DOM을 조작하기 위한 CRUD의 대표적인 API들은 다음과 같다

Create = document.createElement
Read = querySelector
Update = append, appendChild, textContent
Delete = remove, removeChild

append에는 모든 노드가 올 수 있다(ex, 텍스트 노드도 가능). 하지만 appendChild는 오로지 요소 노드만 가능하다.
appendChild에는 하나의 요소만 인자로 올 수 있지만 append는 여러개가 가능하다.

const div = document.createElement('div');
const span = document.createElement('span');
const p = document.createElement('p');

document.body.append(div, 'hello', span, p) // possible
document.body.appendChild(div) // possible

참고로, HTML 노드의 프로토타입 체인에 따라 상속되는 Element.prototype은 모든 요소들이 다 가지고 있기 때문에 해당 prototype이 제공하는 정적 메서드인 append는 해당 요소 레벨에서도 사용이 가능하다. 다른 메서드들도 마찬가지이다.

remove는 타겟 노드의 프로토타입 체인에 의해 Element.prototype에서 찾을 수 있는 정적 메서드로, 해당 타겟 노드를 삭제한다.
removeChild는 부모 노드에서 자신의 자식 노드에 대해 실행할 수 있는 정적 메서드로, 부모와의 연결관계를 끊고 해당 끊어진 자식노드를 리턴한다.

💻 헷갈리는 개념 1. Node vs Element

Node는 추상클래스로, 직접 생성되지 않으며 상속 prototype 체인에 있어 DOM의 데이터 자료들을 결합하여 만들어진 트리 구조를 조정할 수 있는 API를 제공하는 기능을 한다.
예를들어, parentNode로 부모를 조회하거나, childNodes로 자식들을 탐색하는 등을 뜻한다.

DOM 이 형성되면, window 호스트 객체의 document 프로퍼티에 루트 엘레멘트인 document객체가 등록된다. 이 document 객체 포함 그 하위 자식들은 모두 노드들의 계층으로 형성되어 있다.