DOM 노드 클래스
DOM 노드는 종류에 따라 각각 다른 프로퍼티를 지원한다.
예를 들어 <a> 태그는 링크 관련 프로퍼티, <input> 태그는 입력 관련 프로퍼티를 제공한다.
각각의 DOM 노드는 상속하는 클래스의 종류에 따라 내장 클래스가 달라진다.
-
EventTarget
루트에 있는 추상 클래스이며 이벤트 관련 기능을 제공한다. 모든 DOM 노드에서 이벤트를 사용할 수 있다.
-
Node
추상 클래스이며, DOM 노드의 베이스 역할을 한다. getter 역할을 하는parentNode,nextSibling,childNodes등 트리 탐색 기능을 제공한다.
Text, Element, Comment 클래스는 Node 클래스를 상속받는다.
-
Element
DOM 요소를 위한 베이스 클래스이다.nextElementSibling,children,getElementsByTagName,querySelector 등 요소 전용 탐색을 도와주는 프로퍼티나 메서드를 제공한다.
-
HTMLElement
HTML 요소 노드의 베이스 역할을 하는 클래스이다. HTML 요소 메서드와 getter, setter를 제공한다.-
HTMLInputElement
<input>요소에 대응하는 클래스 -
HTMLBodyElement
<body>요소에 대응하는 클래스 -
HTMLAnchorElement
<a>요소에 대응하는 클래스
-
console.dir() vs console.log()
인수가 자바스크립트 객체라면 두 명령어는 같은 결과를 보여준다.
하지만 DOM 요소일 때는 다른 결과를 출력한다.
console.log()→ 요소의 DOM 트리를 출력한다.console.dir()→ 요소를 DOM 객체로 취급하여 출력한다. 프로퍼티를 확인할 수 있다.
DOM 요소를 가져와서 addEventListener, parentNode, style 등등 많은 프로토타입 메서드를 사용했는데, 어떤 원리로 사용할 수 있는지 생각을 해본 적이 없었던 것 같다.
DOM은 객체고, 클래스를 상속하고, 각각 클래스 안에는 프로토타입 메서드들이 있다. 그중에서 parentNode, nextSibling 등등은 setter로 사용이 불가능하고 getter로 읽기만 가능하다!
DOM을 객체라고 이해하니까 애매하고 알고 있던 부분들이 훨씬 명확해진 것 같다.
역시 잘 정리된 문서를 읽고 콘솔에 찍어보면서 하는 공부가 최고다! 🫶
Rerefence
속성과 프로퍼티
