Document Object Model (이하DOM)은 문서객체모델을 뜻하는 말로, html요소를 javascript를 이용해 제어하기 위해 사용한다. 아래는 문서객체모델의 메서드들이다.
<!DOCTYPE html>
<html lang="ko">
<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>
<h1>Hello World</h1>
<br>
<div class="parents">
<!-- 주석 -->
<div class="child1">1</div>
텍스트1
<div id="child2">2</div>
텍스트2
<div class="child">3</div>
택스트3
<div class="child">4</div>
택스트4
</div>
<script>
// DOM(Document Object Model)
// DOM이란 HTML 문서를 객체로 표현한 것으로, JS에서 HTML을 제어할 수 있도록 함
const element = document.querySelector("h1");
console.log(element.textContent);
// DOM API (DOM에서 사용할 수 있는 명령들)
// Node vs Element
// - 노드(Node): HTML 요소, 택스트, 주석 등 모든 것을 의미
// - 요소(Element): HTML 요소를 의미, 노드가 요소보다 상위개념
const parents = document.querySelector('.parents');
// 부모 요소의 모든 자식 노드 확인!
console.log(parents.childNodes); // NodeList(11) [text, comment, text, div.child1, text, div#child2, text, div.child, text, div.child, text]
// 부모 요소의 모든 자식 요소 확인!
console.log(parents.children); // HTMLCollection(4) [div.child1, div#child2, div.child, div.child, child2: div#child2]
// dir(디렉토리)
console.dir(parents);
// document.getElementById()
// HTML 'id'속성값으로 검색한 요소를 반환
// 여러 요소가 검색되면 가장 먼저 찾은 요소만 반환
// 검색결과가 없으면 null 반환
const el = document.getElementById('child2');
console.log(el); // <div id="child2">2</div>
// document.querySelector()
// CSS 선택자로 검색한 요소를 하나 반환
// 여러 요소가 검색되면 가장 먼저 찾은 요소만 반환
// 검색 결과가 없으면 null 반환
const el1 = document.querySelector('.child3');
const el2 = document.querySelector('.child1');
console.log(el1); // null
console.log(el2); // <div class="child1">1</div>
// document.querySelectAll()
// CSS 선택자로 검색한 모든 요소를 NodeList로 반환
// NodeList 객체는 forEach를 사용할 수 있음
// NodeList: node가 여러 개 들어있는 객체
const nodeList = document.querySelectorAll('.child');
console.log(nodeList); // NodeList(2) [div.child, div.child]
nodeList.forEach((el)=>{
console.log(el.textContent);
}); // 3 4
console.log(Array.from(nodeList).reverse()); // nodeList를 배열로 변환하고, 배열에서만 쓸 수 있는 메서드를 사용
// [div.child, div.child]
// N.parentElement
// 노드의 부모 요소를 반환
const el3 = document.querySelector('.child');
console.log(el3.parentElement);
// <div class="parents">
// <!-- 주석 -->
// <div class="child1">1</div>
// 텍스트1
// <div id="child2">2</div>
// 텍스트2
// <div class="child">3</div>
// 택스트3
// <div class="child">4</div>
// 택스트4
// </div>
// E.closest()
// 자신을 포함만 조상 요소 중 'CSS 선택자'와 일치하는, 가장 가까운 요소를 반환
// 요소를 찾지 못하면 'null'을 반환
const el4 = document.querySelector('.child');
console.log(el4.closest('div')); // <div class="child">3</div>
console.log(el4.closest('body')); // <body>...</body
console.log(el4.closest('.hello')); // null
// N.previousSibiling / N.nextSibiling
// 노드의 이전 형제 혹은 다음 형제 노드를 반환
const el5 = document.querySelector('.child');
console.log(el5.previousSibling); // "텍스트2"
console.log(el5.nextSibling); // "텍스트3"
// E.previousElementSibiling, E.nextElementSibling
// 요소의 이전 형제 혹은 다음 형제 요소를 반환
const el6 = document.querySelector('.child');
console.log(el6.previousElementSibling); // <div id="child2">2</div>
console.log(el6.nextElementSibling); // <div class="child">4</div>
// 노드(Node)와 요소(Element)의 차이를 구분할 것
// E.children
// 요소의 모든 자식 요소를 반환
const el7 = document.querySelector('.parents');
console.log(el7.children); // HTMLCollection(4) [div.child1, div#child2, div.child, div.child, child2: div#child2]
// E.firstElementChild / E.lastElementChild
// 요소의 첫 번째 자식 혹은 마지막 자식 요소를 반환
const el8 = document.querySelector('.parents');
console.log(el8.firstElementChild); // <div class="child1">1</div>
console.log(el8.lastElementChild); // <div class="child">4</div>
</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) - 3 (0) | 2023.04.21 |
|---|---|
| [JavaScript] Document Object Model (DOM) - 2 (0) | 2023.04.21 |
| [JavaScript] Module (0) | 2023.04.16 |
| [JavaScript] JSON (0) | 2023.04.16 |
| [Javascript] 표준내장객체 - Object (0) | 2023.04.16 |
