以前は、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 から、主要なブラウザー全体でのクエリセレクター機能のサポートに関する詳細データを見つけることができます。