【(JavaScript)】DOMについて

はじめに

DOM及びその操作の概要をまとめました。
JavaScriptの一部ではなかったことを学びました。
「ノード」や「要素」といった言葉の違いについても新しい発見がありました。

DOM(ドキュメントオブジェクトモデル)

• DOMは、文書をオブジェクト指向で表現したものであり、その構造はツリーである。この構造の各構成要素をノードと呼ぶ
• DOMのコア部分は、文書をオブジェクトで記述する機能の基礎的なものを提供する。Web APIにもあり、HTMLに向けた拡張がHTML DOM APIである
• DOMで文書を表現することで、その構成要素をプログラミング言語で操作することができる
• 多くはJavaScriptで行われるが、特定のプログラミング言語からは独立している。例えば、Pythonで操作することもできる
• データ型
  • Node
    • 文書内のすべての構成要素は、何らかの種類のノードである
    • HTMLでは、エレメントノード、テキストノード、属性ノード等がある
    • 他のDOM APIオブジェクトのベースとなる抽象的な基底クラスである。よって、Nodeオブジェクトというものは存在しない
  • Document
    • ルートのdocumentノード自身を指す
  • Element
    • すべてのエレメントノードが継承する、最も一般的な基底クラスである
    • Nodeインターフェイスを継承している
    • 具体的には、HTMLならば、HTMLElementインターフェイスがHTML要素の基本インターフェイスである
    • ゆえに、HTMLの要素は、ElementインターフェイスとHTMLElemtnインターフェイスの両方が用いられ、操作される
    • HTMLでいうところのタグのことである
  • NodeList
    • 要素の配列
  • Attr
    • 属性のためのインターフェイスを実装したもの

よく使われるAPI

要素の選択

• document.querySelector()メソッド
  • 指定されたセレクターまたはセレクター群に一致する、文書内の最初のElementを返す
• document.querySelectorAll()メソッド
  • 指定された CSS セレクターに一致する文書中の要素のリストを示す静的なNodeListを返す

要素の操作

• Element.innerHTMLプロパティ
  • 要素内の HTML または XML のマークアップを取得・設定する
  • 要素の内容を置き換えるというより、文書に HTML を挿入するという場合には、insertAdjacentHTML()メソッドを使用すること
• Element.insertAdjacentHTML()メソッド
  • 指定されたテキストをHTMLまたはXMLとして解釈し、結果のノードを DOM ツリーの指定された位置に挿入する
  • プレーンテキストを挿入する場合は、insertAdjacentHTML() を使用しないこと。代わりに Node.textContentプロパティかElement.insertAdjacentText()メソッドを使用すること。これは、渡されたコンテンツを HTML として解釈せず、生のテキストとして挿入する
• Node.textContentプロパティ
  • 特定のノードおよびその子孫のテキストの内容を表す
• Element.setAttribute()メソッド
  • 特定の要素の指定された属性の値を設定する
• Element.getAttribute()メソッド
  • 特定の要素の指定された属性の値を返す
• Element.removeAttribute()メソッド
  • 指定された名前の属性を特定の要素から削除する
• Element.classListプロパティ
  • その要素の class 属性をコレクションで返す
  • add()、 remove()、 replace()、 toggle() の各メソッドを用いてオブジェクトを変更することができる
  • 指定されたクラスを含むかどうかは、contains() メソッドで検査できる

要素の作成・削除

• document.createElement()メソッド
  • タグの名前で指定されたHTML要素を生成する
• Node.appendChild()メソッド
  • 指定された親ノードの子ノードリストの末尾にノードを追加する
• Node.insertBefore()メソッド
  • あるノードの子ノードの中から指定したものの前に、ノードを同じく子として追加する
• Element.remove()メソッド
  • 特定のノードをDOMから削除する

イベント処理

• ElementTarget.addEventListener()メソッド
  • あるターゲットに特定のイベントが配信されるたびに呼び出される関数を設定する
• ElementTarget.removeEventListener()メソッド
  • EventTarget.addEventListener()で登録されたイベントリスナーを取り外す

DOMツリーの移動

• Element.parentNodeプロパティ
  • 特定のノードの親ノードを返す
• Element.childNodesプロパティ
  • 特定のノードの子ノードをすべて返す
• Element.chilrenプロパティ
  • 特定のノードの子ノードのうち要素であるもの（タグ）をすべて返す。Element.childrenは要素のノードしか含まない。すべての子ノード、例えばテキストやコメントノードなどを取得するには、Node.childNodesを使用する
• Element.firstChildプロパティ
  • 特定のノードの最初の子ノードを返す
• Element.lastChildプロパティ
  • 特定のノードの最後の子ノードを返す
• Element.nextSiblingプロパティ
  • 特定のノードの親ノードが持つ子ノードのうち、当該特定のノードのすぐ次のノードを返す
• Element.previousSiblingプロパティ
  • 特定のノードの親ノードが持つ子ノードのうち、当該特定のノードのすぐ前のノードを返す

参考文献

• MDN DOMの紹介
• MDN Web API Node
• MDN Web API Element
• その他MDNの各APIの説明