「JavaScript/DOM」の版間の差分
削除された内容 追加された内容
→概要: Fix typo, s/source/syntaxhighlight/ タグ: 2017年版ソースエディター |
Fix typo タグ: 2017年版ソースエディター |
||
17 行
</head>
<body>
<div id="output">
<script>
const output = document.querySelector("#output");
29 行
SCRIPT要素の中に書かれているJavaScriptプログラムのソースコードに注目してください。
<code>document.querySelector</code>メソッドはDOMの一部で<ref>https://dom.spec.whatwg.org/#dom-parentnode-queryselector</ref>、this（この場合は document）の子孫の中でCSSセレクター <code>"#output"</code> と一致する最初の要素をツリー順に返し、一致する要素がない場合は <code>null</code> を返します。
ここでは "output" というIDを持つ要素、すなわち<syntaxhighlight lang="html5" inline><div id="output"></div></syntaxhighlight>というDIV要素を参照し、要素に対応するElementオブジェクトを<code>output</code>という<code>const</code>な変数に代入しています。
69 行
では、解説していきます。
documentはDocumentインターフェイスのオブジェクトで特別に宣言を行わなくても存在し、これにはウェブページでの要素を頂点とする木構造として文書本体が格納されています<ref>HTML4では頂点にフレームセットが来る可能性もありましたが、HTML5で廃止されました。</ref>。
document.querySelector("p")は、DOMツリーの頂点からセレクター "p"（P要素）を探し最初に見つかった要素を返します。
探したP要素の.firstChildプロパティで「内容」を得て、nodeValueプロパティで値（テキスト文字列）「DOM TEST」を得ている。
それぞれのメソッドとプロパティの解説を行うと、、
; Document.querySelector(CSSセレクター)
: 子要素から、CSSセレクターと一致する要素を探してElementとして返す
; firstChild()
: 最初の子要素を返す
80 行
: 要素内のデータを取り出す
この様に、CSSセレクターとElementオブジェクトのプロパティを組み合わせ情報を読み出したり変更したりします。
そのため、DOMプログラムでは目的の１つあるいは複数の要素をCSSセレクターでどの様に表すかが重要になり、これは丁度CSSでスタイルシートを記述する時にCSSでプロパティを適用する要素を適切なCSSセレクターで記述する行為に対応している（CSSで書いたセレクターはそのまま querySelector や querySelectorAll で使えるので、スタイルシートでセレクターに一致する要素を背景色を変えてみるなどしてセレクターの働きを確認できる）。
=== 基本的単語の解説 ===
96 行
=== document.querySelector ===
document.querySelectorはDOMプログラミングを実際に行う際に最もよく使う機能で、指定したCSSセレクターの要素を参照することができます。
具体的には、
106 行
=== document.querySelectorAll ===
document.querySelectorはDOMプログラミングを実際に行う際によく使う機能で、指定したCSSセレクターと一致する要素をすべて返します。
<syntaxhighlight lang="js">▼
const elms = document.querySelectorAll("li");
elms.forEach(el => el.style.color="red");
115 ⟶ 114行目:
発見されたLI要素の文字色を赤にします。
{{コラム|DOMとCSSセレクター|2=
HTML+CSS+JavaScriptの技術基盤に基づくウェブコンテンツ制作において要素を指定する方法がCSS＝[[CSS/記述#セレクタ|CSSセレクター]]とDOM=getElementsBy*系メソッドと2つの異なる記法になってしましました。
このことは実装を複雑にし、誤解からバグの入り込む余地がありました。
この様な状況で、要素をCSSセレクターで指定でき
実際のコードを見てみましょう
; 旧来の要素選択メソッド :<syntaxhighlight lang="js">
getElementsByTagName("h1");
getElementsByClassName("className");
document.getElementById("sample");
getElementsByName("theName");
; jQueryの要素選択メソッド :<syntaxhighlight lang="js">
$("h1");
$(".className");
$("#sample");
$([name="thsName"]);
</syntaxhighlight>
と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>。
; CSSのセレクターの書式が使える新しい要素選択メソッド :<syntaxhighlight lang="js">
document.querySelector("h1");
document.querySelectorAll(".className");
document.querySelector("#sample");
document.querySelector([name="thsName"]);
</syntaxhighlight>
最初に見つかった要素が必要なら {{code|Document.querySelector}} メソッドを、一致する全てを得るなら {{code|Document.querySelectorAll}} メソッドを使います。
従来のDOMは、ツリー構造から特定の要素（または要素コレクション）を要素・クラス・ID・name属性を区別して適切なメソッドを選ぶ必要があり煩雑で、しばしばバグの原因となりましたが、
Document.querySelectorメソッド及びDocument.querySelectorAllメソッドの登場で、
CSSと同じセレクターで記述することができるようになり「スタイルシートとスクリプトで
また、従来
;LI要素全てに処理を行う:<syntaxhighlight lang="js">
const li = document.getElementsByTagName("li");
for (let i = 0, len = li.length; i < len; i++) {
// li[i]に対する処理
}
</syntaxhighlight>
を、Arrayイテレータを使い
;LI要素全てに処理を行う:<syntaxhighlight lang="js">
const li = document.querySelectorAll("li");
li.forEach(el => /* elに対する処理 */)
</syntaxhighlight>
と簡素に反復処理を行うことが可能となりました。
}}
203 ⟶ 202行目:
Window
Worker
{{Nav}}
== 外部リンク ==
| |||