Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

querySelector JavaScript：ガイド

getElementById 。 getElementByClass 。これらの関数については以前に聞いたことがあるかもしれません。どちらもJavaScriptで特定の要素を選択できます。

要素を選択したら、その内容を変更したり、状態を変更したり、非表示にしたりすることができます。

JavaScriptでウェブページ上のアイテムを選択するために使用できる別の関数があります：querySelector 。この関数には、querySelectorAllという姉妹があります 、特定のクエリを満たすすべての要素を返します。

このガイドでは、querySelectorの使用方法について説明します。 およびquerySelectorAll メソッド。これらのメソッドの実際の例を見ていき、コードで使用できるようにします。

querySelectorとは何ですか？

querySelector CSSクエリに一致する要素を返す関数です。 querySelectorに注意してください メソッドは、セレクターの最初のインスタンスのみを返します。 querySelectorを使用する場合 、任意のCSSセレクターを指定できます。たとえば、特定のIDが設定されている要素、またはタグ名で要素を取得できます。

この関数は次のように使用できます。 

var elementName = document.querySelector('#thisElement');

引用符で一致するようにCSSセレクターを指定しました。さらに、このメソッドを使用して、別の要素内の要素を選択できます。 

var parentElement = document.querySelector('main');
var childElement = document.querySelector('#childElement');

これにより、HTMLファイルの

タグ内に含まれているID#childElementの要素が返されます。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

querySelectorAll メソッドは同じように機能します。違いは、最初の一致だけでなく、クエリセレクタによって検出されたすべての一致を返すことです。

var allParagraphs = document.querySelectorAll('p');

これにより、HTMLページ上のすべての

タグのリストが返されます。

この関数で使用できるセレクターの例を次に示します。

  • p：ページ上のすべての

    タグを選択します。

  • #name_field：IDが「name_field」の要素を選択します
  • .list：クラス名が「list」のすべての要素を選択します
  • div> p：
    要素に含まれるすべての

    要素を選択します。

querySelectorを使用して複数のセレクターを指定できます およびquerySelectorAll メソッド。 CSSセレクターの詳細については、CSSおよびHTML属性セレクターのガイドをご覧ください。

一致するものが見つからない場合は、nullが返されます。

クエリセレクタの使用方法

querySelectorの方法を説明するために、簡単なWebアプリケーションを作成してみましょう。 メソッドは機能します。 HTMLに関する事実を表示するWebページを作成します。 querySelectorを使用します クリックすると「ダークモード」を有効にするボタンを追加します。

フロントエンドの設定

まず、ページのフロントエンドを設定します。

<!DOCTYPE html>
<html>
	<head>
		<title>HTML Facts!</title>
		<link rel="stylesheet" href="./facts.css">
	</head>

	<body>
		<div class="mainBox">
			<h1 class="text">HTML Facts!</h1>
			<p class="text">Did you know that HTML is actually based on another markup language, SGML, or Standard Generalized Markup Language?</p>
			<button type="button">Enable dark mode</button>
		</div>
		<script src="./facts.js"></script>
	</body>
</html>
>

HTMLに関する事実を表示する簡単なHTMLWebページを作成しました。現在、私たちのページは次のようになっています。

querySelector JavaScript：ガイド

私たちのページはユーザーにHTMLについての事実を提供していますが、スタイルと機能的なダークモードボタンという2つの重要な機能が欠けています。 facts.cssというファイルに次のスタイルを追加しましょう：

.mainBox {
    margin: auto;
    width: 50%;
    text-align: center;
    background: hotpink;
    padding: 5%;
}

body {
    background: lightblue;
}

button {
    padding: 10px;
    background: lightgreen;
    border-radius: 10px;
    border: none;
}

これらのスタイルにより、サイトの見た目がより美しくなります。

querySelector JavaScript：ガイド

フロントエンドで行う必要があるのはこれだけです。次に、JavaScriptを使用してダークモードを追加することに焦点を当てます。

JavaScriptを使用したダークモードの追加

ダークモード機能には、次の2つの機能が含まれている必要があります。

  • ボックス内の見出しと段落を白に変更する必要があります。
  • サイトの青い背景を黒に変更する必要があります。

まず、ターゲットにするDOM要素（Webページ要素）を選択します。ページの見出し、段落、本文です。これは、facts.jsというファイルで行います。 

const heading = document.querySelector("h1");
const paragraph = document.querySelector("p");
const body = document.querySelector("body");

このコードは、タグ

、

、およびを持つドキュメントの最初の要素を返します。次に、テキストと本文のタグの色を変更する関数を作成します。見出しと段落のテキストを白に変更し、サイトの背景を黒に変更します。

function enableDarkMode() {
	heading.setAttribute("style", "color: white;");
	paragraph.setAttribute("style", "color: white;");
	body.setAttribute("style", "background-color: black;");
}

もうすぐ着きます。次のステップは、イベントリスナーを設定することです。このリスナーは、ユーザーがボタンをクリックするたびにリッスンします。ユーザーがボタンをクリックすると、ダークモードが有効になります：

document.querySelector("button").addEventListener("click", enableDarkMode);

次に、ボタンをクリックするとどうなるか見てみましょう。

querySelector JavaScript：ガイド

当サイトはダークモードに正常に変更されました。

結論（および挑戦）

このコードでは、ユーザーがダークモードを有効にすることしかできません。何が得られますか？これはあなたにとって課題を提示します：ユーザーがサイトでダークモードを無効にできるようにするコードを書いてください。

querySelector メソッドを使用すると、CSSセレクタークエリに基づいてHTML要素を選択できます。このメソッドは、一致の最初のインスタンスを返します。 querySelectorAllを使用できます 指定されたセレクターに一致するすべての要素のリストを取得するメソッド

これで、querySelectorの使用を開始する準備が整いました。 JavaScriptプロのような方法！


  1. JavaScript JSON HTML

    JSONデータを使用してHTMLを生成するためのコードは、次のとおりです- 注 − JSONPlaceholderは、テストとプロトタイピングのための偽のオンラインRESTAPIです 例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /&g

  2. JavaScriptでIDで要素を削除しますか？

    IDで要素を削除するには、remove（）を使用できます。 例 以下はコードです- <!DOCTYPE html> <html lang="en"> <head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>D