Javascript MEMO

日本語

ENGLISH

querySelectorAll()

指定したCSSセレクタに一致するすべての要素を取得するメソッド

指定した CSSセレクターに一致するすべてのHTML要素を NodeList として取得します。
取得したNodeListの値を取得したり、プロパティを変更することができます。

[HTML]

1	パンダ
2	くま
3	たぬき

[HTML]

1	panda
2	bear
3	raccoon

[サンプル]

copy

elements = document.querySelectorAll('.no');
elements.forEach(element => 
{
	console.log(element.innerText);
	element.style.backgroundColor = '#E0F8FF';
});
elements = document.querySelectorAll('.name');
elements.forEach(element => 
{
	console.log(element.innerText);
	element.style.backgroundColor = '#FAFAD2';
});
elements = document.querySelectorAll('.no, .name');
elements.forEach(element => 
{
	console.log(element.innerText);
	element.style.color = '#F08080';
});

elements = document.querySelectorAll('.no');

querySelectorAllの引数にクラスidを設定します。
この例では、class="no"の名前のがある要素が対象となります。

elements.forEach(element =>

querySelectorAllで取得した要素をforEachで順次、
各要素をelementに設定して{...}内の処理を実行します。

console.log(element.innerText);

用意のテキストを取得した例です。

element.style.backgroundColor = '#E0F8FF';

要素の背景を変更した例です。

elements = document.querySelectorAll('.no, .name');

この例では、class="no"および"name"の複数の名前のがある要素が対象となります。

戻る

著作権情報

ホームページおよプリ等に掲載されている情報等については、いかなる保障もいたしません。
ホームページおよびアプリ等を通じて入手したいかなる情報も複製、販売、出版または使用させたり、
または公開したりすることはできません。
当方は、ホームペーよびアプリ利用したいかなる理由によっての障害等が発生しても、
その結果ホームページおよびアプリ等を利用された本人または他の第三者が被った損害について
一切の責任を負わないものとします。