画面にくっついている DOM を操作するために引き出す方法

過去にいくつか書き方があったが、これを使えばほぼ他の関数は必要ない。

jQuery でお馴染みになった CSS セレクタ風に指定して取得できる関数である。

ID 指定

var hoge = document.querySelector("#hoge");

querySelector は最初にヒットした DOM 1個だけを取り出す。

複数ヒットさせて配列として取り出したい場合は querySelectorAll を使う

クラス指定

var hoge = document.querySelectorAll(".hoge");

これにより取得できるものは、普通に DOM のコレクションであって、jQuery のような、集合体の概念は無い。 なので塊に対する一括操作など無い。

jQuery でいう find 関数のような動きをするため

// jQuery
var piyo = $("#hoge").find(".piyo");
 
// Vanilla
var piyo = document.querySelector("#hoge").querySelectorAll(":scope .piyo");

この :scope という記述がその前述の範囲(この場合は#hoge)を表すセレクタになっている。 これは body 中に範囲を限定して書くstyleタグ内での記述という仕様らしい。

この場合 :scope の記述を省略すると子孫セレクタを指定した場合と同じ挙動になる。 つまり対象の DOM 配下からすべて検索することになる。孫は必要なく直下の子供からほしい場合は

このように明示的に :scope を記述する必要がある。

var piyo = document.querySelector("#hoge").querySelectorAll(":scope > .piyo");

できそうな雰囲気はあるが、このように書くとエラーになる

var piyo = document.querySelector("#hoge").querySelectorAll("> .piyo");

モトモコモ無いがこのように書くと動作はする。

var piyo = document.querySelector("#hoge").querySelectorAll("#hoge > .piyo");

そして意味的にも正しい結果を得ることができる。

この結果は構造によっては、これと同じになる。

var piyo = document.querySelector("#hoge").querySelectorAll("body .piyo");

.piyo 画面上に大量にあろうが #hoge 配下でフィルタされた内容になる。 非常に挙動が分かりづらいが挙動としてはこうである。

メソッドとして querySelector や querySelectorAll は document もしくは querySelector で得られるようなオブジェクトにしか装備されていない。

つまり、セレクタのようなザックリここらへんのような対象ではなく、必ず画面上の特定のオブジェクトを起点にしなければならない、なので実際に検索した範囲からさらに検索するような動きをするには、CSS のセレクタのような使い方はできず、目的のオブジェクトをセレクタ指定できる1個手前まで1段1段潜って書く必要がある。

前述のように querySelectorAll の結果は jQuery とは違い、集合体という概念ではなくて、実オブジェクトの集合なので、集合と集合の共通部分を取るのような集合演算はできない。

var hoge = document.querySelectorAll("hoge input[type=checkbox]:checked");

定番モノ。動作としては最速だと思うのでこれを使う価値はある。

var hoge = document.getElementById("hoge");

querySelector を使うようになればもうこの記述で書くことは無い。

↓過去の記述

2015-10-19 現在ほぼ実用的に document.getElementsByClassName が使えるようだ Can I use... Support tables for HTML5, CSS3, etc

var a = document.getElementsByClassName("hogehoge");

var a = document.getElementsByTagName("*");