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>
// E.dataset
// 요소의 각 data 속성 값을 얻거나 지정
const el = document.querySelector('.child');
const str = "Hello World!";
const obj = { a:1, b:2 };
el.dataset.helloWorld = str;
el.dataset.object = JSON.stringify(obj);
console.log(el.dataset.helloWorld); // Hello World!
console.log(el.dataset.object); // {"a":1, "b":2}
console.log(JSON.parse(el.dataset.object)); // {a:1,b:2}
// E.tagName
// 요소의 태그 이름을 반환
const parentEl = document.querySelector(".parents");
const childEl = document.querySelector(".child");
const el1 = document.createElement('span');
console.log(parentEl.tagName); // DIV
console.log(childEl.tagName); // DIV
console.log(el1.tagName); // SPAN
console.log(document.body.tagName); // BODY
// E.id
// 요소의 id속성을 반환
console.log(childEl.id); //
childEl.id = 'child1';
console.log(childEl.id); // child1
console.log(childEl); // id="child1" 잘 출력됨
// E.className
// 요소의 class 속성 값을 얻거나 지정
console.log(childEl.className); // child
childEl.className += 'child1 active';
console.log(childEl.className); // child child1 active
console.log(childEl); //<div class = "child child1 active">1</div>
// E.classList
// 요소의 class 속성 값을 제어
// - .add() : 새로운 값을 추가
// - .remove() : 기존 값을 제거
// - .toggle() : 값을 토글
// - .constains() : 값을 확인
childEl.classList.add("siuuuuu");
console.log(childEl.classList.contains("siuuuuu")); // true
childEl.classList.remove("siuuuuu");
console.log(childEl.classList.contains("siuuuuu")); // false
childEl.addEventListener("click", () => {
el.classList.toggle("siuuuuu");
console.log(childEl.classList.contains("siuuuuu"));
});
// E.style
// 요소의 style 속성(인라인스타일)의 CSS 속성 값을 얻거나 지정
// 개별지정
// childEl.style.width = '100px';
// childEl.style.fontSize = '20px';
// childEl.style.backgroundColor = 'green';
// childEl.style.position = 'absolute';
// 한 번에 지정
// Object.assign(childEl.style, {
// width: '100px',
// fontSize: '20px',
// backgroundColor: 'green',
// position: 'absolute'
// })
// window.getComputedStyle()
// 요소에 적용된 스타일 객체를 반환
const styles = window.getComputedStyle(childEl);
console.log(styles.width); // 1089.6px
console.log(styles.fontSize); // 16px
console.log(styles.backgroundColor); // rgba(0,0,0,0)
console.log(styles.position); // static
// E.getAttribute, E.setAttribute
// 요소에서 특정 속성 값을 얻거나 지정
// HTML, JavaScript 속성 : Attribute
// CSS 속성 : property
childEl.setAttribute("title", "Hello");
console.log(childEl.getAttribute('title')); // Hello
// E.hasAttribute() / E.removeAttribute()
console.log(childEl.hasAttribute('title')); // true
childEl.removeAttribute('title');
console.log(childEl.hasAttribute('title')); // false
console.log(childEl); // <div class="childchild1 active" data-hello-world="Hello World!" data-object="{"a";:1,"b":2}" id="child1">1</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] JavaScript의 동작 원리 (0) | 2023.04.21 |
|---|---|
| [JavaScript] Document Object Model (DOM) - 4 (0) | 2023.04.21 |
| [JavaScript] Document Object Model (DOM) - 2 (0) | 2023.04.21 |
| [JavaScript] Document Object Model (DOM) - 1 (0) | 2023.04.21 |
| [JavaScript] Module (0) | 2023.04.16 |
