：點上面關注免費學習前端知識！

可以像訪問頁面中的其他元素一樣，使用原生DOM方法訪問表單元素。此外，每個表單都有 elements 屬性，該屬性是表單中所有元素的集合。這個 elements 集合是一個有序列表，其中包含著表單中的所有欄位，例如 <input> 、 <textarea> 、 <button>和 <fieldset> 。每個表單欄位在 elements 集合中的順序，與它們出現在標記中的順序相同，可以按照位置和 name 特性來訪問它們。下面來看一個例子。

var form = document.getElementById(“form1”);

//取得表單中的第一個欄位

var field1 = form.elements[0];

//取得名為“textbox1”的欄位

var field2 = form.elements[“textbox1”];

//取得表單中包含的欄位的數量

var fieldCount = form.elements.length;

如果有多個表單控制元件都在使用一個 name （如單選按鈕），那麼就會返回以該 name 命名的一個 NodeList 。例如，以下面的HTML程式碼片段為例。

<form method=“post” id=“myForm”>

<ul>

    <li><input type=“radio” name=“color” value=“red”>Red</li>

    <li><input type=“radio” name=“color” value=“green”>Green</li>

    <li><input type=“radio” name=“color” value=“blue”>Blue</li>

</ul>

</form>

在這個HTML表單中，有3個單選按鈕，它們的 name 都是 “color” ，意味著這3個欄位是一起的。在訪問 elements[“color”] 時，就會返回一下 NodeList ，其中包含這3個元素；不過，如果訪問 elements[0] ，則只會返回第一個元素。來看下面的例子。

var form = document.getElementById(“myForm”);

var colorFields = form.elements[“color”];

alert(colorFields.length); //3

var firstColorField = colorFields[0];

var firstFormField = form.elements[0];

alert(firstColorField === firstFormField); //true

以上程式碼顯示，通過 form.elements[0] 訪問到的第一個表單欄位，與包含在form.elements[“color”] 中的第一個元素相同。

也可以通過訪問表單的屬性來訪問元素，例如 form[0] 可以取得第一個表單欄位，而 form[“color”] 則可以取得第一個命名欄位。這些屬性與通過 elements集合訪問到的元素是相同的。但是，我們應該儘可能使用 elements ，通過表單屬性訪問元素只是為了與舊瀏覽器向後相容而保留的一種過渡方式。

完

看前端技術文章，就在Web前端精髓