DOM（Document Object Model）について
DOMは、HTMLの情報をプログラムが扱いやすい形式でメモリ上に保存するための仕組みである。
HTMLが解析されると、DOMへと変換される。JavaScriptでHTMLを操作する際は、このDOMを介して行われる。
DOMへの変換やレンダリングの仕組みは以下の記事がわかりやすい。
DOMの構造
DOMの構造は、文書をツリー形式で表現する。このツリーは、文書の階層構造を模倣し、各ノードが文書内の特定の部分（例えば、要素、属性、テキストなど）に対応する。このツリー状の構造により、プログラマは文書の特定の部分を簡単に識別し、操作できるようになる。
ノードの種類
ノードには以下の5つの種類が存在する。
- テキストノード: 文書内のテキストを表す。
- コメントノード: HTMLのコメントを表す。
- ドキュメントタイプノード: 文書のDOCTYPEを表す。
- 要素ノード: HTMLの要素（タグ）を表す。
- ドキュメントノード: 全体の文書を表す。
これらのノードは、文書内の情報をkeyとvalueのペアとして保持し、DOMツリー内でツリー状に組織される。
JavaScriptによるDOMの操作
Webページの動的な変更、ユーザーインタラクションの応答、そしてリアルタイムでのコンテンツの更新が可能となる。
要素の取得
サンプルコード
document.querySelectorやdocument.getElementByIdなどのメソッドを利用して、DOMツリー内の特定の要素を取得する。// HTML要素の取得
let result = document.documentElement
// head要素の取得
result = document.head
//bodyの取得
result = document.body
//子ノードをすべて取得
result = document.body.childNodes
//子ノードを持っているかどうか
document.body.childNodes.hasChildNodes()
//一番最初の子ノードをしとく
document.body.childNodes.firstChild
//cssで指定されているクラス、idを取得、タグも可能
result = document.querySelector(ccsセレクター)
document.querySelector(".select")
document.querySelector("p")
//全部のpタグを取得する
document.querySelectorAll("p")
//idによって、要素を取得する。(documentインターフェースのみ存在)
document.getElementById('title')
//name属性によって、要素を取得する
document.getElementsByName('hello')
//要素のタグから、取得
document.getElementsByTagName('p')
//クラスの名前から、要素を取得
document.getElementsByClassName('class')
//href属性がある要素を取得
document.links
要素の作成と挿入
サンプルコード
//body要素のhtmlを取得
document.body.innerHTML
//body要素のhtmlを右側のものに全て置き換える
document.body.innerHTML = '<h1>hello</h1><div>hello</div>'
//取得した要素の後ろに追加する。（一度要素のものを削除してから、もう一度書き換えている）
document.querySelector("div").innerHTML += '<p>hello</p>'
//取得した要素の、前、後ろに新しい要素を加える（insertAdjacentHTMLの第一引数に、afterbegin,beforebegin等を指定）
document.querySelector("div").insertAdjacentHTML("afterbegin", '<h1>あいうえお</h1>')
//要素を作成する
let p = document.createElement('p')
p.innerHTML = "HEllo"
//テキストノードを作成する
document.createTextNode('textだお')
document.body.innerHTML = "<div>hello</div>"
//取得した要素の閉じタグの前に挿入する.(beforeendと同じ)
let result = document.querySelector("div").append(p)
//取得した要素のタグのうしろに挿入する.(afterbeginと同じ)
document.querySelector("div").prepend(p)
//取得した要素のタグの前に挿入する.(beforebeginと同じ)
document.querySelector("div").before(p)
//取得した要素のとじタグの後ろに挿入する.(afterendと同じ)
document.querySelector("div").before(p)
document.querySelector("div").append("text me")
innerHTMLやinsertAdjacentHTMLを使う際のセキュリティ上の注意
innerHTMLやinsertAdjacentHTMLを使用する際は、XSS（クロスサイトスクリプティング）攻撃に注意する必要がある。XSSとは悪意のあるスクリプトがWebページに注入されることにより発生する。innerHTMLやinsertAdjacentHTMLのようなメソッドを使用する際には、挿入されるコンテンツが安全であることを確認する必要がある。これを避ける一つの方法は、textContentプロパティを使用して、HTMLタグではなくテキストのみを挿入することである。
要素の削除、置換
remove: 要素自身とその子要素を削除する。
replaceWith: 要素を別のノードに置き換える。
これらのメソッドを利用することで、動的なWebページの作成や管理が可能になる。