ParentNode.querySelectorAll() - セレクタに一致する全ての要素を取得する
querySelectorAll()は、ParentNodeのメソッドです。セレクタに一致する全ての要素を取得します。
概要
- 名前
- querySelectorAll
- 所属
- ParentNode
- IDL
[NewObject] NodeList querySelectorAll(DOMString selectors);
- 仕様書
- https://dom.spec.whatwg.org/#dom-parentnode-queryselectorall
説明
引数(selectors)には、セレクタを表す文字列を指定する。
デモ
ParentNode.querySelectorAll()のデモです。
<!-- このコードは編集できます。 -->
<!DOCTYPE html>
<html>
<head>
<style>
div#result { white-space: pre-wrap ; }
</style>
</head>
<body>
<ul>
<li class="hoge">SYNCER1</li>
<li class="fuga">SYNCER2</li>
<li class="piyo">SYNCER3</li>
</ul>
<hr>
<div id="result"></div>
<script>
var value = document.querySelectorAll( "ul > li" ) ;
console.log( value ) ;
document.getElementById( "result" ).appendChild( new Text( value + "\n\n" ) ) ;
for ( var i=0, l=value.length; l>i; i++ ) {
document.getElementById( "result" ).appendChild( new Text( "[" + i + "]: " + value[i].outerHTML + "\n" ) ) ;
}
</script>
</body>
</html>
サポート状況
Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|
● | ● | ● | ● | ● 9+ | ● | ● | ● |
関連記事
- ParentNode
- ParentNodeは、親ノードになれるノードが備えているインターフェイスです。
- JSON.stringify()
- JSON.stringify()は、JSONオブジェクトを文字列に変換するメソッドです。文字列に変換する際、オブジェクトはシリアライズされます。例えば、値がnew Date()の場合、toJSON()が実行されて、JSONシリアライズした値に変換されて文字列化します。
- Document.getElementsByClassName()
- getElementsByClassName()は、Documentのメソッドです。class属性を指定して要素を取得します。
- Document.getElementsByName()
- getElementsByName()は、Documentのメソッドです。name属性を指定してノードを取得します。