JavaScriptを使用してHTMLでコントロールを取得する方法

フロントエンド開発の継続的な発展に伴い、JavaScript は必須のスキルとなり、操作や変更を行うために HTML でコントロールを取得する必要が多くなります。この記事では、JavaScript が HTML 内のコントロールを取得する方法を紹介します。

1. 単一のコントロールの取得

HTML で単一のコントロールを取得するには、次の 2 つの方法を使用できます:

1.1. ID で取得

HTML では、各コントロールには一意の ID があり、この一意の ID を通じてコン​​トロールを取得できます。以下は例です:

<input type="text" id="user-name" value="John Doe">

次のコードを通じて上記の入力コントロールを取得できます:

var userNameInput = document.getElementById("user-name");

この時点で、userNameInput が取得された入力コントロールです。コード内で直接使用できます。

1.2. プロパティを介した取得

コントロールのプロパティを介して、対応するコントロールを取得できます。以下は例です:

<input type="text" name="user-name" value="John Doe">

次のコードを通じて上記の入力コントロールを取得できます:

var userNameInput = document.getElementsByName("user-name")[0];

この例では、getElementsByName 関数を使用して、 input control 。このコントロールには ID がないためです。

2. 複数のコントロールを取得する

HTML で同じタイプの複数のコントロールを取得する必要がある場合は、次の 2 つの方法を使用できます:

2.1. タグ名を使用するGet

タグ名を使用して、HTML 内の同じタイプのコントロールをすべて取得できます。以下は例です:

<input type="text" name="user-name" value="John Doe">

次のコードを通じてすべての入力コントロールを取得できます:

var inputs = document.getElementsByTagName("input");

現時点では、inputs はすべて入力コントロールです。

2.2. クラス名で取得

HTML 内の同じクラス名を持つすべてのコントロールをクラス名で取得できます。以下は例です:

<input type="text" class="user-input" value="John Doe">
<input type="text" class="user-input" value="john.doe@example.com">
<input type="text" class="user-input" value="+1 234 567 890">

次のコードを通じてすべての入力コントロールを取得できます:

var inputs = document.getElementsByClassName("user-input");

現時点では、inputs はすべてクラス "user-input" です。 「 」入力コントロール。

3. 概要

上記は、JavaScript が HTML コントロールを取得する方法です。 HTML でコントロールを操作する必要がある場合、後続の操作を実行する前に、まずこれらのコントロールを取得する必要があります。

以上がJavaScriptを使用してHTMLでコントロールを取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。