#author("2021-05-20T16:38:48+09:00;2021-05-20T15:28:01+09:00","default:inoue.ko","inoue.ko")
*DOM｜Documment Object Model
https://www.w3schools.com/js/js_htmldom.asp
~
Document Object Model (DOM) は、ウェブ上の文書のコンテンツと構造からなるオブジェクトのデータ表現で、DOMのプログラミングインターフェイスを利用することで、スクリプト又はプログラミング言語によって、Webページの文書構造、スタイル、内容を動的に変更することができます。
-HTML文書は、タグ・属性・値・テキストなどの部品で構成されています。
-HTML文書がブラウザに読み込まれると、JavaScript の内部で個々の要素部品が DOM オブジェクトとして自動生成されます。
-''オブジェクトはプロパティーとメソッドを持つ''ので、JavaScriptでこれらにアクセスすることで、様々な振る舞いを実現することができます。
ちなみに、Document オブジェクトの上位には、[[ブラウザオブジェクト（BOM）>JavaScript/BOM]]としての Window オブジェクトがあり、同様にJavaScript からアクセスすることができます。
~
***CONTENTS
#contents2_1
~
**DOMの概要
#image(https://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/DOM-model.svg/580px-DOM-model.svg.png,right,30%)
***DOMツリー
HTML文書は、以下のようなツリー状の階層構造で記述できるもので、DOMはこの構造を前提にした各要素へのアクセス方法を提供しています。
-html要素：document.documentElement
--head要素：document.head
---title要素：document.title
--body要素：document.body
---header要素
---nav要素
---main要素
---footer要素
&small(図版：https://commons.wikimedia.org/wiki/File:DOM-model.svg);
ブラウザ開発ツールのコンソールを開いた状態で、以下のスクリプトが実行するとページのHTML要素をすべて確認することができます。
<script> console.dir(document.documentElement); </script>
~
***NodeとElememt
DOMのマニュアルには、Node と Element という言葉が頻出します。状況によっては同じものを意味する場合がありますが、Nodeの方が包括的な概念で、種類も多くあります。以下のように区別してください。
-''Node''
DOMツリーの各構成要素を Node（ノード）といいます。Nodeは、firstChildやparentNodeなどのプロパティ、appendChild、removeChildなどのメソッドを提供します。Node には以下のような種類があります。
-要素ノード（Element Node）：<p class="abc">Hello!</p>
-属性ノード（Attribute Node）：class="abc"
-テキストノード（Text Node）：Hello!
-''Element''
Element とは、上記の Element型のNodeのことで「開始タグから終了タグまで」を指します。Document の中にあるすべての要素が継承する最も一般的な基底クラスで、innerHTMLなどのプロパティや、getElementByIdなどのメソッドを提供します。
~
***インターフェイスの概観
DOMには、様々なインターフェイスが用意されています。以下、よく用いられるものを列挙します。
-document.title：TITLE要素へのインターフェイス
-document.body：BODY要素へのインターフェイス
-document.getElementById( ID名 ) ：該当ID要素１つを取得
-document.getElementsByClassName( Class名 ) ＞ 配列に複数要素を取得
-document.getElementsByTagName( Tag名 ) ＞ 配列に複数要素を取得
-document.querySelector( セレクタ名 ) ：１つの要素のみ取得
-document.querySelectorAll( セレクタ名 ) ： NodeListに複数要素を取得
-document.createElement(要素名)：要素を作成（作成のみ）
-document.createTextNode(ノード名)：ノードを作成
-parentNode.appendChild( 要素 )：親要素に子要素を追加
-parentNode.removeChild( 要素 )：子要素を削除
-element.innerHTML：HTMLコンテンツの定義
-element.style：スタイル定義
-element.setAttribute()：属性をセット
-element.getAttribute()：属性を取得
-element.addEventListener()：イベントリスナーの登録
~
~
**DOMインターフェイス
***document.title
ページタイトルの読み書きに対応するプロパティー
-タイトルの取得
var title = document.title
-タイトルの変更
document.title = 'NewTitle';
~
***document.body
ページボディーの読み書きに対応するプロパティー
-ページのbody要素の取得
var obj = document.body;
-ページの最後に生成した要素を追加
document.body.appendChild( 要素 );
~
***document.getElementById
タグにIDを与えておけば、それを捉えることがでます。例えばHTML側に、
<div id="ABC">・・・ </div>
のような記述がある場合、
var obj = document.getElementById('ABC');
と記述することで、div id="ABC" の適用範囲（の識別情報）を obj という変数の中にとらえることができます。
例えば、以下のようなHTMLとJavaScriptがあった場合、button のクリックによって DisplayMessage() 関数を呼び出せば、HTMLに書かれた [メッセージエリア] の部分が「Hello World !」という文字列をに変わります。
''HTML''
<button onClick="DisplayMessage();">Click Me!</button>
：
<div id="messageArea"> [メッセージエリア] </div>
''JavaScript''
function DisplayMessage(){
var obj = document.getElementById('messageArea');
obj.innerHTML = 'Hello World !';
}
ちなみに「関数の呼び出し」は、マウスのクリック以外にも、センサーからの情報、時刻の到来など、様々なイベントを契機とすることができます。
~
***document.getElementsByClassName
クラスはページ内に複数存在する前提なので、配列変数に取得します。
var obj = document.getElementsByClassName('ABC'); とした場合、
ABCクラスが定義された最初の要素が obj[0]、２つめの要素が obj[1]、以下同様になります。
obj[1].style.backgroundColor = 'red'; のような書き方で制御します。
~
***document.getElementsByTagName
これも同一の要素が複数存在する前提になるので、配列変数に取得します。
var obj = document.getElementsByTagName('a'); とした場合、
最初のaタグ要素が obj[0]、２つめのaタグ要素が obj[1] です。
obj[1].style.backgroundColor = 'red'; のような書き方で制御します。
''綴りに注意''
Idはページ内の唯一の存在なので ''getElement''ById。ClassNameとTagNameは複数のオブジェクトを扱うので ''getElements''ByClassNameなどと複数形の表記になっています。気づきにくいので注意が必要です。
~
***querySelector( )
CSSセレクタでマッチした要素をひとつ取得します。複数ある場合は、最初の１つが選ばれます。引数はセレクタ名なので、'#ABC' や '.abc' と記述します。getElementById('ABC') とは引数の書き方が異なるので注意が必要です。
-document.querySelector( )
/* 最初の .sampleを取得 */
var obj = document.querySelector('.sample');
/* 最初の ul .sample を取得 */
var foo02 = document.querySelector('ul .sample');
-''element.querySelector( )''
/* ABCの子要素：最初の .sampleを取得 */
val obj = document.getElementById('ABC'),
val sample = obj.querySelector('.sample');
~
***querySelectorAll( )
CSSセレクタでマッチした要素をすべて取得して NodeList として返します。
-document.querySelectorAll( )
/* すべての .sample を取得 */
var obj = document.querySelectorAll('.sample');
/* すべての ul .sample を取得 */
var obj = document.querySelectorAll('ul .sample');
-element.querySelectorAll( )
/* ABCの子要素：すべての .sampleを取得 */
var obj = document.getElementById('ABC');
var sample = obj.querySelectorAll('.sample');
~
***その他参考
-element.children( )
/* ABCの子要素：そのすべてを抽出します。*/
var obj = document.getElementById('ABC').children( );
-element.children( '指定したいタグ名' )
/* ABCの子要素：すべての pタグ要素を抽出します。*/
var obj = document.getElementById('ABC').children('p');
~
-document.getElementById( ).getElementsByTagName( );
/* ABCの子要素：すべての pタグ要素を抽出します。*/
var obj = document.getElementById('ABC').getElementsByTagName('p');
~
~
**要素の追加・削除
***要素の追加
var elem = document.createElement( 'p' );
var txt = document.createTextNode( 'Hello World!' );
document.body.appendChild( elem ).appendChild( txt );
body直下に p要素（段落）が追加され、さらにそこに Hello World! の文字が挿入されます。appendChildは子要素の追加を意味します。
~
***要素の変更
var newNode = document.createElement( タグ名 );
var oldNode = document.getElementById( ID名 );
var parentNode = oldNode.parentNode;
parentNode.replaceChild(newNode,oldNode);
~
***要素の削除
var elem = document.getElementById( ID名 );
elem.parentNode.removeChild( elem );
~
~
参考：https://www.w3schools.com/jsref/dom_obj_document.asp
~
~
