TIL 3주차-5. DOM

DOM이란?

문서 객체 모델 : Document Object Model
HTML 문서에 접근하기 위한 일종의 인터페이스
HTML 요소로 부터 DOM객체를 생성하여 프로그래밍 언어(JS)가 DOM 구조에 접근할 수 있도록 하여 DOM을 통해서 HTML을 조작할 수 있도록 한다.

DOM은 문서에 접근할 수 있는 API로, node와 property, method를 갖는 객체로 이루어져 스크립트나 CSS와 같은 언어들이 DOM 구조에 접근 하여 커스텀 할 수 있게 만들어주는 연결 부분 역할을 갖는다.

HTML태그 출력과 DOM 객체

브라우저는 HTML 페이지를 로드하는 과정에서 각 HTML 태그를 하나의 객체로 만든다.
HTML 태그로부터 먼저 DOM객체를 생성하고 DOM트리를 구성한 후, DOM객체를 화면에 출력
HTML 페이지는 로드된 후 사라지며, 브라우저에는 DOM 객체와 DOM 트리만 존재한다.
때문에, JS로 DOM객체를 제어하면 즉각 브라우저 화면에서 HTML 태그와 컨텐츠가 변경된다.

Node 노드란?

Node는 태그 노드와 텍스트 노드 전체를 가리키고, Element는 텍스트 노드를 제외하고, 흔히 생각하는 태그(< a >같은)만 가리킨다.
따라서 태그만 검색하고 싶을 때는 Element가 붙은 메소드를 선택한다.

참고)
tree 구조에서 root 노드를 포함한 모든 개개의 개체를 node라고 표현합니다. head, body, title, script, h1, HEADER-1 등의 태그뿐 아니라 태그 안의 텍스트나 속성 등도 모두 node에 속합니다.
이중 HTML 태그를 요소노드(Element Node)라고 부르고 요소 노드 안에 있는 글자를 Text 노드(Text Node)라고 부르기도 합니다.

js로 문서객체를 생성한다는 의미는?

문서 객체가 생성되는 방식은 두 가지로 나누어 볼 수 있습니다. 우선 웹 브라우저가 HTML 페이지에 적혀 있는 태그를 읽으면 생성하는 것입니다. 이런 과정을 정적으로 문서 객체를 생성한다고 말합니다. 단순히 적혀져 있는 그대로 문서객체가 생성되는 것을 표현한 것입니다.

반대로 원래 HTML 페이지에 없던 문서객체를 JavaScript를 이용해서 생성할 수 있습니다. 이런 과정을 동적으로 문서객체를 생성한다고 합니다. 따라서 JavaScript로 문서객체를 생성한다는 것은 처음에는 HTML 페이지에 없던 문서객체를 동적으로 생성하는 것이 됩니다.

속성 정리

firstChild
firstElementChild(텍스트 노드 무시)
lastChild
lastElementChild(텍스트 노드 무시)

childNodes
children(텍스트 노드 무시)

parentNode : html 밖의 document node에도 접근
parentElement(텍스트 노드 무시)

previousSibling
previousElementSibling(텍스트 노드 무시)
nextSibling
nextElementSibling(텍스트 노드 무시)

innerHTML : 텍스트 외에도 태그를 넣을 수 있음.

footer.innerHTML = '<b>bold</b>';

outerHTML : outerHTML은 현재태그까지 포함한 문자열을 반환

footer.outerHTML = '<footer><b>bold</b></footer>';

속성

id, className(class), name, value, placeholder, checked, disabled, readonly 같은 속성 값을 조회, 변경가능.

let tag = document.getElementById('header');
tag.id; // 'header'

classList

add
remove
toggle
contains
replace

var element = document.getElementById('test');
element.classList.toggle('test-class');

메소드

remove : 해당 요소 삭제

삭제할 요소.remove() //-> 해당 요소 삭제

removeChild : 자식요소 삭제

부모요소.removeChild(삭제할 자식요소)

모든 자식 엘리먼트를 삭제하기 위해, 반복문(while, for, etc.)을 활용

const container = document.querySelector('#container');

while (container.firstChild) {
  container.removeChild(container.firstChild);
}

append : Node객체, Domstring(text)를 사용할 수 있다. return값을 반환하지 않음.

let parent = document.createElement('div)
parent.append('text가 들어간다.')

// <div>text가 들어간다.</div>

appendChild : 오직 Node객체만 받을 수 있다.

let parent = document.createElement('div)
parent.appendChild('text가 들어간다.')

// Uncaught TypeError

removeChild
insertBefore

insertBefore

parent.insertBefore(child, parent.childNodes[n]);

첫 번째 전달인자는 삽입하려는 노드
두 번째 전달인자는 삽입 기준이 되는 노드로, 새 노드는 이 앞에 놓는다

HTMLCollection vs NodeList

참조)
https://www.zerocho.com/category/JavaScript/post/573b4165a54b5e8427432948