모던 JavaScript 튜토리얼 파트 2. 브라우저: 문서, 이벤트, 인터페이스를 읽고 정리, 기록
브라우저 환경과 다양한 명세서
ko.javascript.info
DOM 노드 클래스
DOM 노드는 종류에 따라 각각 다른 프로퍼티를 지원한다.
DOM 노드는 종류에 따라 대응하는 내장 클래스가 다르다.
하지만 DOM 노드는 공통 조상으로부터 만들어지기 때문에 노드 종류는 다르지만,
모든 DOM 노드는 공통된 프로퍼티와 메서드를 지원한다.
DOM 노드 계층
각 화살표는 상속을 나타낸다.
EventTarget
루트에 있는 ‘추상(abstract)’ 클래스
- 이 클래스에 대응하는 객체는 실제로 만들어지지 않음
- 모든 DOM 노드에서 ‘이벤트’를 사용할 수 있다.
Node
‘추상(abstract)’ 클래스
- DOM 노드의 베이스 역할
- parentNode, nextSibling, childNodes 등의 주요 트리 탐색 기능을 제공 (getter)
- Node 클래스의 객체는 절대 생성되지 않는다. (상속만 받는다. Text, Element, Comment 등)
Element
공통 DOM 노드 프로퍼티를 제공하는 베이스 클래스
- nextElementSibling, children 이나 getElementsByTagName, querySelector 같이 요소 전용 탐색을 도와주는 프로퍼티나 메서드가 이를 기반으로 한다.
- 브라우저는 HTML 뿐만 아니라 XML, SVG도 지원하는데, Elemet 클래스는 SVGElement, XMLElement, HTMLElement 클래스의 베이스 역할
HTMLElement
메서드와 getter, setter를 제공하는 HTML 요소 노드의 베이스 역할을 하는 클래스
- HTMLInputElement – 입력 관련 프로퍼티 제공, <input> 요소에 대응하는 클래스
- HTMLBodyElement – <body> 요소에 대응하는 클래스
- HTMLAnchorElement – <a> 요소에 대응하는 클래스
- 다른 각 태그에 해당하는 클래스는 고유한 프로퍼티와 메서드를 지원
Object
hasOwnProperty 같이 일반 객체 메서드를 제공하는 클래스
객체가 어떤 DOM 노드 클래스인지?
객체는 constructor 프로퍼티를 가진다.
constructor 프로퍼티는 클래스 생성자를 참조하고 이름은 constructor.name 에 저장되어 있다.
→ DOM 노드 클래스 이름을 확인할 수 있다.
→ toString을 사용할 수도 있다.
document.body.constructor.name // HTMLBodyElement
document.body // [object HTMLBodyElement]
객체가 어떤 DOM 노드 클래스를 상속받고 있는지?
instanceof를 사용해 확인 가능
alert( document.body instanceof HTMLBodyElement ); // true
alert( document.body instanceof HTMLElement ); // true
alert( document.body instanceof Element ); // true
alert( document.body instanceof Node ); // true
alert( document.body instanceof EventTarget ); // true
DOM 노드는 프로토타입을 기반으로 상속 관계를 갖는 일반 자바스크립트 객체이다.
console.dir(elem)과 console.log(elem)의 차이
인수가 자바스크립트 객체라면 두 명령어는 대개 같은 결과
하지만 인수가 DOM 요소일 경우
- console.log(elem)는 요소의 DOM 트리를 출력
- console.dir(elem)는 요소를 DOM 객체처럼 취급하여 출력
→ console.dir은 프로퍼티를 확인하기 쉽다.
‘nodeType’ 프로퍼티
DOM 노드의 '타입’을 알아내고자 할 때 쓰이는 구식 프로퍼티
각 노드 타입은 상숫값을 가진다. 명세서 확인
- elem.nodeType == 1 – 요소 노드
- elem.nodeType == 3 – 텍스트 노드
- elem.nodeType == 9 – 문서 객체
nodeName과 tageName으로 태그(요소 노드) 이름 확인
nodeName, tagName 프로퍼티를 사용하면 DOM 노드의 태그 이름을 알아낼 수 있다.
document.body.nodeName; // BODY
document.body.tagName; // BODY
차이점
- tagName 프로퍼티는 요소 노드에만 존재한다. (Element 클래스로부터 유래)
- nodeName 은 모든 Node에 있다.
<body><!-- 주석 -->
<script>
// 주석 노드를 대상으로 두 프로퍼티 비교
alert( document.body.firstChild.tagName ); // undefined (요소가 아님)
alert( document.body.firstChild.nodeName ); // #comment
// 문서 노드를 대상으로 두 프로퍼티 비교
alert( document.tagName ); // undefined (요소가 아님)
alert( document.nodeName ); // #document
</script>
</body>
태그 이름은 XML 모드를 제외하고 항상 대문자이다.
- 브라우저에서 HTML과 XML을 처리하는 모드는 다르다.
- 웹페이지는 대개 HTML 모드
- 헤더가 Content-Type: application/xml+xhtml인 XML 문서를 받으면 XML 모드로 문서 처리
- HTML 모드에선 tagName과 nodeName이 모두 대문자로 변경됨
- <body>, <BoDy> → BODY </aside>
'FE' 카테고리의 다른 글
| 1.6 속성과 프로퍼티 (0) | 2024.11.14 |
|---|---|
| 1.5 주요 노드 프로퍼티 (2) (1) | 2024.11.13 |
| 1.4 getElement*, querySelector*로 요소 검색하기 (0) | 2024.11.11 |
| 1.3 DOM 탐색하기 (0) | 2024.11.10 |
| 1.2 DOM 트리 (1) | 2024.11.09 |
