JavaScript中document.forms[0]与getElementByName区别

在JavaScript中获取表单元素，有两种常见的方式：利用document.forms与利用document.getElementsByName，这两种方式的使用有着许多的不同之处。

document.forms[0]的使用

document.forms属性返回当前文档中所有表单的集合，可以通过下标进行访问，如document.forms[0]就表示获取页面中第一个表单元素。

例如，假设有以下的HTML代码：

<form id="myForm">
    <label for="username">用户名:</label>
    <input type="text" name="username" id="username">
    <label for="password">密码:</label>
    <input type="password" name="password" id="password">
    <input type="submit" value="提交">
</form>

可以通过以下方式获取到表单元素：

var myForm = document.forms[0];

然后就可以通过表单元素的name或id属性来获取输入框的值，如：

var username = myForm.username.value;
var password = myForm.password.value;

document.getElementsByName的使用

document.getElementsByName方法根据指定的表单元素的name属性值或标签名，返回具有指定名称/标签的所有元素的集合。该方法返回的是一个NodeList类型的集合对象。

例如，假设有以下的HTML代码：

<form>
    <label for="username">用户名:</label>
    <input type="text" name="username" id="username">
    <label for="password">密码:</label>
    <input type="password" name="password" id="password">
    <input type="submit" value="提交">
</form>

可以通过以下方式获取到表单元素：

var usernameInput = document.getElementsByName("username")[0];
var passwordInput = document.getElementsByName("password")[0];

然后就可以通过表单元素的value属性来获取输入框的值，如：

var username = usernameInput.value;
var password = passwordInput.value;

两种方式的区别

• document.forms返回的是表单集合，而document.getElementsByName返回的是指定名称/标签的元素集合。
• document.forms返回的集合对象是一个HTMLCollection类型的对象，而document.getElementsByName返回的是一个NodeList类型的对象。
• document.forms只能通过访问表单元素的下标或id属性来访问表单元素，而document.getElementsByName可以通过访问表单元素的name或id属性来访问表单元素。

因此，当页面中只有一个表单元素时，使用document.forms[0]和document.getElementsByName("formName")[0]可以得到相同的结果，但在页面中有多个表单元素时，document.forms[0]会返回第一个表单元素，而document.getElementsByName返回指定的所有表单元素。

总之，在实际使用中需要根据具体情况，选择不同的方式访问表单元素。