JavaScriptの組み込みDOMクラス

DOM要素もまた組み込みクラスのオブジェクトとして表現されます。例を見てみましょう。段落があるとします：

<p>テキスト</p>

変数にその参照を取得します：

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

この段落をコンソールに出力します：

console.log(elem);

次に、この段落のプロパティとメソッドのリストを見てみましょう：

console.dir(elem);

この段落がどのクラスに属しているかを特定できます。そのためには、プロパティリストから特別なプロパティ[[Prototype]]を探します。これを見ると、段落がクラスHTMLParagraphElementに属していることがわかります。確認してみましょう：

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

次のコードの実行結果を調べてください：

<div>テキスト</div>

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

このタグがどのクラスに属しているかを特定してください。

次のコードの実行結果を調べてください：

<input>

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

このタグがどのクラスに属しているかを特定してください。

次のコードの実行結果を調べてください：

<div>テキスト</div>
<div>テキスト</div>
<div>テキスト</div>

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

結果がどのクラスに属しているかを特定してください。

次のコードの実行結果を調べてください：

<div>
	<p>テキスト</p>
	<p>テキスト</p>
	<p>テキスト</p>
</div>

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

console.dir(elems);

結果がどのクラスに属しているかを特定してください。