javascript如何取得html中的控件

隨著前端開發的不斷發展， JavaScript 已經成為了一種必備的技能，很多時候我們需要在 HTML 中取得控制項來進行操作或更改。本文將介紹 JavaScript 如何取得 HTML 中的控制項。

1. 取得單一控件

要取得HTML 中的單一控件，我們可以使用以下兩種方法：

1.1. 透過ID 取得

在HTML 中，每個控制項都有一個唯一ID，我們可以透過這個唯一ID 取得到一個控制項。以下是一個範例：

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

我們可以透過以下程式碼來取得上述input 控制項：

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

此時，userNameInput 就是取得到的這個input 控件，在之後的程式碼中就可以直接使用了。

1.2. 透過屬性取得

我們可以透過控制項的屬性來取得到對應的控制項。以下是一個範例：

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

我們可以透過以下程式碼來取得上述input 控制項：

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

在這個範例中，我們使用了getElementsByName 函數來取得input 控制項，因為這個控制項並沒有ID。

2. 取得多個控件

如果我們需要取得HTML 中多個相同類型的控件，我們可以使用以下兩個方法：

2.1. 透過標籤名取得

我們可以透過標籤名稱來取得HTML 中所有相同類型的控制項。以下是一個例子：

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

我們可以透過以下程式碼來取得所有的 input 控制項：

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

此時，inputs 就是所有的 input 控制項。

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">

我們可以透過以下程式碼來取得所有的input 控制項：

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

此時，inputs 就是所有的class 為"user-input " 的input 控制項。

3. 總結

以上就是 JavaScript 取得 HTML 控制項的方法。當我們需要對 HTML 中的控件進行操作時，首先需要取得到這些控件，才能進行後續的操作。

以上是javascript如何取得html中的控件的詳細內容。更多資訊請關注PHP中文網其他相關文章！