ParentNode.querySelector() - セレクタに一致する最初の要素を取得する
querySelector()は、ParentNodeのメソッドです。セレクタに一致する最初の要素を取得します。
概要
- 名前
- querySelector
- 所属
- ParentNode
- IDL
Element? querySelector(DOMString selectors);
- 仕様書
- https://dom.spec.whatwg.org/#dom-parentnode-queryselector
説明
引数(selectors)には、セレクタを表す文字列を指定する。
セレクタに一致する最初の要素を返す。一致する要素がない場合はnullを返す。
デモ
ParentNode.querySelector()のデモです。
<!-- このコードは編集できます。 -->
<!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.querySelector( ".fuga" ) ;
console.log( value ) ;
document.getElementById( "result" ).appendChild( new Text( value + "\n\n" ) ) ;
document.getElementById( "result" ).appendChild( new Text( value.outerHTML ) ) ;
</script>
</body>
</html>
サポート状況
Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|
● | ● | ● | ● | ● 9+ | ● | ● | ● |
関連記事
- Document.getElementsByClassName()
- getElementsByClassName()は、Documentのメソッドです。class属性を指定して要素を取得します。
- NonElementParentNode.getElementById()
- getElementById()は、NonElementParentNodeのメソッドです。id属性を指定して要素を取得します。
- ParentNode
- ParentNodeは、親ノードになれるノードが備えているインターフェイスです。
- Document.getElementsByName()
- getElementsByName()は、Documentのメソッドです。name属性を指定してノードを取得します。