備忘録的プログラミングリファレンス

querySelectorAll() メソッド

Document.querySelectorAll()
Element.querySelectorAll()

 querySelectorAll()メソッドは、引数のセレクターに該当するエレメントの配列を返すDocumentインターフェイスElementインターフェイスのメソッドです。 セレクターとは CSS におけるセレクターと同じ機能です。詳しくはセレクター(selecter)を参照してください。

 返り値は NodeList オブジェクトです。

セレクターによるエレメントの取得
var element_ = document.querySelectorAll("input[type='text']");
または
var element_ = element.querySelectorAll("input[type='text']");

 返り値は Element オブジェクトです。

 Document.querySelectorAll()は、webページ全体のエレメントからセレクターに該当するエレメントの配列を返します。

 Element.querySelectorAll()は、指定 Element が包括するエレメントの中からセレクターに該当するエレメントの配列を返します。

 取得した NodeList オブジェクトは元の内容が更新されても同じように更新されません。ハンドラーとして用いるときには注意が必要です。

 似たメソッドに querySelector() があります。こちらは該当する最初のエレメントを返します。

Document.querySelectorAll() メソッド

Document.querySelectorAll()

 Document.querySelectorAll() メソッドは、Document オブジェクト以下で引数のセレクターに該当する Node オブジェクトの配列を取得するメソッドです。

 返り値は、NodeList オブジェクトです。

Document以下の該当するオブジェクトのリストを取得
var element_ = document.querySelectorAll("input[name='example']");
詳しくは Example を参照してください

 取得した NodeList オブジェクトは元の内容が更新されても同じように更新されません。ハンドラーとして用いるときには注意が必要です。

 似たメソッドに querySelector() があります。こちらは該当する最初のエレメントを返します。

Syntax

in JavaScript

 このメソッドは、webページを構成するエレメントの中で該当する NodeList を返します。

NodeList = Document.querySelectorAll( selecter );

引数(Parameter Values)

Value摘要
selecterCSSにおけるセレクターで指定。例えば"element[attr=value]"

返り値(Return Values)

Type摘要
NodeListNodeList オブジェクト

Example

Element.querySelectorAll() メソッド

Element.querySelectorAll()

 Element.querySelectorAll() メソッドは、Element オブジェクトの子孫エレメントから引数のセレクターに該当する オブジェクトの配列を取得するメソッドです。

 返り値は、NodeList オブジェクトです。

Element 以下のセレクターに該当するオブジェクトの取得
var child_element = element.querySelectorAll("input[type='button']");
詳しくは Example を参照してください

 取得した NodeList オブジェクトは元の内容が更新されても同じように更新されません。ハンドラーとして用いるときには注意が必要です。

 似たメソッドに querySelector() があります。こちらは該当する最初のエレメントを返します。

Syntax

in JavaScript

 Element.querySelectorAll()の場合では、その包括するエレメント内から引数のセレクターに該当する Nodeの配列を返します。返り値は NodeList オブジェクトです。

NodeList = Element.querySelectorAll( selecter );

引数(Parameter Values)

Value摘要
selecterCSSにおけるセレクターで指定。例えば"element[attr=value]"

返り値(Return Values)

Type摘要
NodeListNodeList オブジェクト。指定されたElement オブジェクト以下の子孫エレメントが対象

Example