❓DOM이란?
📗 1. DOM(Document Object Model)
- 문서 객체 모델(Document Object Model)은 HTML, XML 문서의 프로그래밍 interface이다.
- 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다.
웹 페이지는 일종의 문서(document)이다. 이 문서는 웹 브라우저를 통해 그 내용이 해석되어 웹 브라우저 화면에 나타나거나 HTML 소스 자체로 나타나기도 한다.
DOM은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공한다. html의 요소들 즉, 각 태그들에 접근하는 방법을 제공한다.
DOM은 위에 사진처럼 트리 구조로 되어있다. 트리구조로 되어 있기 때문에 노드들은 부모와 자식 관계를 가지게 된다.
여기서 노드란, 각각의 개체들을 노드(Node)라고 한다.
<html>, <body>, <div>나 텍스트, 속성 등도 모드 node에 속한다.
가장 위에 있는 html 태그는 Root Node, HTML 태그는 요소 노드(Element Node), 요소 노드안에 있는 글자를 Text 노드(Text Node)라고 부른다.
이번 글에서는 기본적이고 가장 많이 사용하는 DOM을 다루는 메서드들에 대해 알아보고자 한다.
📗 2. DOM 가져오기
DOM은 document 객체로 접근할 수 있다. console.log로 document를 보면
이렇게 이 페이지에 DOM들을 가지고 올 수 있다. 그러면 이 DOM들을 하나하나 가지고 와서 생성하고 저장하고 수정을 할 수 있다.
이제 문서의 DOM을 가져오는 방법을 알아보자.
// id명으로 dom 가져오기
const dom = document.getElementById("id명");
// class명으로 dom 가져오기
// 클래스 경우 똑같은 클래스명이 여러개인 경우도 있기 때문에 NodeList(유사 배열)형태로 출력이 된다.
const dom = document.getElementsByClassName("class명");
// tag명으로 dom 가져오기
// tag도 클래스와 마찬가지로 NodeList(유사 배열)형태로 출력이 된다.
const dom = document.getElementsByTagName("태그명");이렇게 여러가지 방법으로 DOM을 가지고 올 수 있다. 하지만 상황에 따라 getElementById를 사용할 수 있고 getElementsByClassName를 사용할 수도 있다. 이렇게 다르게 사용하면 코드 작성 시 불편하기도 하고 헷갈릴수도 있을 것이다. 이란 불편함을 해소할 수 있는 방법이 있다. 바로 querySelector와 querySelectorAll이다.
querySelector는 id, class, tag명으로 검색할 때 각각의 메서드를 사용하지 않고 하나로 통합하여 검색할 수 있는 메서드이다. 만약, 해당하는 class나 tag가 여러개라면 제일 마지막에 위치한 DOM을 가지고 온다. (= 단일 검색)
- id로 검색할 경우 #을 붙여 검색
- class로 검색할 경우 .을 붙여 검색
- tag로 검색 경우 그냥 태그명만 입력하여 검색
querySelectorAll은 해당하는 class나 tag DOM들을 전부 다 가져오는 메서드이다. id는 유니크한 값이기 때문에 사용이야 할 수 있겠지만 목적에 맞지 않기 때문에 id는 querySelector로 사용하자.
// querySelector
const dom = document.querySelector(".class명");
const dom = document.querySelector("#id명");
const dom = document.querySelector("tag명");
// querySelectorAll
const dom = document.querySelectorAll(".class명");
const dom = document.querySelectorAll("tag명");여러개의 dom을 배열 형식으로 출력되는 NodeList로 출력이 되는 경우가 있다.
class나 tag로 가지고 왔을 때 이런 경우가 생기는데 NodeList는 배열 형태처럼 보이지만 실제로 확인해보면 배열 타입이 아니다.
이런 배열처럼 보이지만 실제로 배열이 아닌 것을 유사배열 이라고 한다.
이렇게 Array.isArray()메서드로 배열인지 아닌지 확인 했을 때 false가 나오는 것으로 보아 배열이 아닌것을 확인할 수 있다.
📗 3. DOM 생성
문서 객체가 생성되는 방식은 웹 브라우저가 HTML을 읽으면서 HTML에 있는 태그들을 읽으면 문서 객체가 생성된다. 하지만 상황에 따라 DOM을 생성해야하는 경우가 있다. 이렇게 생성해야하는 경우 JavaScript로 문서 객체를 생성할 수 있다.
생성 방법
const newDOM = document.createElement("생성할 태그");
// 예시
const newDivDOM = document.createElement("div");이렇게 하면 새로운 div DOM을 생성할 수 있다. 이 div DOM에 class, id, attribute 등 추가를 해야한다면 아래와 같은 방법으로 진행하면 된다.
// 새로운 DOM에 class를 추가하는 방법
newDivDOM.classList.add("추가할 class 이름");
// 한번에 여러개 class를 추가하는 방법
newDivDOM.classList.add("추가할 class 이름", "더 추가할 class 이름");
// 새로운 DOM에 id를 추가하는 방법
newDivDOM.id = "추가할 id 이름";
// 새로운 DOM에 Attribute를 추가하는 방법
newDivDOM.setAttribute("추가할 attribute명", "값");📗 4. DOM 생성 후 자식노드로 추가하기
DOM은 트리구조이기 때문에 무조건 부모와 자식 관계를 가지게 된다. 따라서, DOM을 생성하면 자식으로 추가를 해줘야 웹페이지에도 출력이 된다.
자식노드를 추가하는 방법은 대표적으로 3가지가 있다.
- 1) append("추가할 자식 노드들") : 추가할 자식 노드 여러 개를 한번에 추가할 수 있다.
- 2) appendChild("추가할 자식 노드") : 자식 노드를 추가한다.
- 3) insertBefore("추가할 자식 노드", "기준이 되는 노드") : 기준이 되는 노드 앞에 자식노드를 추가한다.
자식노드로 추가하는 방법
const dom = document.querySelector(".class");
const childDOM = document.querySelector(".class-child");
const newDOM = docuement.createELement("div");
newDOM.classList.add("new");
const newDOM2 = docuement.createELement("div");
newDOM.classList.add("new2");
const newDOM3 = docuement.createELement("div");
newDOM.classList.add("new");
// 1) append()
dom.append(newDOM, newDOM2, newDOM3)
// 2) appendChild()
dom.appendChild(newDOM);
// 3) insertBefore()
// 이렇게 되면 childDOM앞에 newDOM이 추가된다,
dom.insertBefore(newDOM, childDOM);