DOM API

DOM API는 브라우저가 제공하는 자바스크립트 인터페이스로, HTML 문서에 접근하고 조작할 수 있게 해주는 명령어들의 집합이다. 즉, 웹 페이지의 구조(HTML)를 읽고, 쓰고, 수정하고, 삭제할 수 있는 도구 모음이다.

DOM (Document Object Model)
: HTML 문서를 자바스크립트로 다룰 수 있게 만든 트리 구조의 모델
API (Application Programming Interface)
: 프로그램 간의 상호작용을 위한 약속된 방법이나 도구
DOM API
: 자바스크립트를 통해 HTML 문서를 제어할 수 있게 해주는 브라우저 내장 도구

less

DOM API
├── DOM Tree
└── DOM API
    └── 요소 선택 메서드 (Element Selection)
    │   ├── 단일 요소 선택
    │   │   ├── getElementById(id)
    │   │   └── querySelector(cssSelector)
    │   └── 다수 요소 선택
    │       ├── querySelectorAll(cssSelector)
    │       ├── getElementsByClassName(class)
    │       └── getElementsByTagName(tagName)
    ├── 요소 조작 (Element Manipulation)
    │   ├── 프로퍼티 (Properties)
    │   │   ├── className
    │   │   ├── id
    │   │   └── style
    │   └── 객체 (Object)
    │       └── classList
    │           ├── add("class")
    │           ├── remove("class")
    │           ├── toggle("class")
    │           ├── contains("class")
    │           ├── replace("old", "new")
    │           └── item(index)
    ├── 콘텐츠 조작 (Content Manipulation)
    │   ├── textContent (프로퍼티)
    │   └── innerHTML (프로퍼티)
    ├── 요소 생성 및 삽입 메서드 (Element Creation & Insertion)
    │   ├── createElement(tagName)
    │   ├── createTextNode("string")
    │   └── appendChild(node)
    └── 이벤트 처리 메서드 (Event Handling)
        └── addEventListener

DOM Tree

DOM 트리는 문서 노드를 루트로, 요소 노드, 텍스트 노드, 속성 노드 등 다양한 노드로 구성된다. DOM API를 통해 어떤 노드에 접근하든, 항상 document 객체를 시작점으로 삼아야 한다.

less

Document
└── html
    └── body
        ├── div
        │   └── h1
        │       └── ("Hello")
        └── div
            └── p
                └── ("World")

문서 노드(Document Node): DOM 트리의 최상위 노드로, document 객체에 해당한다.
요소 노드(Element Node): html, body, div, h1, p 등 태그로 구성된 노드.
- 텍스트 노드(Text Node): 요소 내부의 실제 텍스트를 나타내며 요소 노드의 자식이다.
- 속성 노드(Attribute Node): class, id, src 등 요소의 속성 정보를 가지며, 요소에 연결된 형태로 존재한다. 일반적으로 DOM 트리에서 별도로 보이진 않는다.
주석 노드 (Comment Node): 형태로, 브라우저에는 보이지 않지만 DOM에는 존재한다.

요소 선택

less

DOM API
└── 요소 선택 (Element Selection)
    ├── 단일 요소 선택
    │   ├── getElementById(id)
    │   └── querySelector(cssSelector)
    └── 다수 요소 선택
        ├── querySelectorAll(cssSelector)
        ├── getElementsByClassName(class)
        └── getElementsByTagName(tagName)

💡 변수명 네이밍

// $ + 변수명
let $date = document.getElementById("date");

// 변수명 + Element
let dateElement = document.getElementById("date");

console.log($date);
console.log(dateElement);

DOM API로 선택한 요소를 변수에 담을 때는 가독성을 높이기 위해 변수명 앞에 $ 기호를 붙이거나, 변수명 끝에 Element를 덧붙이는 네이밍을 자주 사용한다.
$date는 DOM 요소임을 직관적으로 나타내는 명명법이며, dateElement는 해당 변수가 요소 객체라는 의미를 명확히 표현한다.
이는 문법적 필수는 아니며, 코드의 명확성과 협업 시 일관성을 위한 개발자 간의 약속(convention)이다.

(1) .getElementById(id) 단일 요소 선택

getElementById()는 DOM API가 제공하는 요소 선택 메서드 중 하나로, 지정한 id를 가진 요소를 찾아 반환한다. id는 HTML 문서 내에서 고유한 값이어야 하며, 만약 중복된 id가 존재하더라도 가장 먼저 나타나는 요소(트리 위쪽에 있는) 하나만 반환된다. 해당 요소가 존재하지 않으면 null이 반환된다.

document.getElementById("id값");

매개변수: id값(문자열)
반환값: 해당 요소(HTMLElement) 또는 없을 경우 null

html

<div class="today-info">
  <div class="date" id="date">02.10.금요일</div>
  <div class="clock" id="clock">15:03</div>
</div>

console.log(document.getElementById("date"));
// <div class="date" id="date">02.10.금요일</div>

(2) .querySelector(cssSelector) 단일 요소 선택

querySelector()는 CSS 선택자 문법을 사용해 DOM 요소를 선택하는 메서드이다.

document.querySelector("CSS 선택자");

매개변수: css 선택자(문자열)
반환값: 조건에 일치하는 첫 번째 요소(HTMLElement) 또는 없으면 null
.class, #id, 태그, 복합 선택자(div.class) 등 CSS 문법 그대로 사용 가능하다.

html

<div class="today-info">
  <div class="date" id="date">02.10.금요일</div>
  <div class="clock" id="clock">15:03</div>
</div>

console.log(document.querySelector(".date")); // 클래스
console.log(document.querySelector("div.date")); // 태그 + 클래스
console.log(document.querySelector("#date")); // 아이디
// <div class="date" id="date">02.10.금요일</div>

(3) .querySelectorAll(cssSelector) 다수 요소 선택

querySelectorAll()은 CSS 선택자 문법을 활용해 조건에 맞는 모든 요소를 한 번에 선택한다. 반환값은 NodeList라는 유사 배열 객체로, length, forEach, 인덱스 접근 등이 가능하다.

document.querySelectorAll("CSS 선택자");

매개변수: css 선택자(문자열)
반환값: 조건에 맞는 모든 요소를 담은 NodeList 객체 또는 일치하는 요소가 없으면 빈 NodeList 객체(length: 0)
querySelectorAll()도 #id, .class, tag 등 CSS 선택자를 사용할 수 있지만, id는 원래 문서 내에서 유일해야 하므로 일반적으로 여러 개를 선택할 필요는 없다.

html

<div class="today-info">
  <div class="date" id="date">02.10.금요일</div>
  <div class="date" id="date">15:03</div>
</div>

const dateElements = document.querySelectorAll("div.date");
console.log(dateElements);
// NodeList(2) [<div class="date" id="date">...</div>, <div class="date" id="date">...</div>]

console.log(dateElements[0].textContent); // "02.10.금요일"
console.log(dateElements[1].textContent); // "15:03"

NodeList는 인덱스를 사용해 개별 요소에 접근할 수 있으며, 각 요소의 텍스트나 속성도 자유롭게 조작할 수 있다.

(4) .getElementsByClassName(class) 다수 요소 선택

getElementsByClassName()은 동일한 클래스 이름을 가진 모든 요소를 한 번에 선택하는 DOM API 메서드다. 반환값은 HTMLCollection이라는 유사 배열 객체로, 인덱스로 접근하거나 for, for...of 반복문을 통해 순회할 수 있다.

document.getElementsByClassName("클래스이름");

매개변수: 클래스 이름 (문자열, . 없이)
반환값: 조건에 맞는 요소들을 담은 HTMLCollection 객체

html

<div class="today-info">
  <div class="date" id="date">02.10.금요일</div>
  <div class="date" id="date">15:03</div>
</div>

const dateElements = document.getElementsByClassName("date");
console.log(dateElements);
// HTMLCollection(2) [<div class="date" id="date">...</div>, <div class="date" id="date">...</div>]

console.log(dateElements[0].textContent); // "02.10.금요일"
console.log(dateElements[1].textContent); // "15:03"

단순 클래스 이름을 문자로 전달하기 때문에 클래스 이름 앞에 .을 붙이면 안된다.
반환되는 값은 HTMLCollection이라는 유사 배열 객체이며, 여러 요소가 있을 경우 인덱스를 통해 접근할 수 있다.
- HTMLCollection은 NodeList와 유사하지만, DOM이 변경되면 자동으로 반영된다.
- forEach()는 직접 사용 불가능하며 Array.from() 등을 통해 배열로 변환해야 한다.
  js
```
Array.from(dateElements).forEach((el) => {
  console.log(el.textContent);
});
```

(5) .getElementsByTagName(tagName) 다수 요소 선택

getElementsByTagName()은 특정 태그 이름을 가진 모든 요소를 한 번에 선택하는 DOM API 메서드다. 반환값은 HTMLCollection이며, 인덱스를 통해 개별 요소에 접근할 수 있다.

document.getElementsByTagName("태그이름");

매개변수: 태그 이름
반환값: 해당 태그를 가진 요소들을 담은 HTMLCollection 객체

html

<div class="today-info">
  <div class="date">02.10.금요일</div>
  <div class="clock">15:03</div>
</div>

const divElements = document.getElementsByTagName("div");
console.log(divElements);
// HTMLCollection(3) [<div class="today-info">...</div>, <div class="date">...</div>, <div class="clock">...</div>]

console.log(divElements[0].className); // today-info
console.log(divElements[1].textContent); // 02.10.금요일

태그 이름은 대소문자 구분 없이 처리된다. ("DIV"도 "div"와 동일)
반환되는 값은 HTMLCollection이라는 유사 배열 객체이며, 여러 요소가 있을 경우 인덱스를 통해 접근할 수 있다.
- HTMLCollection은 NodeList와 유사하지만, DOM이 변경되면 자동으로 반영된다.
- forEach()는 직접 사용 불가능하며 Array.from() 등을 통해 배열로 변환해야 한다.
js
```
// 반복하려면 배열로 변환하거나 for 문 사용
Array.from(divElements).forEach((el) => {
  console.log(el.className);
});
```

요소 조작

less

DOM API
└── 요소 조작 (Element Manipulation)
    ├── 프로퍼티 (Properties)
    │   ├── className
    │   ├── id
    │   └── style
    └── 객체 (Object)
        └── classList
            ├── add("class")
            ├── remove("class")
            ├── toggle("class")
            ├── contains("class")
            ├── replace("old", "new")
            └── item(index)

(6) className

className은 DOM 요소의 class 속성 값을 문자열로 읽거나 설정할 수 있는 속성이다. 기존 클래스를 덮어쓰는 방식으로 작동한다. 기존 클래스가 여러 개인 경우, className으로 수정하면 모두 덮어쓰게 되므로 주의해야 한다.

element.className; // 읽기
element.className = "box"; // 설정

읽을 때: 해당 요소의 class 속성 값을 문자열로 반환
설정할 때: 기존 class 값을 모두 덮어쓰고 새로운 class 값으로 설정

html

<div class="today-info">
  <div class="date" id="date">02.10.금요일</div>
  <div class="clock" id="clock">15:03</div>
</div>

console.log(document.getElementById("date").className); // date

getElementById()로 id가 date인 요소를 선택하고, class 속성 값을 문자열로 반환

const dateElement = document.getElementById("date");
dateElement.className = "change";

console.log(dateElement); // <div class="change" id="date">02.10.금요일</div>
console.log(dateElement.className); // change

기존 클래스 "date"는 사라지고 "change"로 완전히 덮어쓰기 된다.
변수 값을 대입하듯 문자열로 직접 지정하면 된다.

(7) id

id는 DOM 요소의 id 속성 값을 문자열로 읽거나 설정할 수 있는 속성이다. id는 HTML 문서 내에서 고유해야 하며, 요소를 식별하는 데 자주 사용된다.

element.id; // 읽기
element.id = "new"; // 설정

읽을 때: 해당 요소의 id 속성 값을 문자열로 반환
설정할 때: 요소의 id 속성 값을 새로운 문자열로 변경

html

<div class="today-info">
  <div class="date" id="date">02.10.금요일</div>
  <div class="clock" id="clock">15:03</div>
</div>

console.log(document.querySelector("div.date").id); // date

querySelector()로 클래스가 date인 div 요소를 선택하고, 그 id 값을 출력

const dateElement = document.querySelector("div.date");
dateElement.id = "change";

console.log(dateElement); // <div class="date" id="change">02.10.금요일</div>

요소의 id 속성 값을 "change"로 변경된다.
변수에 문자열을 대입하듯 간단하게 수정 가능하다.

(8) style

style은 DOM 요소의 인라인 스타일을 제어할 수 있는 프로퍼티다. CSS 속성명을 자바스크립트의 카멜케이스(camelCase) 형식으로 작성하여 접근하거나 설정한다.

element.style.속성명; // 읽기
element.style.속성명 = "값"; // 설정

읽을 때: 해당 요소의 인라인 스타일 속성 값을 문자열로 반환
설정할 때: 요소에 인라인 스타일을 적용한다

html

<div class="today-info">
  <div class="date" id="date">02.10.금요일</div>
  <div class="clock" id="clock">15:03</div>
</div>

const dateElement = document.querySelector("div.date");
dateElement.style.color = "red";
dateElement.style.fontWeight = "bold";

console.log(dateElement);
// <div class="date" id="date" style="color: red; font-weight: bold;">02.10.금요일</div>

선택한 요소에 color와 font-weight 스타일이 인라인으로 추가된다.
style.속성명 형태로 접근하며, font-weight → fontWeight, background-color → backgroundColor처럼 작성해야 한다.

(9) classList

classList는 요소의 class 속성을 토큰 목록(DOMTokenList)으로 제공하는 속성으로, 개별 클래스를 추가·삭제·토글하는 등 유연하게 조작할 수 있다. classList는 className처럼 클래스 정보를 다루지만, 전체 문자열을 다루는 대신 개별 클래스를 조작할 수 있도록 다양한 메서드를 제공한다. 또한 배열처럼 인덱스로 접근할 수도 있는 유사 배열 객체로, 특정 인덱스의 클래스를 조회할 수도 있다.

element.classList; // 읽기 (DOMTokenList 반환)
element.classList.add("active"); // 설정(조작)

읽을 때: 클래스를 토큰 형태의 DOMTokenList로 반환
설정할 때: add(), remove() 등 메서드를 통해 클래스 조작

html

<div class="today-info">
  <div class="date" id="date">02.10.금요일</div>
  <div class="clock" id="clock">15:03</div>
</div>

console.log(document.getElementById("date").classList);
// DOMTokenList ['date', value: 'date']

classList는 DOMTokenList 객체이다. 배열처럼 생긴 객체지만, 진짜 배열은 아니다.
즉, 클래스 속성 전체를 문자열로 다루는 것이 아니라, 클래스 이름 하나하나(= 토큰)를 독립적으로 다루는 목록을 반환한다.

classList 메서드

less

classList 메서드
├── add("class")            : 클래스를 추가
├── remove("class")         : 클래스를 제거
├── toggle("class")         : 클래스가 없으면 추가, 있으면 제거
├── contains("class")       : 해당 클래스가 있는지 여부를 true/false로 반환
├── replace("old", "new")   : 기존 클래스를 새로운 클래스로 교체
└── item(index)             : 인덱스로 클래스 이름을 반환

add()

html

<div class="today-info">
  <div class="date" id="date">02.10.금요일</div>
  <div class="clock" id="clock">15:03</div>
</div>

const dateElement = document.getElementById("date");
dateElement.classList.add("change");

console.log(dateElement); // <div class="date change" id="date">02.10.금요일</div>
console.log(dateElement.classList); // DOMTokenList ['date', 'change', value: 'date change']

add()는 기존 클래스에 "change" 클래스를 추가한다.
.classList.add("change");는 요소의 클래스 목록에 "change"라는 클래스를 추가한다는 의미이다. 즉, dateElement.classList 요소의 클래스 목록(DOMTokenList 객체)에 .add("change") "change"라는 클래스를 하나 더 추가해주는 명령어이다.

remove()

html

<div class="today-info">
  <div class="date" id="date">02.10.금요일</div>
  <div class="clock" id="clock">15:03</div>
</div>

const dateElement = document.getElementById("date");
dateElement.classList.add("change");
dateElement.classList.remove("date");
dateElement.classList.remove("fake"); // 에러없음, 무시됨

console.log(dateElement); // <div class="change" id="date">02.10.금요일</div>

remove() 메서드를 통해 "date" 클래스를 제거한다.
즉, 기존 클래스 목록에서 해당 클래스 하나를 토큰 단위로 지우는 것이다.
remove()는 지정한 클래스가 없으면 무시된다.

콘텐츠 조작

less

DOM API
└── 콘텐츠 조작 (Content Manipulation)
    ├── textContent (프로퍼티)
    └── innerHTML (프로퍼티)

(10) textContent

textContent는 해당 요소 내부의 모든 텍스트 콘텐츠를 읽거나 변경할 수 있는 속성이다.
HTML 태그를 제외한 순수한 텍스트만 다루고 싶을 때 사용된다.

element.textContent; // 읽기
element.textContent = "hello"; // 설정

읽을 때: 요소 내부의 모든 텍스트를 문자열로 반환
설정할 때: 기존 텍스트를 새로운 값으로 완전히 교체

html

<div class="today-info">
  <div class="date" id="date">02.10.금요일</div>
  <div class="clock" id="clock">15:03</div>
</div>

const clockElement = document.getElementById("clock");

// 텍스트 읽기
console.log(clockElement.textContent); // "15:03"

// 텍스트 변경
clockElement.textContent = "12:00";

// 결과: <div class="clock" id="clock">12:00</div>

textContent는 요소 내부의 모든 텍스트를 문자열로 반환하거나 설정한다. innerText와 달리 화면에 보이지 않는 텍스트(숨김 요소)도 포함한다.

(11) innerHTML

innerHTML은 해당 요소 내부의 HTML 콘텐츠 전체를 읽거나 변경할 수 있는 속성이다. HTML 태그를 포함한 구조를 다룰 때 사용되며, 문자열 형태로 HTML을 삽입하거나 추출할 수 있다. 즉, 기존의 자식 요소를 모두 제거하고 새로운 HTML 구조로 덮어쓴다.

단, innerHTML을 사용할 때는 보안에 유의해야 한다. 외부에서 입력된 문자열을 그대로 삽입하면 XSS(교차 사이트 스크립팅) 공격에 노출될 수 있다. 따라서 사용자 입력을 처리할 때는 textContent를 사용하는 것이 안전하다. 또한 HTML 구조를 동적으로 삽입할 필요가 있다면, createElement(), createTextNode(), appendChild()와 같은 DOM 조작 메서드를 활용하는 것이 더 권장된다.

element.innerHTML; // 읽기
element.innerHTML = "<strong>hello</strong>"; // 설정

읽을 때: 요소 내부의 HTML 코드를 문자열로 반환
설정할 때: 기존 내용을 새로운 HTML로 교체 (문자열로 작성된 HTML이 그대로 렌더링됨)

html

<div class="today-info">
  <div class="date" id="date">02.10.금요일</div>
  <div class="clock" id="clock">15:03</div>
</div>

const clockElement = document.getElementById("clock");
const todayInfo = document.getElementById("today-info");

// HTML 읽기
console.log(clockElement.innerHTML); // "15:03"
console.log(todayInfo.innerHTML);
// <div class="date" id="date">02.10.금요일</div><div class="clock" id="clock">15:03</div>

// HTML 변경
clockElement.innerHTML = "<strong>12:00</strong>";

// 결과: <div class="clock" id="clock"><strong>12:00</strong></div>

innerHTML은 문자열로 작성된 HTML을 해석하여 DOM에 삽입하므로, 구조를 포함한 콘텐츠를 변경할 때 유용하다.

html

<div class="today-info">
  <div class="date" id="date">02.10.금요일</div>
  <div class="clock" id="clock">
    <span>15:03</span>
  </div>
</div>

const clockElement = document.getElementById("clock");
clockElement.innerHTML = "<strong>12:00</strong>";

html

<div class="today-info">
  <div class="date" id="date">02.10.금요일</div>
  <div class="clock" id="clock">
    <strong>12:00</strong>
  </div>
</div>

innerHTML에 새로운 값을 대입하면, 해당 요소의 모든 자식 노드가 제거되고, 새로운 HTML 구조로 덮어쓰기 된다.

요소 생성 및 삽입

less

DOM API
└── 요소 생성 및 삽입 메서드 (Element Creation & Insertion)
    ├── createElement(tagName)
    ├── createTextNode("string")
    └── appendChild(node)

(12) createElement(tagName)

createElement()는 지정한 태그 이름으로 새로운 요소 노드(Element Node)를 생성하는 메서드다.
생성된 요소는 브라우저 메모리에만 존재하며, 직접 DOM에 추가하지 않으면 화면에는 보이지 않는다.

createElement() + classList.add() + textContent

요소 생성 및 텍스트 설정 (DOM 미삽입)

html

<div class="today-info">
  <div class="date" id="date">02.10.금요일</div>
  <div class="clock" id="clock">15:03</div>
  <!-- <div class="season">spring</div> -->
</div>

// 요소 생성 후 클래스와 텍스트 설정
const seasonElement = document.createElement("div"); // div 요소 생성
seasonElement.classList.add("season"); // 클래스 추가
seasonElement.textContent = "spring"; // 텍스트 추가

console.log(seasonElement); // <div class="season">spring</div>

createElement()는 새로운 HTML 요소를 생성하지만, appendChild() 또는 prepend() 등을 사용해 DOM에 삽입하기 전까지는 화면에 나타나지 않는다.
textContent를 함께 사용하면 간단한 텍스트 요소도 쉽게 완성할 수 있어 직관적이고 자주 사용된다.

(13) createTextNode("string")

createElement() + createTextNode() + appendChild()

텍스트 노드 분리 방식으로 DOM에 요소 추가

DOM에 요소를 삽입하려면 createElement → createTextNode → appendChild 순서로 진행된다.

html

<div class="today-info">
  <div class="date" id="date">02.10.금요일</div>
  <div class="clock" id="clock">15:03</div>
  <!-- <div class="season">spring</div> -->
</div>

// 브라우저 메모리 상에서 요소 및 텍스트 노드 생성
const seasonElement = document.createElement("div"); // div 요소 생성
seasonElement.classList.add("season"); // 클래스 추가

const seasonText = document.createTextNode("spring"); // 텍스트 노드 생성

console.log(seasonElement); // <div class="season"></div>
console.log(seasonText); // "spring"

createElement()와 createTextNode()로 생성한 노드는 실제로는 DOM에 존재하지 않는다.
이들은 메모리에만 존재하며, appendChild()로 기존 DOM 요소에 삽입해야 브라우저 화면에 보인다.

// 요소에 텍스트 삽입
const seasonElement = document.createElement("div"); // div 요소 생성
seasonElement.classList.add("season"); // 클래스 추가

const seasonText = document.createTextNode("spring"); // 텍스트 노드 생성
seasonElement.appendChild(seasonText); // 텍스트 노드를 <div>에 삽입

console.log(seasonElement); // <div class="season">spring</div>

createTextNode()는 텍스트만 담긴 별도의 텍스트 노드를 생성하며, 생성 직후에는 아직 DOM 트리에 연결되지 않은 상태이다.
이 텍스트 노드는 appendChild()를 사용해 부모 요소의 자식 노드로 직접 삽입해야 한다.
이 방식은 텍스트 노드를 분리해 다루기 때문에, 텍스트를 세밀하게 제어하거나 여러 텍스트/요소를 조합할 때 유용하다.

// DOM에 삽입
const seasonElement = document.createElement("div"); // div 요소 생성
seasonElement.classList.add("season"); // 클래스 추가

const seasonText = document.createTextNode("spring"); // 텍스트 노드 생성
seasonElement.appendChild(seasonText); // 텍스트 노드를 <div class="season">에 추가

const todayInfoElement = document.querySelector("div.today-info"); // 기존 요소 선택
todayInfoElement.appendChild(seasonElement); // 완성된 요소를 DOM에 추가

// <div class="season">spring</div>가 추가된 것을 확인할 수 있음

createElement()와 createTextNode()로 생성한 노드는 브라우저 메모리 상에만 존재하며, appendChild() 를 통해 DOM에 삽입해야 브라우저에 표시된다.
appendChild()는 대상 요소의 마지막 자식으로 노드를 추가한다. 따라서 이미 자식 요소가 있는 경우, 새 노드는 맨 마지막에 삽입된다.

(14) appendChild(node)

createElement() + textContent + appendChild()

요소 생성 후 텍스트 설정 및 DOM 삽입

html

<div class="today-info">
  <div class="date" id="date">02.10.금요일</div>
  <div class="clock" id="clock">15:03</div>
  <!-- <div class="button">버튼</div> -->
</div>

// 추가 예시
const buttonElement = document.createElement("div"); // div 생성
buttonElement.classList.add("button"); // button 클래스 추가
buttonElement.textContent = "버튼"; // 텍스트 설정

// DOM에 삽입
const todayInfoElement = document.querySelector("div.today-info"); // 기존 요소 선택
todayInfoElement.appendChild(buttonElement); // 생성한 요소 삽입

console.log(document.getElementsByTagName("div"));
// HTMLCollection(4) [div.today-info, div.date, div.clock, div.button]

appendChild()는 생성한 요소를 부모 요소의 마지막 자식으로 DOM에 삽입한다.
getElementsByTagName()은 실시간 컬렉션(Live HTMLCollection)을 반환하므로, 삽입 직후 콘솔에 출력해도 추가된 요소가 포함되어 있다.

이벤트 처리

less

DOM API
└── 이벤트 처리 메서드 (Event Handling)
    └── addEventListener()

(15) addEventListener()

element.addEventListener(eventType, listenerFunction);

addEventListener: DOM 요소에 이벤트를 등록할 수 있는 메서드이다.
eventType (문자열): 등록할 이벤트 이름
listenerFunction (함수): 이벤트가 발생했을 때 실행될 함수

html

<div class="today-info">
  <div class="date" id="date">02.10.금요일</div>
  <div class="clock" id="clock">15:03</div>
  <!-- <div class="button">버튼</div> -->
</div>

// 버튼 요소 생성 및 이벤트 등록
const buttonElement = document.createElement("div");
buttonElement.classList.add("button");
buttonElement.textContent = "버튼";

// DOM에 삽입
const todayInfoElement = document.querySelector("div.today-info");
todayInfoElement.appendChild(buttonElement);

// 이벤트 등록
buttonElement.addEventListener("click", () => {
  window.alert("클릭");
});

// 결과: 버튼 클릭하면 "클릭"이라는 경고창이 실행된다.

addEventListener()는 지정한 이벤트가 발생하면 두 번째 인자로 전달한 함수(listener)를 실행한다.
위 예시에서는 "click" 이벤트가 발생했을 때 window.alert("클릭")이 실행된다.
window 객체는 브라우저의 최상위 객체로, alert(), confirm(), prompt() 같은 팝업 관련 메서드를 포함한다.

DOM API ​

DOM Tree ​

요소 선택 ​

(1) .getElementById(id) 단일 요소 선택 ​

(2) .querySelector(cssSelector) 단일 요소 선택 ​

(3) .querySelectorAll(cssSelector) 다수 요소 선택 ​

(4) .getElementsByClassName(class) 다수 요소 선택 ​

(5) .getElementsByTagName(tagName) 다수 요소 선택 ​

요소 조작 ​

(6) className ​

(7) id ​

(8) style ​

(9) classList ​

classList 메서드 ​

add() ​

remove() ​

콘텐츠 조작 ​

(10) textContent ​

(11) innerHTML ​

요소 생성 및 삽입 ​

(12) createElement(tagName) ​

createElement() + classList.add() + textContent ​

요소 생성 및 텍스트 설정 (DOM 미삽입) ​

(13) createTextNode("string") ​

createElement() + createTextNode() + appendChild() ​

텍스트 노드 분리 방식으로 DOM에 요소 추가 ​

(14) appendChild(node) ​

createElement() + textContent + appendChild() ​

요소 생성 후 텍스트 설정 및 DOM 삽입 ​

이벤트 처리 ​

(15) addEventListener() ​

DOM API

DOM Tree

요소 선택

(1) .getElementById(id) 단일 요소 선택

(2) .querySelector(cssSelector) 단일 요소 선택

(3) .querySelectorAll(cssSelector) 다수 요소 선택

(4) .getElementsByClassName(class) 다수 요소 선택

(5) .getElementsByTagName(tagName) 다수 요소 선택

요소 조작

(6) className

(7) id

(8) style

(9) classList

classList 메서드

add()

remove()

콘텐츠 조작

(10) textContent

(11) innerHTML

요소 생성 및 삽입

(12) createElement(tagName)

createElement() + classList.add() + textContent

요소 생성 및 텍스트 설정 (DOM 미삽입)

(13) createTextNode("string")

createElement() + createTextNode() + appendChild()

텍스트 노드 분리 방식으로 DOM에 요소 추가

(14) appendChild(node)

createElement() + textContent + appendChild()

요소 생성 후 텍스트 설정 및 DOM 삽입

이벤트 처리

(15) addEventListener()