What's DOM
DOM(Document Object Model)は、HTML文書などを扱うための手法の1つであり、これを利用することで、HTMLなどの各要素(divタグなど)を簡単に操作することができます。
例えば、文字列”Morning”を文字列"evening"に簡単に置き換えることができます。
こういうこと(超絶ざっくりな図)
DOMツリー ヌー ヤイビーガ？(沖縄方言「DOMツリーは何ですか？」)
WebページはDocumentオブジェクトによって構成されており、ブラウザがHTMLを解析すると、文書の内容を表すツリー構造が構築され、この構造のことをDOMツリー(ドキュメントツリー)と呼びます。
ノード ノーリャー？(宮古島方言「ノードは何ですか？」)
DOMツリーを形成する1つ1つのオブジェクトをノード(Node)と呼びます。
上図のように、ノードとは各要素(Elementやタグと呼ぶ場合もあります)を表します。
特定のノードを起点(今回はsection)とした際に、その上にあるノードを「親ノード」、その下を「子ノード」と呼び、同一階層にあるノードのことを「兄弟ノード」と呼びます。
実際に触ってみる
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOMとノード</title>
<style>
#section1 {
background-color: bisque;
}
#section2 {
background-color: skyblue;
}
</style>
</head>
<body>
<section id="section1">
<h1>セクション その１</h1>
<p>子ノード1</p>
<p>子ノード2</p>
<p>子ノード3</p>
</section>
<section id="section2">
<h2>セクション その２</h2>
<p>子ノード1</p>
<p>子ノード2</p>
<p>子ノード3</p>
</section>
<script>
// ここにJSを書くのです。
</script>
</body>
</html>
ブラウザで表示すると。
ID名からノードを取得＆操作
ID名を指定するメソッドは以下のように定義されています。
こちらを用いて、section2を取得して、その文字色を赤色に変更してみます。
ブラウザで表示すると。
section2及びその配下(子ノード)の文字色が赤色に変わりました！
子ノードを取得＆操作
子ノードを指定するメソッドは以下のように定義されています。
elementNodeReferenceは起点となるノードを示します。
nodeListは起点となるノードに付随する子ノードすべてを指します。
こちらを用いて、section2を取得して、子ノードのうち2番目の子ノードの文字列を変更してみます。
ブラウザで表示すると。
補足：baseElement.childNodes[5];は2番目のノードを取得したいのになぜ「5」???
ChromeブラウザのchildNodesの実装が、ノードとノードの間に「空白のノード」を差し込むものになっているため、意図しない配列の添え字になっているようです。
例えば、Chromeブラウザで1番目のノードを取得したい場合、添え字は「3」になります。
親ノードを取得＆操作
親ノードを指定するメソッドは以下のように定義されています。
こちらを用いて、section2の親ノードを取得して、その親ノードの子ノード(section2)を全て削除してみます。
ブラウザで表示すると。
セクション その２が削除されました！
以上 DOMとノードなに？？でした～。