DOMのお話
What is DOM？
そろそろJavaScriptを本格的に学ぼうと思い、Reactについて学習していたらDOM
というワードがなんども出てきて、見過ごすとこができないと感じたので、DOMについての記事を読んでわかったことをまとめていきたいと思います。
DOMとは
「Document Object Model」の略で、直訳すると「ドキュメントを物として扱うモデル」です。これはHTMLやXMLを扱うための仕組みのことです。
主に以下の３つの特徴を持っています
①ツリー構造と呼ばれる階層構造をとる
②それぞれノードという言葉で説明される
③WebページとJavaScriptなどのプログラミング言語とをつなぐ←Reactを利用する時に必ず必要な知識
①階層構造をとる
HTMLは<body>の下に<section>の下に<p>などといった階層構造を構築することができる。この階層構造を定義しているものこそがDOMと呼ばれる仕組みになる。
②ノードという単語を用いて表現される
https://eng-entrance.com/wp-content/uploads/2016/07/図3-768x864.png
上の図にあるように、ノードとは各要素(HTMLではエレメントやタグ)自体のことを表す。特定のノードを基準とした時に、その上にあるノードを「親:parent」ノードと表現し、その下にあるノードを「子:child,children」ノードと表現する。
また同一階層にあるノードのことを「兄弟姉妹:sibling」ノードと表現する。
例えば、「そのタグの子ノード全体を所得して、その親ノードから削除する」のような使い方をする。
③Webページとプログラミング言語をつなぐ役割を持つ
(1)ID名からノードを所得して、操作する
ID名とはタグにつける一位の名前のことである。CSSを勉強した時や、JavaScriptの基本を学習した時に出てくる。
ID名を指定するメソッドは以下のように定義される
document.getElementById(id);
例としては document.getElementId('section-2').style.color = 'red'
とすると、section2のidの配下のの文字色は赤色になる。
(2)子ノードを所得して、操作する
子ノードを指定するメソッドは以下のように定義される
var nodeList = elementNodeReference.childNodes;
-elementNodeReferenceは基準ノードを指している
-nodeListは基準ノードについている子ノードを全てさす
例としては「section-2」の子ノードのうち2番目の子ノードの文字列を変更してみると、
var baseElement = document.getElementByID('section-2');
var section2node2 = baseElement.childNodes[5];
section2node2.innerHTML = '子ノード2は変更されたよ';
こうすると、セクション2の子ノード2の文字列が変更されているのが確認できる。
⚠︎baseElement.childNodes[5];は2番目のノードを所得したいはずなのになぜ[5]なのか？
ChromeブラウザのchildNodesの実装が、ノードとノードの間に「空白のノード」を差し込むものになっているため、不思議な配列の添字担っているように見える。
例えば、Chromeブラウザで1番目のノードを所得したい場合は添字が「3」になる。
(3)親ノードを所得して、操作する
親ノードを指定するメソッドは以下のように定義される。
var parentNode = elementNodeReference.par4entNode
-elementNodeReference 基準ノード
-parentNode 基準ノードの親ノード
例としては、「section-2」の親ノードを所得して、その親ノードの子ノード(つまりsection-2)全てを削除してみる。
var baseElement = document.getElementById('section-2');
var parentNode = baseElement.parentNode;
parentNode.removeChiuld(baseElement);
以上のように記述するとセクション2が全て消える。
以上のようにDOMで定義されている「ノード」などの仕様などを通じてJavaScriptからHTMLを操作することができることを確認できた。
これが「DOM」が「WebページであるところのHTML」と「プログラミング言語であるところのJavaScript」をつなぐ役目を持つということ。
以下のサイトをめちゃめちゃ参考にしました。
