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

querySelector() メソッド

Document.querySelector()
Element.querySelector()

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

セレクターによるエレメントの取得
var element_ = document.querySelector("div.example p#content");
または
var element_ = element.querySelector("div.example p#content");

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

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

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

 似たメソッドに querySelectorAll() がありますが、こちらは該当する オブジェクトを NodeList で返します。

Document.querySelector() メソッド

Document.querySelector()

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

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

Document以下の該当する最初のエレメントを取得
var element_ = document.querySelector("p.class='example'");
詳しくは Example を参照してください

 似たメソッドに querySelectorAll() がありますが、こちらは該当する オブジェクトを NodeList で返します。

Syntax

in JavaScript

 このメソッドは、webページを構成するエレメントの中で該当する最初のエレメントを返します。返り値は Element インスタンスです。

Element = Document.querySelector( selecter );

引数(Parameter Values)

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

返り値(Return Values)

Type摘要
ElementElement オブジェクト

Example

Element.querySelector() メソッド

Element.querySelector()

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

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

querySelector()メソッド例
var child_element = element.querySelector("input[type='button']");
詳しくは Example を参照してください

 似たメソッドに querySelectorAll() がありますが、こちらは該当する オブジェクトを NodeList で返します。

Syntax

in JavaScript

 Element.querySelector()の場合では、その包括するエレメント内から引数のセレクターに該当する最初のエレメントを返します。返り値は Element インスタンスです。

Child_Element = Element.querySelector( selecter );

引数(Parameter Values)

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

返り値(Return Values)

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

Example