以前は、DOMを使用して純粋なJavaScriptの要素にアクセスするのはそれほど簡単ではありませんでした。 これを2つの新しい方法に querySelector & querySelectorAll 、現在すべての最新のブラウザでサポートされているため、このタスクははるかに簡単になりました。
querySelector
querySelector は、提供されたCSSクエリに一致する最初の要素を返します。 完全なドキュメントでそれを使用してください:
let myElem = document.querySelector('#myElem');
または、要素でそれを使用して、要素内の要素を取得します。
let elem = document.querySelector('p');
let myElem = elem.querySelector('#myElem');
querySelectorAll
querySelector は、指定されたセレクターに一致するすべての要素を返します。
let elems = document.querySelectorAll('p');
そして、ここで同じことを行い、選択を絞り込むことができます。 最初のp要素にあるspan要素を選択しましょう。
let firstP = document.querySelector('p');
let spanElems = firstP.querySelectorAll('span');
caniuse.com から、主要なブラウザー全体でのクエリセレクター機能のサポートに関する詳細データを見つけることができます。