<ul>
<li><a href="#dom-node-element%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E3%81%9D%E3%82%8C%E3%81%9E%E3%82%8C%E3%81%AE%E9%81%95%E3%81%84%E3%82%92%E8%AA%AC%E6%98%8E%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%81%8B">DOM, Node, Elementについてそれぞれの違いを説明できますか？</a></li>
<li><a href="#dom">DOM</a></li>
<li><a href="#node">Node</a></li>
<li><a href="#element">Element</a></li>
<li><a href="#%E5%AE%9F%E8%B7%B5node%E3%82%92element%E3%81%AB%E5%A4%89%E6%8F%9B%E3%81%99%E3%82%8B">実践！NodeをElementに変換する</a></li>
<li><a href="#%E3%81%BE%E3%81%A8%E3%82%81">まとめ</a></li>
<li><a href="#%E3%83%AA%E3%83%B3%E3%82%AF">リンク</a></li>
</ul>
<h2 id="dom%2C-node%2C-element%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E3%81%9D%E3%82%8C%E3%81%9E%E3%82%8C%E3%81%AE%E9%81%95%E3%81%84%E3%82%92%E8%AA%AC%E6%98%8E%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%81%8B%EF%BC%9F">
<a class="header-anchor-link" href="#dom%2C-node%2C-element%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E3%81%9D%E3%82%8C%E3%81%9E%E3%82%8C%E3%81%AE%E9%81%95%E3%81%84%E3%82%92%E8%AA%AC%E6%98%8E%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%81%8B%EF%BC%9F" aria-hidden="true"></a> DOM, Node, Elementについてそれぞれの違いを説明できますか？</h2>
Web開発において、これらをすべて「要素」として呼んで曖昧にしていると型定義などで詰まることがあります。 
この３つの名称、実は明確な違いがあると知っていましたか？ 
これを期にマスターしましょう。
<h2 id="dom">
<a class="header-anchor-link" href="#dom" aria-hidden="true"></a> DOM</h2>
DOMは、「Document Object Model、つまりドキュメントを物として扱うモデル」のことを言います。 
DOMツリーという階層構造を持ち、JavaScriptはDOMツリーを操作することでHTMLを操作することができます。
<div class="code-block-container"><pre class="language-html"><code class="language-html">&lt;body&gt;
├──&lt;section&gt;
│ ├──&lt;p&gt;
│ ├──&lt;p&gt;
│ └──&lt;p&gt;
├──&lt;section&gt;
│ └─&lt;p&gt;
...
</code></pre></div><h2 id="node">
<a class="header-anchor-link" href="#node" aria-hidden="true"></a> Node</h2>
Nodeは、「DOMツリーを構成する一つ一つの要素」のことを言います。 
木構造の葉に当たる部分ですので、親ノードや子ノードなどを持ちます。
<div class="code-block-container"><pre class="language-html"><code class="language-html">&lt;親ノード&gt;
├──&lt;ノード&gt;
│ ├──&lt;子ノード&gt;
│ ├──&lt;子ノード&gt;
│ └──&lt;子ノード&gt;
...
</code></pre></div><h2 id="element">
<a class="header-anchor-link" href="#element" aria-hidden="true"></a> Element</h2>
Elementは、「Nodeの種類の一種」のことを言います。 
Document、Element、DocumentFragmentといったものがNodeの種類として該当し、それぞれ異なるメゾッドが定義されています。 
Elementは、すべての要素オブジェクトの元となる最も一般的な基本クラスで、HTMLInputElementを始めとしたさまざまな種類に細分化されます。
<h2 id="%E5%AE%9F%E8%B7%B5%EF%BC%81node%E3%82%92element%E3%81%AB%E5%A4%89%E6%8F%9B%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#%E5%AE%9F%E8%B7%B5%EF%BC%81node%E3%82%92element%E3%81%AB%E5%A4%89%E6%8F%9B%E3%81%99%E3%82%8B" aria-hidden="true"></a> 実践！NodeをElementに変換する</h2>
上記よりわかることですが、ElementはNodeの一種です。 
Nodeには、<code>querySelectorAll</code>といったメゾッドは提供されていないので、NodeをElementにして<code>querySelectorAll</code>を呼ぶといった処理を実装してみます。
<div class="code-block-container"><pre class="language-typescript"><code class="language-typescript">export const getParagraphList = (node: Node): string[] =&gt; {
 if (node instanceof Element) {
 // node: Element
 return Array.from(node.querySelectorAll("p")).map(p =&gt; p.textContent);
 else {
 // node: Node(not Element)
 throw new Error('Node is not Element');
 }
}
</code></pre></div><h2 id="%E3%81%BE%E3%81%A8%E3%82%81">
<a class="header-anchor-link" href="#%E3%81%BE%E3%81%A8%E3%82%81" aria-hidden="true"></a> まとめ</h2>
DOM, Node, Elementの３つの名称を理解することで、さらに理解が深まったのではないでしょうか？ 
今後も型に関する様々な記事を投稿していくのでよろしくおねがいします！
<h2 id="%E3%83%AA%E3%83%B3%E3%82%AF">
<a class="header-anchor-link" href="#%E3%83%AA%E3%83%B3%E3%82%AF" aria-hidden="true"></a> リンク</h2>
<iframe id="zenn-embedded__9ed4b17e7ee67" src="https://embed.zenn.studio/card#zenn-embedded__9ed4b17e7ee67" data-content="https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FAPI%2FDocument_Object_Model" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model</a> 
<iframe id="zenn-embedded__053ce31a0fc78" src="https://embed.zenn.studio/card#zenn-embedded__053ce31a0fc78" data-content="https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FAPI%2FNode" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://developer.mozilla.org/en-US/docs/Web/API/Node" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/Node</a> 
<iframe id="zenn-embedded__3a4037435051a" src="https://embed.zenn.studio/card#zenn-embedded__3a4037435051a" data-content="https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FAPI%2FElement" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/Element</a>

DOM, Node, Elementの違い

DOM, Node, Elementについてそれぞれの違いを説明できますか？

Discussion