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

JavaScriptのgetElementByIdゲッターの使用方法

では、JavaScriptでWebページ上の要素を選択したいですか？これがgetElementByIdの専門です メソッド、いわゆる要素の王getters JavaScriptで。

getElementById IDに基づいて要素を選択できます。考えてみると、これは非常にわかりやすいメソッド名です。

このガイドでは、getElementByIdについて説明します。 つまり、それがどのように機能するか、そしていつコードでそれを使用すべきかということです。 document.getElementByIdデモの「表示/非表示」テキストボタンの例を見ていきます。

飛び込みましょう！

getElementByIdとは何ですか？

getElementById() 指定した要素ID属性に基づいて、ページ上のHTMLDOMから要素を選択するDocumentメソッドです。

次のコードを検討してください。 

index.html

<button id="mainButton">This is a button!</button>

scripts.js

const button = document.getElementById("mainButton");

HTMLコードでは、<button>を定義しました IDがmainButtonの要素 。 JavaScriptコードは、getElementById()を使用してこのコンポーネントを取得します 方法。

このメソッドは、ページ上の単一の要素を取得する場合に役立ちます。 HTMLとCSSの学習を振り返ると、IDは一意である必要があることがわかります。これにより、getElementById()が作成されます 単一の要素を取得するのに最適です。

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

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

要素にIDを割り当てている場合は、この方法を選択できます。より広いgetterを使用する代わりに querySelectorのように またはgetElementByClass 、特定の条件を満たす最初の要素オブジェクトを返す場合、getElementById()を使用して要素を取得できます。 。

getElementById() Webページ上のアイテムを取得するために使用される一般的な方法です。

getElementByIdについて知っておくべきこと

例を掘り下げる前に、この方法を使用するときに初心者がよく犯す間違いについて説明します。

新しいことを学んでいてうまくいかないときはいつもイライラするので、getElementById()のコツをつかんでいる間に発生する可能性のある一般的なエラーについてチャットしましょう。 。

まず、getElementById() 大文字と小文字が区別されます。 IDという用語は 通常、プログラミングでは大文字になります。キャメルケースのIdを使用する必要があります。 この方法を使用している場合。そうしないと、この方法は機能しません。

次に、指定するIDにポンド記号（ハッシュタグ）を含めないでください。このコードを考えてみましょう： 

const button = document.getElementById("#mainButton");

この例は、IDがmainButtonの要素を取得するように見える場合があります。 、しかしそうではありません。取得する要素のIDのみを指定する必要があります。 

const button = document.getElementById("mainButton");

これで邪魔にならないので、例を見てみましょう。

getElementByIdの使用方法

ウェブを閲覧しているときに、「続きを読む」というタグが表示される場合があります。 Webページにテキストの数文が表示され、残りのテキストを表示できるようにそのボタンを押すように求められる場合があります。

getElementById()を使用してその機能を構築します ゲッター。このチュートリアルの最終的なコードはGitHubで確認できます。

フロントエンドの作成

HTMLとCSSを使用して簡単なフロントエンドを作成することから始めましょう。 index.htmlという名前の新しいファイルを作成し、次のコードを貼り付けます。 

<!DOCTYPE html>
<html>
    <head>
   	 <title>An Introduction to getElementById()</title>

   	 <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
   	 <div>
   		 <h1>JavaScript getElementById()</h1>
   		 <p>Are you looking to learn more about getElementById()? You've come to the right place.</p>
   		 <span id="showMore">Read more</span>
   		 <p id="hiddenText">getElementById() is a JavaScript method that allows you to select an element on a web page. This method is commonly referred to as a "getter" because it "gets" an element from a page.</p>
   	 </div>
    </body>
    <script src="scripts.js"></script>
</html>

このドキュメントでは、getElementById()に関する情報を含むボックスを定義しました。 方法。ボックスには、タイトル、2段落のテキスト、および最後の段落を表示するために使用するスパンHTMLタグが含まれています。

styles.cssというファイルを開き、次のコードを貼り付けます。 

<!DOCTYPE html>
<html>
    <head>
   	 <title>An Introduction to getElementById()</title>

   	 <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
   	 <div>
   		 <h1>JavaScript getElementById()</h1>
   		 <p>Are you looking to learn more about getElementById()? You've come to the right place.</p>
   		 <span id="showMore">Read more</span>
   		 <p id="hiddenText">getElementById() is a JavaScript method that allows you to select an element on a web page. This method is commonly referred to as a "getter" because it "gets" an element from a page.</p>
   	 </div>
    </body>
    <script src="scripts.js"></script>
</html>

このコードは、ページをより視覚的に魅力的なものにするために、ページに色を付けます。 Webページを開くと、次のように表示されます。

JavaScriptのgetElementByIdゲッターの使用方法

1つの問題があります。「続きを読む」タグは何も実行せず、テキストの最後の段落は引き続き表示されます。これは、JavaScriptコードをまだ追加していないためです。 WebページのJavaScript機能を書いてみましょう。

JavaScriptコードの追加

作業する要素を選択することから始めましょう。選択する必要のある要素は、<span>です。 タグ（「続きを読む」テキストを含む）、および表示と非表示を切り替える段落。

scripts.jsというファイルを作成し、次のコードに貼り付けます。 

var paragraph = document.getElementById("hiddenText");

paragraph.style.display = "none";

このコードでは、getElementById()を使用しました DOMドキュメントから段落を取得します。 hiddenTextドキュメントオブジェクトを選択して非表示にします。次に、テキストを切り替える関数を作成します。 

function toggleText() {
	if (paragraph.style.display === "none") {
		paragraph.style.display = "block";
	} else {
		paragraph.style.display = "none";
	}
}

まず、IDがhiddenTextの要素を選択します。 。これは、「続きを読む」をクリックしたときに表示または非表示にするテキストの段落を指します。

ifを作成しました その段落が表示されているかどうかをチェックするステートメント。表示されていない場合は、display 段落の値はblockに設定されます 、それが表示されます。それ以外の場合は、段落のdisplay 値はnoneに設定されます 、そしてそれは消えます。

コードはまだ完成していません。次に、「続きを読む」テキストをクリックするとアクティブになるイベントリスナーを作成します。 

var showButton = document.getElementById("showMore");

showButton.addEventListener("click", toggleText);

このコードは、Read moreを選択します 私たちのページのテキスト。次に、toggleText()をトリガーするイベントリスナーを設定します 「続きを読む」テキストがクリックされたときのメソッド。

それでは、Webページを開いて、Read moreをクリックしてみましょう。 文章：

JavaScriptのgetElementByIdゲッターの使用方法

私たちのコードは機能しています！ 「続きを読む」のテキストをクリックすると、テキストが表示されます。もう一度クリックすると、テキストが消えます。

結論

getElementById() getterを使用すると、WebページからIDに基づいて要素を取得できます。

あなたは挑戦を探していますか？ getElementById()を使用します テキストが表示されているときに「続きを読む」の値を「もっと読む」に変更するゲッター。さらに、ページにいくつかの画像を追加し、ボタンがクリックされたときにそれらの画像をすべて非表示にするボタンを作成することができます。

これで、getElementById()の使用を開始する準備が整いました。 プロのコーダーのようなゲッター！


  1. HTMLの<noscript>要素の使用方法

    HTMLの 要素は、JavaScriptが無効の場合に、サイト訪問者のブラウザにコンテンツを表示するために使用されます 。 たとえば、誰かがあなたのWebサイトにアクセスしたが、ブラウザでJavaScriptが無効になっているとします。彼らに知らせるために（彼らは誤ってJavaScriptをオフにした可能性があります）、 を使用します このように： 説明のために、上記のHTMLスニペットをこのCodePenに追加しました ただし、JavaScriptが無効になっていないと表示されません。 JavaScriptを（一時的に）無効にするには： ブラウザのアドレスバーに移動し、鍵のアイコ

  2. HTMLの<title>要素の使用方法

    HTMLのの使用方法を学ぶ 要素。 HTMLの 要素はウェブサイトのページタイトルを表します。 表示しているWebサイトのページタイトルを表示するには、マウスをブラウザのページタブに移動し、マウスをその上に数秒間置いたままにすると、ページ全体のタイトルがポップアップ表示されます。 これがYouTubeでやっているところです： タイトル要素を作成するには、開始と終了の を使用します タグを付け、その中にテキストを入れます： 要素にはテキストのみを含める必要があります！ 要素はドキュメント内にあります 要素： はSEOに影響します 検索エンジンのアルゴリズムは（とりわけ）