HTML 控件代碼轉 JS 在編寫網頁時，我們通常要使用一些 HTML 控件來顯示特定的內容。HTML 控件包括文本框、下拉菜單、復選框等等。但是，在一些場景下，我們需要使用 JavaScript 操縱這些控件。這時，我們就需要將 HTML 控件代碼轉換成 JavaScript 代碼。在下面的段落中，我們將介紹如何將常用的 HTML 控件代碼轉換成 JavaScript 代碼。 文本框 使用文本框可以讓用戶輸入一些信息，并將這些信息傳遞到后臺程序中。在 HTML 中，我們使用以下代碼創建一個文本框：

<input type="text" id="txtName" name="txtName" value="" />

以上代碼創建了一個 ID 叫做 txtName 的文本框。要獲取文本框中的值，我們可以使用以下 JavaScript 代碼：

var name = document.getElementById("txtName").value;

以上代碼獲取了 ID 為 txtName 的文本框中的值，并將其保存在 name 變量中。 下拉菜單 使用下拉菜單可以讓用戶從多個選項中選擇一個選項。在 HTML 中，我們使用以下代碼創建一個下拉菜單：

<select id="ddlCountry">
<option value="China">中國</option>
<option value="USA">美國</option>
<option value="UK">英國</option>
</select>

以上代碼創建了一個 ID 叫做 ddlCountry 的下拉菜單，其中包含了三個選項：中國、美國和英國。要獲取用戶選擇的選項，我們可以使用以下 JavaScript 代碼：

var country = document.getElementById("ddlCountry").value;

以上代碼獲取了 ID 為 ddlCountry 的下拉菜單中選中的選項的值，并將其保存在 country 變量中。 復選框 使用復選框可以讓用戶從多個選項中選擇多個選項。在 HTML 中，我們使用以下代碼創建一個復選框：

<input type="checkbox" id="chkColor1" name="chkColor" value="Red" />紅色
<input type="checkbox" id="chkColor2" name="chkColor" value="Green" />綠色
<input type="checkbox" id="chkColor3" name="chkColor" value="Blue" />藍色

以上代碼創建了三個復選框，分別對應紅色、綠色和藍色。要獲取用戶選擇的選項，我們可以使用以下 JavaScript 代碼：

var colors = [];
var checkboxes = document.getElementsByName("chkColor");
for (var i = 0; i< checkboxes.length; ++i) {
if (checkboxes[i].checked) {
colors.push(checkboxes[i].value);
}
}

以上代碼獲取了所有名為 chkColor 的復選框中被選中的選項的值，并將其保存在 colors 數組中。注意，這里我們使用了 getElementsByTagName 方法獲取所有名為 chkColor 的復選框，而不是使用 getElementById 方法獲取單個復選框。 總結 上述是常用的 HTML 控件代碼轉換成 JavaScript 代碼的方法。在實際開發中，我們可能需要使用更多的 HTML 控件，也可能需要更復雜的操作。但是，無論我們需要什么樣的功能，我們都可以通過 JavaScript 來實現。