DOM이란?
DOM은 Document Object Model의 약자로, HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 웹 페이지에 대한 인터페이스입니다. 기본적으로 여러 프로그램들이 페이지의 콘텐츠 및 구조, 그리고 스타일을 읽고 조작할 수 있도록 API를 제공합니다.
HTML을 동적으로 수정하는 방법을 컴퓨터가 알아듣게 작성하는 방법
const paragraphs = document.querySelectorAll("p");
// paragraphs[0] is the first <p> element
// paragraphs[1] is the second <p> element, etc.
alert(paragraphs[0].nodeName);
웹 페이지를 조작하고 생성하는 데 사용할 수 있는 모든 속성, 메서드 및 이벤트는 객체로 구성됩니다. 예를 들어, document문서 자체를 나타내는 객체, HTML 테이블에 액세스하기 위한 DOM 인터페이스를 table구현하는 HTMLTableElement모든 객체 등은 모두 객체입니다.
왜 사용하는가?
- HTML을 동적으로 보다 효율적으로 변경하기 위해서 DOM을 사용합니다.
웹은 문서를 공유하기 위해 만들어졌습니다. 이 문서를 만들기 위해 HTML이 생겨났고 이후에 브라우저가 내부에서 동적으로 HTML을 변경하고하 하면서 JavaScript가 탄생했다고 합니다.
하지만 HTML을 컴퓨터가 해석할 수 있게 정리해서 구조를 짜야하는데 이 부분이 비효율적이였고 그런 비효율적인 부부늘 해결하기 위해서 DOM을 사용한다고 합니다.
DOM의 구조
DOM의 개체 구조는 “노드 트리”로 표현됩니다. 하나의 부모 줄기가 여러 개의 자식 나뭇가지를 갖고 있고, 또 각각의 나뭇가지는 잎들을 가질 수 있는 나무와 같은 구조로 이루어져 있기 때문입니다. 이 케이스의 경우, 루트 요소인 은 “부모 줄기”, 루트 요소에 내포된 태그들은 “자식 나뭇가지” 그리고 요소 안의 컨텐츠는 “잎”에 해당합니다.
DOM API
API의 자세한 부분은 기술하지 않고 가볍게만 작성하겠습니다.
자세한 부분은 https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction#dom_interfaces
기본적으로 사용하는 기초는 다음과 같습니다.
- 내가 수정을 하고자 하는 DOM을 선택하거나 생성
- 해당하는 요소에서 원하는 항목에 접근
- 해당 요소를 원하는 값으로 변경
- 선택된 노드 삭제
- 새로운 노드 추가
요소 선택 및 찾기
document.getElementById("아이디"): 요소 ID로 요소 찾기
document.getElementByTagName("태그 이름"): 태그 이름으로 요소 찾기
document.getElementByClassName("클래스 이름"): 클래스 이름으로 요소 찾기
document.querySelectorAll("선택자"): CSS 선택자 전부 찾기
document.querySelector("선택자"): CSS 선택자 중 첫 번째 하나만 찾기
CRUD
-
div 생성
const myDiv = document.createElement("div"); console.log(myDiv) <div></div> -
text 추가
myDiv.textContent = "seunghwan"; console.log(myDiv) <div>seunghwan</div>3.class 추가
myDiv.classList.add("hello"); console.log(myDiv) <div class="hello">seunghwan</div> -
원하는 요소에 추가
document.body.append(myDiv) -
삭제
myDiv.remove() // myDiv 삭제 myDiv.classList.("hello") // class의 hello 삭제 // innerHTML="", textContent=""
