JavaScript 내장 DOM 클래스

DOM 요소는 또한 내장 클래스의 객체를 나타냅니다. 예제를 통해 확인해 봅시다. 우리에게 다음과 같은 단락이 있다고 가정해 보겠습니다:

<p>text</p>

변수에 대한 참조를 가져옵니다:

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

이 단락을 콘솔에 출력합시다:

console.log(elem);

이제 우리 단락의 속성과 메서드 목록을 살펴봅시다:

console.dir(elem);

우리 단락이 어떤 클래스에 속하는지 정의할 수 있습니다. 이를 위해 속성 목록에서 특별한 속성 [[Prototype]]을 찾아야 합니다. 그 안에서 우리는 단락이 클래스 HTMLParagraphElement에 속한다는 것을 볼 수 있습니다. 확인해 봅시다:

console.log(elem instanceof HTMLParagraphElement); // true

다음 코드 실행 결과를 연구하세요:

<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);

결과가 어떤 클래스에 속하는지 결정하세요.