スタートページ＞ Javascript tips

querySelector （getElementByIdなどの進化形）

基本仕様

• querySelectorは、getElementByIdなどの進化形で、jQueryに似た表記ができます。
  JavaScript の標準仕様であり、これを用いるのに特別な設定は不要です。
• jQuery と異なり、querySelectorで対象になるのは、自分のHTML内だけです。
  　　querySelector("aaa.html")
  など、他のファイルを参照することはできません。
• ById, ByClass, などを querySelector 一つで記述します。
  一般系　document.querySelector("CSSセレクタ")
  　　getElementById("id名") 　　　　　→　querySelector("#id名")
  　　getElementsByClass("class名")　　→　querySelector(".id名")
  　　getElementsByTagName("div")　　→　querySelector("div")
  　　getElementsByName("name名") 　→　複雑になるので割愛
• querySelectorで対象になるのは、最初に見つかった要素だけです。
  複数の要素全体を対象するには、querySelectorAllを用います。
• CSSセレクタは、柔軟な拡張機能があります。例えば
  　　document.querySelectorAll("div.aaa") →　<div class="aaa">～</div> が対象
  　　document.querySelector("#aaa <input>") →　id="aaa" 内部の <input> が対象
  などの記述ができます。
  
• getElement系と同様、querySelector("#id名") で取得できるのは　Object です。
  内容を対象にするには、
  　　querySelector("#id名").innerHTML
  とする必要があります。

querySelector の簡単な例（id）

例１　文字列変数「出力」の内容を「例１表示場所」に表示する

html
　　<div id="例１表示場所"></div>
script
　　function 例１() {
　　　　var 出力 = "最初の文" + "<br>";
　　　　出力 += "次の行 <a href='aaa/html'>aaa</a>へのリンク";
　　　　document.querySelector('#例１表示場所').innerHTML = 出力;
　　}
結果：例１表示場所が次のようになる
　　最初の行
　　次の行 aaaへのリンク

例２　「例２選択場所」の内容を「例２表示場所」に表示する
（選択場所のタグはそのまま表示）

html
　　<div id="例２選択場所">
　　最初の行
　　次の行 <a href='aaa/html'>aaa</a>へのリンク
　　</div>
　　　：
　　<div id="例２表示場所"></div>
script
　　function 例２() {
　　document.querySelector('#例２表示場所').innerHTML
　　　　　 = document.querySelector('#例２選択場所').innerHTML;
　　}
結果：例２表示場所が次のようになる
　　最初の行
　　次の行 aaaへのリンク

例３　scriptの「例３選択場所」のソースコードを「例４表示場所」に表示する
（タグの無効化と改行記号の扱いが必要になる）

html
　　<div id="例３選択場所">　// ①
　　<script>　　　　　　　　　// ②
　　function 例３() {
　　　　var x = 100;
　　　　if (x < 50) var y = 0;
　　　　else y = 1;
　　}
　　</script>　　　　　　　// ③
　　</div>　　// ④　ここまでが選択場所　表示では①～④を削除
　　　：
　　<div id="例３表示場所"></div>
script
　　function 例３() {
　　　　var 入力文 = document.querySelector('#例３選択場所').innerHTML;
　　　　var 出力文 = "";
　　　　var 行 = [];
　　　　行 = 入力文.split("\n");　　　　　　　　　　　// \nによる分離（改行）
　　　　for (var i=2; i<行.length-2; i++) {　　　　　 // select の間だけを表示（①～④を削除）
　　　　　　行[i] = 行[i].replace(/</g, "＆lt;"); 　　　// 　< の特殊文字への変換
　　　　　　行[i] = 行[i].replace(/>/g, "＆gt;");　　　// 　>
　　　　　　行[i] = 行[i].replace(/ /g, "＆nbsp;");　　// 　半角空白
　　　　　　出力文 += 行[i] + "<br>"; 　　　　　　　// 改行の復活
　　　　}
　　　　document.querySelector('#例３表示場所').innerHTML = 出力文;
　　}
結果：例３表示場所にソースリストが表示される
　　function 例３() {
　　　　var x = 100;
　　　　if (x < 50) var y = 0;
　　　　else y = 1;
　　}

querySelectorAll の簡単な例（class, タグ名）

複数の要素を取得する場合、querySelectorAll にします。
その結果は、NodeListという配列に似たオブジェクトが返されます。
「例４」①②のように、選択では .innerHTML をつけず、個々の要素に .innerHTML をつけます。

例４　class="aaa" を持つ要素を取り出す

html
　　<div class="aaa">class="aaa" の div</div>
　　<div class="bbb">class="bbb" の div</div>
　　<p class="aaa">class="aaa" の p</p>
　　　：
　　<div id="例４表示場所"></div>
script
　　function 例４() {
　　　　var 出力 = "";
　　　　var 入力 = document.querySelectorAll(".aaa");　　// ①
　　　　for (var i = 0; i < 入力.length; i++) {
　　　　　　出力 += 入力[i].innerHTML + "<br>";　　　　// ②
　　　　}
　　　　document.querySelector('#例４表示場所').innerHTML = 出力;
　　}
結果：例４表示場所に次の２要素が表示される。
　　class="aaa" の div
　　class="aaa" の p

例５　li タグの要素を取り出す

html
　　<li>li要素</li>
　　<li class="red">li要素 class="red"</li>
　　<ul>
　　　<li>ul内部のli要素</li>
　　</ul>
　　<p>li要素ではない</p>
　　　：
　　<div id="例５表示場所"></div>
script
　　function 例５() {
　　　　var 出力 = "";
　　　　var 入力 = document.querySelectorAll("li");
　　　　for (var i = 0; i < 入力.length; i++) {
　　　　　　出力 += 入力[i].innerHTML + "<br>";
　　　　}
　　　　document.querySelector('#例５表示場所').innerHTML = 出力;
　　}
結果：例５表示場所に次の３要素が表示される。
　　li要素
　　li要素 class="red"
　　ul内部のli要素

セレクタの組み合わせ

(Ａ, Ｂ)　ＯＲの関係: ＡまたはＢに合致

タグ<h3> または タグ<h4> または class="ccc" の要素を取り出す。

html
　　<h3>h3</h3>
　　<h4 class="xxx">h4 class="xxx"</h4>
　　<p class="ccc">p class="ccc"</p>
script
　　document.querySelectorAll("h3, h4, .ccc");
結果
　　h3
　　h4 class="xxx"
　　p class="ccc"

(Ａ Ｂ)　親・子孫関係：Ａの内部のＢ
(Ａ> Ｂ)　親子関係：Ａの内部直下のＢ

html
　　<ol>
　　　　<li>①　ol⊃ li</li>
　　　　<ul>
　　　　　　<li>②　ol ⊃ ul ⊃ li</li>
　　　　</ul>
　　</ol>
　　<ul>
　　　　<li>③　ul ⊃ li</li>
　　　　<ol>
　　　　　　<li>④　ul ⊃ ol ⊃ li</li>
　　　　</ol>
　　</ul>
script
　　document.querySelectorAll("ol li");
結果
　　①、②、④
script
　　document.querySelectorAll("ol > li");
結果
　　①、④

(Ａ[Ｂ]）親子関係：Ａの内部で name属性がＢ

<input type="text" ～> の要素を選択する。
script
　　document.querySelectorAll("input[type='text']");

<div id="入力"> 内での<input type="text" ～> の要素を選択する。
script
　　document.querySelectorAll("#入力 input[type='text']");

チェックボックス「input type="checkbox"」で name="果物" についてチェックの有無を示す。
HTML
　　<input type="checkbox" name="果物" value="ミカン" checked></input>
　　<input type="checkbox" name="果物" value="リンゴ"></input>
　　<input type="checkbox" name="果物" value="バナナ"></input>
script
　　var 要素 = document.querySelectorAll("input[type='checkbox'][name='果物']");
　　for (var e of 要素) {
　　　　console.log(e.value, e.checked);
　　}
結果：コンソールログの表示
　　ミカン true
　　リンゴ false
　　バナナ false

トピックス

.style.backgroundColor 選択要素に背景色をつける

class="ddd" の要素の背景色を赤にする
HTML
　　<p class="ddd">①　p class="ddd"</p>
　　<div>②　div classなし</div>
　　<h4 class="ddd">③ h4 class="ddd"</h4>
script
　　var 入力 = document.querySelectorAll(".ddd");
　　for (var i = 0; i < 入力.length; i++) {
　　　　入力[i].style.backgroundColor = "red";
　　}
実行

①　p class="ddd"

③ h4 class="ddd"