目次
querySelectorメソッド基本構文
querySelectorメソッドを使えば任意のHTML要素を検出・取得することができます。
基本的な構文は以下の通りです。
document.querySelector( CSSセレクタ )querySelectorメソッドを使って要素を取得する
<input type="text" id="list" name="todo" value="赤">テキストボックスのhtmlです。id属性とname属性があります。
//cssのid属性で指定する場合#を指定
let targets = document.querySelector('#list');
console.log(targets);
//表示結果
//<input type="text" id="list" name="todo">
//value値を取得する場合
let targets = document.querySelector('#list').value;
console.log(targets);
//表示結果
//赤
//cssのname属性で指定する場合[name=]等を指定する場合
let targets = document.querySelector('[name="todo"]')
let targets = document.querySelector('input[name="todo"]'
let targets = document.querySelector('input[type="text"][name="todo"]')注意点としては、最初に合致したHTML要素を取得した時点でプログラムは終了するという点です。
つまり、複数の要素を取得するには自作のループ処理を作成するか、後述する「querySelectorAll()」を使う必要があります。
querySelectorAllメソッド基本構文
引数の指定方法や対象の範囲などquerySelectorと手法は同じです。
document.querySelectorAll( CSSセレクタ )大きく違うのは、合致するHTML要素をすべて取得することができるところです。
queryselectorは最初に合致した要素だけしか取得できないので、全ての要素が必要な場合はquerySelectorAllを使います。
querySelectorAllメソッドを使って複数の要素を取得する
ページ内の全てのdivやp要素などを取得する方法です。
下記の場合、3つのHTML要素は全てdivなので、返り値には配列として3つのHTML要素が格納されています。
<div id="item1"></div>
<div id="item2"></div>
<div id="item3"></div>let targets = document.querySelectorAll('div');
console.log(targets);
//表示結果
//<div id="item1"></div>
//<div id="item2"></div>
//<div id="item3"></div>
