.png)
원티드 프리온보딩 프론트엔드 코스를 진행하며 공부한 내용을 정리했습니다.
1. DOM 기초
💡 Dom(Doument Object Model)이란?
DOM은 HTML 요소를 Object처럼 조작할 수 있는 Model로 HTML, XML 문서의 프로그래밍 인터페이스이다. DOM은 HTML 요소들이 tree 형태로 구조화하며, 프로그래밍 언어를 사용해 DOM에 접근하여 조작할 수 있도록 API를 제공한다.
💡 DOM vs javascript
DOM은 프로그래밍 언어가 아니며 javascript는 웹 브라우저에서 사용하는 프로그래밍 언어이다. javascript는 DOM을 통해 HTML 요소들을 접근하고 조작할 수 있다.
💡 DOM vs HTML
HTML은 화면에 나타내고자 하는 것을 표현한 단순 텍스트 문서이며 DOM은 HTML 문서의 객체 기반 표현 방식으로 HTML의 내용과 구조가 객체 모델로 변환되어 다양하게 사용될 수 있다.
HTML이 파싱되어 DOM이 될 수 있으며 HTML 문서가 유효하지 않을 경우 HTML과 DOM이 동일하게 나타나지 않을 수 있다.
2. DOM에서의 CRUD
1) Create
1-1) createElement
const box = document.createElement('div')이렇게 생성된 element는 DOM의 렌더 트리에는 연결되어 있지 않은 상태라 실제로는 렌더링 되지 않는다.
1-2) append, appendChild
document.body.append(box)* appendChild는 오직 Node 객체만 인자로 받을 수 있으며 append는 여러 개의 노드와 문자를 추가할 수 있으나 appendChild는 오직 하나의 노드만 추가할 수 있다.
2) Read
2-1) querySeletor
DOM을 통해 HTML element 정보를 조회하기 위해서는 querySelector 메소드를 사용하며 첫 번째 인자로 selector(선택자)를 전달한다. 동일한 element가 여러 개일 경우 최상단 요소만 반환한다.
const profile = document.querySelector('.profile')2-1) querySelectorAll
일치하는 여러 개의 element를 조회하고 싶을 때는 querySelectorAll을 사용한다.
이 메소드는 일치하는 element들을 조회하여 배열과 같은 객체 NodeList를 반환하는데, 이 객체는 Array-like Object라고 하며 유사 배열, 배열형 객체라고도 부른다.
const profiles = document.querySelectorAll('.profile')document 대신 다른 element 요소에 querySelector 메소드를 사용해 해당 element 내에서 element를 조회할 수도 있다.
(참고: getElementById와 같이 get으로 시작하는 DOM 조회 메소드는 오래된 방식이며 구형 브라우저와의 호환성이 중요할 경우 사용하기도 한다.)
3) Update
3-1) 컨텐츠 추가 - textContent
box.textContent = 'dev';3-2) 클래스 추가 - classList.add
box.classList.add('blue-box')4) Delete
4-1) remove
해당 요소가 속한 트리에서 요소를 제거한다.
box.remove();4-1) removeChild
자식 element를 지정해 삭제. 모든 자식 element를 삭제하려면 반복문 활용
const container = document.querySelector('#container');
while (container.firstChild) {
container.removeChild(container.firstChild);
}3. 추가 내용
💡element vs node
Node : DOM 계층 구조에 있는 모든 유형의 DOM object를 말하며 element node일 수도, 텍스트 노드, attribute 노드일 수도 있다.
element : node 중에서도 Node.ELEMENT_NODE를 의미한다. element node는 html에서 태그로 작성한 노드들을 말한다.
💡childern vs childNodes
childNodes : child 노드의 NodeList를 반환한다. element 뿐만 아니라 text, comment 등의 모든 노드들을 포함한다.
children : 타겟의 자식 element들이 포함된 HTMLCollection을 반환한다. element가 아닌 노드들은 포함하지 않는다.
💡 NodeList에서 forEach는 되는데, reduce는 사용할 수 없는 이유
NodeList는 Node의 collection으로 배열이 아니라 object이기 때문에 reduce같은 배열 메소드를 사용할 수는 없지만 forEach는 object에서도 사용가능하기 때문에 NodeList에서 forEach를 사용할 수 있다.
💡 NodeList를 유사 배열에서 배열로 바꾸는 방법
let nodes = document.querySelectorAll('div');
nodes = Array.prototype.slice.call(div_list);혹은 ES6 문법 기준으로 Array.from()이나 스프레드 연산자를 사용해 배열로 변환할 수 있다.
let nodes = document.querySelectorAll('div');
nodes = Array.from(nodes);
// nodes = [...nodes];- Array.from(): 객체를 얕게 복사해 새로운 Array 객체를 만드는 함수
참고 자료
- 코드스테이츠 UrClass 학습자료
- MDN Web Docs - DOM 소개
- (번역) DOM은 정확히 무엇일까?
- [Javascript] append vs appendChild 차이점 (초간단)
- MDN Web Docs - Element.remove()
- stack overflow - Difference between Node object and Element object?
- GeeksforGeeks - Difference between Node object and Element object?
- stack overflow - Convert NodeList to array
