😢
DOM, Node, Elementの違い
DOM, Node, Elementについてそれぞれの違いを説明できますか？
Web開発において、これらをすべて「要素」として呼んで曖昧にしていると型定義などで詰まることがあります。
この３つの名称、実は明確な違いがあると知っていましたか？
これを期にマスターしましょう。
DOM
DOMは、「Document Object Model、つまりドキュメントを物として扱うモデル」のことを言います。
DOMツリーという階層構造を持ち、JavaScriptはDOMツリーを操作することでHTMLを操作することができます。
<body>
├──<section>
│ ├──<p>
│ ├──<p>
│ └──<p>
├──<section>
│ └─<p>
...
Node
Nodeは、「DOMツリーを構成する一つ一つの要素」のことを言います。
木構造の葉に当たる部分ですので、親ノードや子ノードなどを持ちます。
<親ノード>
├──<ノード>
│ ├──<子ノード>
│ ├──<子ノード>
│ └──<子ノード>
...
Element
Elementは、「Nodeの種類の一種」のことを言います。
Document、Element、DocumentFragmentといったものがNodeの種類として該当し、それぞれ異なるメゾッドが定義されています。
Elementは、すべての要素オブジェクトの元となる最も一般的な基本クラスで、HTMLInputElementを始めとしたさまざまな種類に細分化されます。
実践！NodeをElementに変換する
上記よりわかることですが、ElementはNodeの一種です。
Nodeには、querySelectorAllといったメゾッドは提供されていないので、NodeをElementにしてquerySelectorAllを呼ぶといった処理を実装してみます。
export const getParagraphList = (node: Node): string[] => {
if (node instanceof Element) {
// node: Element
return Array.from(node.querySelectorAll("p")).map(p => p.textContent);
else {
// node: Node(not Element)
throw new Error('Node is not Element');
}
}
まとめ
DOM, Node, Elementの３つの名称を理解することで、さらに理解が深まったのではないでしょうか？
今後も型に関する様々な記事を投稿していくのでよろしくおねがいします！
リンク
Discussion