JavaScript セレクター関数 querySelector および querySelectorAll

ドキュメントインスタンス.querySelector(セレクター文字列);

要素インスタンス.querySelector(セレクター文字列);

// body 要素を取得します。let body = document.querySelector("body");

コンソール.log(本文)

// ID が container の要素を取得します。最初の要素のみが取得されます。let container = document.querySelector("#container");

console.log(コンテナ)

// クラス内の btn を含む要素を取得します。最初の要素のみが取得されます。let btn = document.querySelector(".btn");

コンソールにログ出力します。



// コンテナーの直接のサブクラスで btn を含む要素を取得します。最初の要素のみが取得されます。let containerBtn = document.querySelector("#container>.btn");

コンソールにログ出力します。

// ID が container の要素を取得します。let container = document.querySelector("#container");

// 要素オブジェクトが存在するかどうかを確認する必要があります。存在する場合のみ、querySelector メソッドがあります。if (container) {

	// コンテナー内でクラスに btn が含まれる要素のみを検索します。

	containerBtn = container.querySelector(".btn"); とします。

	コンソールにログ出力します。

}

containerBtn = document.querySelector("#container .btn"); とします。

// ページに記事を含む2つのdivクラスがあると仮定します

// クラスに article が含まれるすべての要素を取得します。let articleList = document.querySelectorAll(".article");

console.log(記事リスト);

console.log(記事リストの長さ);

// コンソール出力:

// ノードリスト(2) [div.article, div.article]

// 2

// トラバーサルの for (let item of articleList) {

	console.log(アイテム);

}

// トラバーサル用 for (let i = 0; i < articleList.length; i++) {

	console.log(記事リスト[i]);

	console.log(記事リスト.item(i));

}

// forEach は articleList.forEach((item, index) => { を走査します

	console.log(アイテム、インデックス);

});

// 取得するには querySelectorAll を使用します。articleList は静的であり、リアルタイムではありません。let articleList = document.querySelectorAll(".article");

console.log(記事リスト);

console.log(記事リスト.長さ); // 2

タイムアウトを設定する(() => {

	// 要素を追加します let div = document.createElement("div");

	div.className = "記事";

	ドキュメントのbodyに子要素を追加します。	

	console.log(記事リスト);

	// まだ2

	console.log(記事リストの長さ);

}, 0);

//getElementsByClassName を使用して取得します。articleList はリアルタイムです。let articleList = document.getElementsByClassName("article");

console.log(記事リスト);

console.log(記事リストの長さ);



タイムアウトを設定する(() => {

	// 要素を追加します let div = document.createElement("div");

	div.className = "記事";

	ドキュメントのbodyに子要素を追加します。

	

	console.log(記事リスト);

	// ここは3

	console.log(記事リストの長さ);

}, 0);