자바스크립트 OOP의 내장 클래스 계층 구조

내장 클래스들도 계층 구조를 가지고 있습니다. 단락을 예로 들어 살펴보겠습니다:

<p>text</p>

변수에 단락에 대한 참조를 얻습니다:

let elem = document.querySelector('p');

콘솔에서 우리의 단락을 살펴보겠습니다:

console.dir(elem);

이미 알고 계시듯이, [[Prototype]] 속성에는 단락의 클래스 이름이 포함되어 있습니다. 이것은 HTMLParagraphElement입니다. 이 클래스의 속성과 메서드 목록을 펼치면, 아래에 다시 [[Prototype]] 속성이 발견될 것이며, 여기에는 이미 부모 클래스가 포함되어 있을 것이고 그것은 HTMLElement가 될 것입니다. 그것에 대해서도 부모를 찾을 수 있고 이러한 방식으로 계속됩니다.

다음 태그에 대한 클래스 계층 구조를 연구하세요:

<div>text</div>

let elem = document.querySelector('div');
console.dir(elem);

다음 태그에 대한 클래스 계층 구조를 연구하세요:

<input>

let elem = document.querySelector('input');
console.dir(elem);

다음 컬렉션에 대한 클래스 계층 구조를 연구하세요:

<div>text</div>
<div>text</div>
<div>text</div>

let elems = document.querySelectorAll('div');
console.dir(elems);

다음 컬렉션에 대한 클래스 계층 구조를 연구하세요:

<div>
	<p>text</p>
	<p>text</p>
	<p>text</p>
</div>

let elem = document.querySelector('div');
let elems = elem.children;

console.dir(elems);