자바스크립트 DOM 요소 및 텍스트 다루기

DOM 요소 및 텍스트를 다루는 방법

자바스크립트에서 DOM(Document Object Model, 문서 객체 모델) 요소 노드와 텍스트 노드의 탐색, 생성, 복제, 조작, 삽입, 교체 및 제거 등 DOM에서 노드를 다루는 함수와 속성 등 다양한 방법에 대해 알아봅니다.

노드
HTML DOM은 노드의 집합체입니다.
HTML에서 말하는 요소는 "요소 노드"를 의미하며,
텍스트는 "텍스트 노드",
주석은 "주석 노드"라고 말합니다.
요소는 오직 "요소 노드"만을 의미합니다.

DOM의 특정 요소를 찾는 주요 함수들입니다.
이 함수들은 DOM에서 특정 요소를 매개변수로 직접적으로 검색하는 방식입니다.

DOM 요소를 조상, 부모, 자식, 형제 등 구조적 계층 관계를 통해 찾는 주요 방법입니다.

조상 요소 찾기
`closest()`	`CSS 선택자`와 일치하는 현재 요소를 포함하여 가장 가까운 조상 요소를 찾기

부모 요소 찾기
`parentElement`	현재 요소의 부모 요소 찾기

자식 요소 찾기
`previousElementSibling`	바로 이전 형제 요소 찾기
`nextElementSibling`	바로 다음 형제 요소 찾기

DOM을 다룰 때, HTML 문서 내의 여러 요소를 한꺼번에 처리해야 할 경우가 많습니다. 이때 반환되는 요소들의 집합을 DOM 컬렉션이라고 하며, DOM 컬렉션으로는 HTMLCollection과 NodeList가 있습니다.

DOM 객체를 생성하는 주요 함수들입니다.

DOM에서 요소를 복제하는 주요 함수입니다.

DOM에서 요소를 복제하는 주요 함수
`cloneNode()`	동일 문서 내에서 호출한 DOM 노드를 복사하여 복제본을 반환

DOM에서 요소의 콘텐츠를 조작하는 주요 속성들입니다.

DOM 요소의 콘텐츠를 조작하는 세 가지 주요 속성
`textContent`	요소의 텍스트 콘텐츠를 가져오거나 설정
`innerText`	요소의 텍스트 콘텐츠를 가져오거나 설정 (단, CSS로 숨겨진 요소의 텍스트는 가져오지 못하고 렌더링된 텍스트만 가져옴)
`innerHTML`	요소의 내부 텍스트를 포함한 HTML 콘텐츠를 가져오거나 설정

DOM에서 요소의 추가, 교체 및 제거를 위한 주요 함수들입니다.

dom 요소를 교체하는 함수
`replaceChild()`	지정한 자식 요소를 새로운 자식 요소로 교체

dom 요소를 제거하는 함수들
`removeChild()`	지정한 자식 요소를 제거
`remove()`	자신을 호출한 요소를 DOM에서 제거