Node

DOM트리의 노드들은 종류에 따라 각각 다른 프로퍼티를 지원한다.

< a >태그에 대응하는 요소노드엔 링크 관련된 프로퍼티를, < input > 요소노드엔 입력 관련프로퍼티를 제공한다.

DOM노드들은 공통 조상으로부터 만들어지기 때문에 노드종류는 다르더라도 공통된 프로퍼티와 메서드를 가지고 있다.

DOM노드들은 대응하는 내장클래스를 가지고 있다.

EventTarget : 루트에 있는 ‘추상(abstract)’ 클래스이기 때문에 객체로 생성되지 않는다.
EventTarget가 모든 DOM노드들의 베이스기 때문에 모든 노드들은 '이벤트’를 사용할 수 있다.

Node : ‘추상’ 클래스로, 노드의 베이스 역할을 하며 parentNode, nextSibling, childNodes등 주요 트리탐색 기능을 제공한다. 요소노드가 아닌 텍스트노드와 코멘트노드들이 Node를 상속한다.

Element : 요소노드를 위한 베이스 클래스다. nextElementSibling, children, getElementsByTagName, querySelector같은 요소노드 탐색 프로퍼티나 메서드를 지원한다.

브라우저는 HTML뿐만 아니라 XML, SVG도 지원하는데 Element 클래스는 이와 관련된 SVGElement, XMLElement, HTMLElement 클래스의 베이스 역할을 한다.

HTMLElement : HTML 요소노드의 베이스 클래스다.

아래 나열한 클래스들은 실제 HTML 요소에 대응하고 HTMLElement를 상속받는다.
HTMLInputElement – < input > 요소에 대응하는 클래스
HTMLBodyElement – < body > 요소에 대응하는 클래스
HTMLAnchorElement – < a > 요소에 대응하는 클래스
등등

< input >태그에 대응하는 요소노드는 HTMLInputElement클래스로부터 만들어지고 HTMLElement클래스를 상속받고 Element클래스를 상속받고 Node클래스를 상속받고 EventTarget클래스를 상속받고 Object클래스를 상속받는다.

alert( document.body.constructor.name );
alert( document.body ); // [object HTMLBodyElement]
alert( document.body instanceof HTMLBodyElement ); // true
alert( document.body instanceof HTMLElement ); // true

DOM노드들은 프로토타입 상속관계를 갖는 자바스크립트 객체다.

Node에서 사용되는 프로퍼티

nodeType
elem.nodeType == 1 – 요소 노드
elem.nodeType == 3 – 텍스트 노드
elem.nodeType == 9 – 문서 객체

nodeName : 노드의 이름
tagName : 요소노드의 이름

    alert( document.body.firstChild.tagName ); // undefined (요소가 아님)
    alert( document.body.firstChild.nodeName ); // #comment

    // 문서 노드를 대상으로 두 프로퍼티 비교
    alert( document.tagName ); // undefined (요소가 아님)
    alert( document.nodeName ); // #document