「JavaScript/DOM」の版間の差分
削除された内容 追加された内容
編集の要約なし |
getElementByIdメソッドからquerySelectorメソッドへ書換え |
||
2 行
'''[[w:Document Object Model|DOM]]'''（ドム、'''''D'''ocument '''O'''bject '''M'''odel''、ドキュメント・オブジェクト・モデル）とは、プログラミング言語から[[HTML]]ドキュメントなどを扱うために標準化された仕様です<ref>かつてはW3CがDOMの標準化を行っていましたが、2021年6月現在では[[w:WHATWG|WHATWG]]の策定する DOM
Living Standard が標準です。 https://dom.spec.whatwg.org/</ref>。DOMをサポートするのはウェブブラウザ上のJavaScriptだけではありません。
JavaとDOMによるXML文書の操作や [[w:Node.js|Node.js]] と [https://github.com/jsdom/jsdom jsdom] の組み合わせの様なウェブブラウザ上のJavaScript以外の DOM 実装は存在します<ref>元来、DOMは「プログラミングを言語に依存しない」オブジェクトモデリングシステムなので驚くに値しません</ref><ref>Abstract. DOM defines a platform-neutral model for events, aborting activities, and node trees. [https://dom.spec.whatwg.org/ DOM Living Standard.]</ref>。ウェブブラウザ上のJavaScriptにはDOM操作のためのDocumentオブジェクトが組み込まれています。
== 概要 ==
19 行
<div id="output"></div>
<scrip>
const output = document.
output.innerHTML = "Hello, world!";
</script>
30 行
<code>document.getElementById</code>メソッドはDOMの一部で<ref>https://dom.spec.whatwg.org/#dom-nonelementparentnode-getelementbyid</ref>、this（この場合は document）の子孫の中でIDが与えられたIdと一致する最初の要素をツリー順に返し、位置する要素がない場合はnullを返します。ここでは "output" というIDを持つ要素、すなわち<code><nowiki><div id="output"></div></nowiki></code>という<code>div</code>要素を参照し、要素に対応するElementオブジェクトを<code>output</code>という変数に代入しています。
<code>output.innerHTML</code>プロパティを使用すると<code>div</code>要素の中身を取得したり
== 動的なWebページの操作 ==
JavaScriptを学びたいと言う人間の多くは、おそらくよりダイナミックなWebページを製作したいという方だと思われる。
39 ⟶ 38行目:
=== 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文書は、文書を要素で囲い込んでいるが、タグは必ず入れ子になるように書かれないといけないため必然的に囲っているタグと囲われているタグとの間に親子関係がある。
そして、複数の要素を子として取ることが出来るため、要素はツリー状に整理することが出来る。
DOMとはXML文書がツリー構造になる事を強く意識して作成されているライブラリ群である。
まずは、次のサンプルを打ち込んでほしい。
69 ⟶ 62行目:
</div>
<script>
alert(document.
</script>
</body>
</html>
</syntaxhighlight>
この文書では、HTML文書中のbodyタグ内部に、divタグが埋め込まれており、さらにその中にpタグ。その中にテキストが埋め込まれている。
ここから「DOM TEST」の文字列を読み出したい場合には、サンプルコードの様に記述をすればよい。
82 ⟶ 74行目:
documentはDocumentインターフェイスのオブジェクトで、特別に宣言を行わなくても存在し、
これにはwebページでのhtml要素をrootとする木構造として文書本体が格納されている。
document.querySelector("p")は、DOMツリーの頂点からセレクタ "p"（パラグラフ要素）を探し最初に見つかった要素を返す。
探したP要素の.firstChildプロパティで「内容」を得て、nodeValueプロパティで値（テキスト文字列）「DOM TEST」を得ている。
それぞれのメソッドとプロパティの解説を行うと、
; Document.querySelector(CSSセレクタ)
; getElementsByTagName("タグ名")▼
: 子要素から、
; firstChild()
: 最初の子要素を返す
98 ⟶ 86行目:
: 要素内のデータを取り出す
この様に、
そのため、DOMプログラムでは目的の１つあるいは複数の要素をCSSセレクタでどの様に表すかが重要になり、これは丁度CSSでスタイルシートを記述する時にCSSでプロパティを適用する要素を適切なCSSセレクタで記述する行為と対応している（CSSで書いたセレクタはそのまま/querySelector(All)?/で使えるので、スタイルシートでセレクタの意味を背景色を変えてみるなどの方法で確認できる）。
=== 基本的単語の解説 ===
DOMはその名の中にある「ドキュメント」「オブジェクト」「モデル」の名の通り、XMLの各部分をオブジェクト（モノ）として分割して、それぞれを参照して扱える様にする方法である。XML内部には、タグで区切られた数々のデータがあり、それぞれを種類分けしてプログラムで扱っている。その中でも特によく使うDOMのデータ型は次の3種類である。
113 ⟶ 100行目:
: DOM 要素の属性へのインターフェース
JavaScriptによるWebプログラミングでは、目的と成る成分を指定し、値を取り出したり変更して希望する処理を実現することとなり。
=== DOM-HTML拡張 ===
DOMは、XMLを広くカバーする仕様となっているが、特にHTMLに関しての特別の拡張が行われており、簡潔な書式でHTMLの機能を呼び出せるようになっている。この拡張の中でよく使うのが次の2つである。
=== document.
▲document.getElementByIdはDOMプログラミングを実際に行う際に最もよく使う機能で、指定したIDのHTML要素を参照することが出来る。
具体的には、
<syntaxhighlight lang="js">
var elem = document.
elem.firstChild.nodeValue = "てすと";
</syntaxhighlight>
▲とする事で、sampleとidを打ったHTML要素の内部のテキスト表示を置き換える事が出来る。
document.querySelectorはDOMプログラミングを実際に行う際に最もよく使う機能で、指定したCSSセレクタに合致するHTML要素をすべて返す。
▲=== document.body ===
'''コード例'''
<syntaxhighlight lang="js">
elms.forEach(el => el.style.color="red");
</syntaxhighlight>
発見されたLI要素の文字色を赤にします。
HTML+CSS+JavaScriptの技術基盤に基づくウェブコンテンツ制作においてHTML要素を指定する方法がCSS＝[[CSS/記述#セレクタ|CSSセレクタ]]とDOM=getElementsBy*系メソッドと2つの異なる記法になってしましました。
このことは実装を複雑にし、誤解からバグの入り込む余地がでてきました。
実際のコードを見てみましょう
▲{{コラム|CSSセレクタの影響|
▲この様な状況で、jQueryなどのフレームワークがもてはやされてきました。
<source lang="js">
document.getElementById("sample");
</source>
は、jQueryでは、
<source lang="js">
$("#sample");
</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("#sample");
</source>
Document.querySelectorは、Document.getElementByIdと同じくElementオブジェクトを返します。
同様に、<code>document.body</code>プロパティは、<code>document.querySelector("body")</code>と同値です。
いままで、DOMを理解することはTree構造から特定の要素（または要素コレクション）を「濾し取る」事が主でしたが、Document.querySelectorメソッド及びDocument.querySelectorAllメソッドの登場で、CSSと同じセレクタで記述することができるようになり「スタイルシートとスクリプトで同じ要素を指定する手段が異なる」という捻じれ構造を是正することができました。
また、従来
<source lang="js">
for (let i = 0, len = li.length; i < len; i++) {
// li[i]に対する処理
}
</source>
を、Arrayイテレータを使い
<source lang="js">
const li = document.querySelectorAll("li");
li.forEach(el => /* elに対する処理 */)
</source>
と簡素に反復処理を行うことが可能となりました。
}}
*ノードの概念
203 ⟶ 206行目:
{{コラム|メモリ内部でのDOMデータ|
DOMを正しく使おうと思えば最終的には何故DOMのオブジェクトシステムはこの様に出来ているのか？
ということを理解する必要がある。DOMはXML文書を解析してその内容をメモリ上に展開するときコレクション同士がツリー状に繋がっている。既にJava等でデザインパターンを修得している上級者には[[w:Composite パターン|Composite パターン]]を取っていると言えば分かっていただけるであろう（より平易な言葉で言うとデータがRoot（幹）から枝・葉の様につながった[[w:木構造_(データ構造)|木構造]]です）。DOMに存在する種々の「データ型」というのは、これの先にある様々な枝が何処でどう繋がれるのかを想像しながら使うものである。使っていく内に実感が追いついて慣れていくと思うが、初学者にはそこまでが単純ではないので頑張って欲しい。
}}
| |||