Document Object Model. 웹페이지에 대한 인터페이스.
웹페이지의 컨텐츠, 구조, 스타일을 수정할 수 있다.
EventTarget, Node, Element
EventTarget > Node > Element
Element는 Node를 상속하고, Node는 EventTarget을 상속한다!
즉, 가장 상위에 있는 인터페이스는 EventTarget!
EventTarget
Event를 받을 수 있으며, Listener를 가질 수 있는 객체가 구현하는 DOM 인터페이스
예시)
EventTarget.addEventListener()
EventTarget.removeEventListener()
EventTarget.dispatchEvent()Node
여러 가지 DOM 타입들이 상속하는 인터페이스.
Document, Element, CharacterData (Text, Comment...) 등의 부모 인터페이스!
Node의 부모 인터페이스는 EventTarget이므로, EventTarget의 Property와 Method를 상속한다
Element
Document 안의 모든 객체가 상속하는 제일 범용적인 기반 클래스
부모인 Node와 그 부모인 EventTaget의 Property와 Method를 모두 사용할 수 있다!
(아직 공부가 부족하여 이 이상의 설명은 하기 어렵다...ㅠㅠ)
index.html 예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Nav bar</title>
<script src="main.js" defer></script>
</head>
<body>
<h1>Test</h1>
<nav class="navbar">Home</nav>
</body>
</html>이와 같은 경우,
html을 부모로 두는 head/body HTML Element,
head를 부모로 두는 meta/meat/title/script HTML Element,
body를 부모로 두는 h1/nav HTML Element,
title을 부모로 두는 TextNode(Nav bar),
h1을 부모로 두는 TextNode(Test),
nav를 부모로 두는 TextNode(Home)
지금은 갈팡질팡하지만 점차 바르게 걷게될지어다