Document Object Model (이하DOM)은 문서객체모델을 뜻하는 말로, html요소를 javascript를 이용해 제어하기 위해 사용한다. 아래는 문서객체모델의 메서드들이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="parents">
<div class="child">1</div>
<div class="child">2</div>
</div>
<script>
// document.createElement(), 메모리에만 존재하는 새로운 HTML 요소를 생성해 반환 (보이는 곳에 생성되는 것이 아님)
const divEl = document.createElement("div");
console.log(divEl); // <div></div>
const inputEl = document.createElement("input");
console.log(inputEl); // <input>
// E.prepend(), E.append(), 노드를 요소의 첫 번째 또는 마지막 자식으로 삽입
const parentsEl = document.querySelector('.parents');
const el = document.createElement('div');
el.textContent = 'Hello World!';
parentsEl.prepend(new Comment(' 주석 '))
parentsEl.append(el);
parentsEl.append('Text!');
// 창에 Hello World!와 Text! 추가
// E.remove(), 요소를 제거
const el2 = document.querySelector('.child');
el2.remove(); // 1 삭제
// E.insertAdjacentElement()
// 대상 요소의 지정한 위치에 새로운 요소를 삽입
// 대상요소.insertAdjacentElement(위치, 새로운 요소)
// 위치: beforebegin(이전 형제), afterbegin(첫 번째 자식), beforeend(마지막 자식), afterend(다음 형제)
// N.insertBefore()
// 부모 노드의 자식인 참조 노드의 이전 형제로 노드를 삽입
// 부모노드.insertBefore(노드, 참조 노드)
const childEl = document.querySelector('.child');
const newEl = document.createElement('span');
newEl.textContent = "Hello World!";
parentsEl.insertBefore(newEl, childEl); // child 요소의 이전 형제 요소로 newEl을 삽입할 것이라는 뜻
// N.contains()
// 주어진 노드가 노드의 자신을 포함한 후손인지 확인
// 노드.contains(주어진 노드)
console.log(parentsEl.contains(childEl)); // true
console.log(document.body.contains(parentsEl)); // true
console.log(document.body.contains(childEl)); //true
console.log(document.body.contains(document.body)); // true
console.log(parentsEl.contains(parentsEl)); // true
console.log(parentsEl.contains(document.body)); // false
console.log(childEl.contains(document.body)); // false
// N.textContent
// 노드의 모든 텍스트를 얻거나 변경
console.log(el2.textContent); // 1
el2.textContent = '7';
console.log(el2.textContent); // 7
// E.innerHTML
// 요소의 모든 HTML 내용을 하나의 문자로 얻거나 새로운 HTML을 지정
// textContent는 노드 단위에서 쓰고 innerHTML은 요소 단위에서 사용
console.log(parentsEl.innerHTML);
// <!-- 주석 -->
// <span>Hello World!</span><div class="child">2</div>
// <div>Hello World!</div>Text!
parentsEl.innerHTML = '<span style="color: red;">hello world</span>'; // 빨간 글자의 hello world가 나타남
</script>
</body>
</html>
더 많은 건 mdn 문서를 참조하자. 지난번에도 말했지만 공식문서 같은 것들이 최고인 것 같다...
https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction
DOM 소개 - Web API | MDN
이 문서는 DOM에 대한 개념을 간략하게 소개하는 문서이다: DOM 이 무엇이며, 그것이 어떻게 HTML, XML 문서들을 위한 구조를 제공하는지, 어떻게 DOM 에 접근하는지, API 가 어떻게 사용되는지에 대한
developer.mozilla.org
'JAVASCRIPT' 카테고리의 다른 글
| [JavaScript] Document Object Model (DOM) - 4 (0) | 2023.04.21 |
|---|---|
| [JavaScript] Document Object Model (DOM) - 3 (0) | 2023.04.21 |
| [JavaScript] Document Object Model (DOM) - 1 (0) | 2023.04.21 |
| [JavaScript] Module (0) | 2023.04.16 |
| [JavaScript] JSON (0) | 2023.04.16 |
