|
== 概要 ==
HTMLの<code>SCRIPT</code>要素を用いると、JavaScriptのプログラムをHTMLドキュメントの中に埋め込むことができます。
<syntaxhighlight lang="html5">
</head>
<body>
<div id="output">JaveScriptが無効です。</div>
<scrip>
const output = document.querySelector("#output");
</syntaxhighlight>
このHTMLドキュメントをJavaScriptに対応したウェブブラウザで表示すると、ウェブページ上に "Hello, world!" という文字列が表示されます。<code>script</code>
SCRIPT要素の中に書かれているJavaScriptプログラムのソースコードに注目してください。
<code>document. getElementByIdquerySelector</code>メソッドはDOMの一部で<ref>https://dom.spec.whatwg.org/#dom- nonelementparentnodeparentnode- getelementbyidqueryselector</ref>、this（この場合は document）の子孫の中で IDが与えられたIdCSSセレクタ <code>"#output"</code> と一致する最初の要素をツリー順に返し、 位置一致する要素がない場合は <code>null </code> を返します。 ここでは "output" というIDを持つ要素、すなわち< code><nowikisource lang="html5" inline><div id="output"></div></ nowiki></codesource>という <code>div</code>DIV要素を参照し、要素に対応するElementオブジェクトを<code>output</code>という <code>const</code>な変数に代入しています。
<code>output.innerHTML</code>プロパティを使用すると<code>div</code>DIV要素の中身を取得したり設定したりすることができます。
ここでは<code>output.innerHTML</code>に <code>"Hello, world!"</code> という文字列を代入しているので、<code>div</code>DIV要素の中身は "Hello, world!" という文字列になります。
== 動的なWebウェブページの操作 ==
JavaScriptを学びたいと言うぶ人間の多くは、おそらくよりダイナミックなWebウェブページを製作しりたいと人が多いう方だと思われるいます。
そこで、この項ではWeb、ウエブページの操作を行うためのパワフルな方法であるDOM＝DOMプログラミングを解説しまする。
=== Document Object Model の解説 ===
Document Object Model (以下、DOM)とは、HTML文書やXML文書をオブジェクトの木構造モデルで表現することで、文章をスクリプトやプログラムから操作することを実現するインターフェースである。
黎明期はJavaで実装・規格化されたため、XMLを扱うならJava一択という認識があった時期もあったが、現在ではほとんどの言語でDOMのプログラムインターフェースが整備されておりどの言語を選んだとしてもHTML文書やXML文書を扱えるようになっている（代表的な言語でDOMが標準でバンドルされていないものはRubyくらいであるが、こちらはREXMLという、よりリッチなライブラリを積んでいる）。
DOMは、基本的にはオブジェクト指向的な扱いを考えながらも、Java以外にも多くの言語で動作することを期待して規格化されており、文法的には堅くやや面倒くさい記述法をしているが、Webブラウザ側でHTML文書やXML文書を扱うための、ほぼ唯一の方法なので慣れる様努力して欲しい<ref>過去には、SAXをJavaScriptで実装しようとしたり、ECMAScript for XML（E4X）のように言語仕様にXML操作を組み込む試みも有りました。</ref>。
=== サンプル ===
HTML文書やXML文書は、文書を要素で囲い込んでいるの中に0個以上の要素があり、タグは必ず入れ子その要素の中になも0個以上の要素があるよ。というに書か入れない子構造をといけないため必然的に囲っているタグと囲われているタグとの間に親子関係があるます。
この様な包含関係があるので、要素を含む要素を親要素、親要素に含まれている要素を子要素と呼びます。
そして、複数の要素を子として取ることが出来れるため、要素はツリー状に整理構成されますることが出来る。
DOMとはXML文書がツリー構造になる事を強く意識して作成されているライブラリ群である。
DOMとは、HTML文書やXML文書がツリー構造に基づいてデザインされた組み込み標準オブジェクトです。
まずは、次のサンプルを打ち込んでほしください。
<syntaxhighlight lang="html5">
<!DOCTYPE html>
</html>
</syntaxhighlight>
この文書では、HTML文書中のbodyタグ内部BODY要素に、divタグDIV要素が埋め込含まれており、さらにその中にpタグ。P要素、その中にテキストが埋め込まれているます。
ここから「DOM TEST」の文字列を読み出したい場合には、サンプルコードの様にな記述をしますればよい。
何故この様にするのかを逐次では、解説していくきます。
documentはDocumentインターフェイスのオブジェクトで特別に宣言を行わなくても存在し、これにはウェブページでの要素を頂点とする木構造として文書本体が格納されています<ref>HTML4では頂点にフレームセットが来る可能性もありましたが、HTML5で廃止されました。</ref>。
まず最初のdocumentを解説する。
document.querySelector("p")は、DOMツリーの頂点からセレクタ "p" （パラグラフ（P要素）を探し最初に見つかった要素を返 します。 ▼documentはDocumentインターフェイスのオブジェクトで、特別に宣言を行わなくても存在し、
これにはwebページでのhtml要素をrootとする木構造として文書本体が格納されている。
▲document.querySelector("p")は、DOMツリーの頂点からセレクタ "p"（パラグラフ要素）を探し最初に見つかった要素を返す。
探したP要素の.firstChildプロパティで「内容」を得て、nodeValueプロパティで値（テキスト文字列）「DOM TEST」を得ている。
それぞれのメソッドとプロパティの解説を行うと、、
; Document.querySelector(CSSセレクタ)
: 子要素から、CSSセレクタと一致する要素を探してElementとして返す
: 要素内のデータを取り出す
この様に、CSSセレクタとElementオブジェクトのプロパティを組み合わせ情報を読み出したり変更したりしまする。
そのため、DOMプログラムでは目的の１つあるいは複数の要素をCSSセレクタでどの様に表すかが重要になり、これは丁度CSSでスタイルシートを記述する時にCSSでプロパティを適用する要素を適切なCSSセレクタで記述する行為とに対応している（CSSで書いたセレクタはそのまま/ querySelector(All)?/ や querySelectorAll で使えるので、スタイルシートでセレクタの意味に一致する要素を背景色を変えてみるなどしてセレクタの方法で働きを確認できる）。
=== 基本的単語の解説 ===
DOMはその名の中にある「ドキュメント」「オブジェクト」「モデル」の名の通り、XMLマークアップされた文書の各部分をオブジェクト（モノ）として分割して、それぞれを参照して扱える様にする方法であるす。XML
マークアップされた文書内部には、タグで区切られた数々のデータがあり、それぞれを種類分けしてプログラムで扱っている。その中でも特によく使うDOMのデータ型は次の3種類である。
; Node（ノード）
; Element（要素）
: すべての要素オブジェクトが継承する基底オブジェクト
: headHEAD要素へのインターフェース HTMLHeadElement, bodyBODY要素へのインターフェース HTMLBodyElement など要素オブジェクトはElement要素のプロパティを持つ継承します。
; Attr（属性）
: DOM 要素の属性へのインターフェース
JavaScriptによるWebプログラミングでは、目的と成る成分を指定し、値を取り出したり変更して希望する処理を実現することとなり。
=== DOM-HTML拡張 ===
DOMは、XMLを広くカバーする仕様となっているが、特にHTMLに関しての特別の拡張が行われており、簡潔な書式でHTMLの機能を呼び出せるようになっている。この拡張の中でよく使うのが次の2つである。
=== document.querySelector ===
document.querySelectorはDOMプログラミングを実際に行う際に最もよく使う機能で、指定したCSSセレクタのHTML要素を参照することが出来るできます。
具体的には、
elem.firstChild.nodeValue = "てすと";
</syntaxhighlight>
とする事で、sampleというidをもHTML要素の内部のテキスト表示を置き換えるます。
=== document.querySelectorAll ===
document.querySelectorはDOMプログラミングを実際に行う際に最もよく使う機能で、指定したCSSセレクタに合と一致するHTML要素をすべて返します。
'''コード例'''
{{コラム|DOMとCSSセレクタ|2=
HTML+CSS+JavaScriptの技術基盤に基づくウェブコンテンツ制作においてHTML要素を指定する方法がCSS＝[[CSS/記述#セレクタ|CSSセレクタ]]とDOM=getElementsBy*系メソッドと2つの異なる記法になってしましました。
このことは実装を複雑にし、誤解からバグの入り込む余地がでてきありました。
この様な状況で、要素をCSSセレクタで指定出来るできますjQueryなどのフレームワークがもてはやされました。
実際のコードを見てみましょう
<source lang="js">
getElementsByTagName("h1");
getElementsByClassName("className");
document.getElementById("sample");
getElementsByName("theName");
</source>
は、jQueryでは、
<source lang="js">
$("h1");
$(".className");
$("#sample");
$([name="thsName"]);
</source>
とCSSセレクタの書式で要素（へのラッパー）を得る等価な処理ができます。<br>
ただこの方法では、ラッパーが間に入る続けるので冗長です<ref>このおかげでメソッドチェーンが使えるのですが。</ref>。
この状況を憂慮して、DOMにもCSSセレクタでを引数に要素を返すメソッドDocument.querySelector()とDocument.querySelectorAll()が追加されました<ref>[https://dom.spec.whatwg.org/#dom-parentnode-queryselector DOM Living Standard::4.2.6. Mixin ParentNode -- The querySelector(selectors) method steps are to return the first result of running scope-match a selectors string selectors against this, if the result is not an empty list; otherwise null.] </ref>。
<source lang="js">
document.querySelector("h1");
document.querySelectorAll(".className");
document.querySelector("#sample");
document.querySelector([name="thsName"]);
</source>
先頭一致ならDocument.querySelectorはメソッドを、一致する全てを得るならDocument.getElementByIdと同じくElementオブジェクトquerySelectorAllメソッドを返し使います。
従来のDOMはツリー構造から特定の要素（または要素コレクション）を要素・クラス・ID・name属性を区別して適切なメソッドを選ぶ必要があり煩雑で、しばしばバグの原因となりましたが、
同様に、<code>document.body</code>プロパティは、<code>document.querySelector("body")</code>と同値です。
Document.querySelectorメソッド及びDocument.querySelectorAllメソッドの登場で、
いままで、DOMを理解することはTree構造から特定の要素（または要素コレクション）を「濾し取る」事が主でしたが、Document.querySelectorメソッド及びDocument.querySelectorAllメソッドの登場で、CSSと同じセレクタで記述することができるようになり「スタイルシートとスクリプトで同じ要素を指定する手段が異なる」という捻じれ構造をも是正することができました。
また、従来
と簡素に反復処理を行うことが可能となりました。
}}
*ノードの概念
**DOMに関するオブジェクト<br>
Window
Worker
{{コラム|メモリ内部でのDOMデータ|
DOMを正しく使おうと思えば最終的には何故DOMのオブジェクトシステムはこの様に出来ているのか？
ということを理解する必要がある。DOMはXML文書を解析してその内容をメモリ上に展開するときコレクション同士がツリー状に繋がっている。既にJava等でデザインパターンを修得している上級者には[[w:Composite パターン|Composite パターン]]を取っていると言えば分かっていただけるであろう（より平易な言葉で言うとデータがRoot（幹）から枝・葉の様につながった[[w:木構造_(データ構造)|木構造]]です）。DOMに存在する種々の「データ型」というのは、これの先にある様々な枝が何処でどう繋がれるのかを想像しながら使うものである。使っていく内に実感が追いついて慣れていくと思うが、初学者にはそこまでが単純ではないので頑張って欲しい。
}}
== 外部リンク ==
| 