document.forms[].elements具体用法
时间: 2023-10-30 22:08:11 浏览: 57
`document.forms[]` 是一个 HTML DOM 对象,用于访问 HTML 表单元素。`elements` 是 `form` 对象的一个属性,用于访问表单元素集合。
具体用法如下:
1. 通过 `document.forms` 可以获取当前文档中所有的表单对象,返回的是一个表单对象数组,可以通过数组的下标访问。
```html
<form id="myForm">
<input type="text" name="username" />
<input type="password" name="password" />
</form>
```
```javascript
const form = document.forms[0]; // 获取第一个表单对象
const username = form.elements.username; // 获取表单元素对象
const password = form.elements.password;
```
2. 通过 `elements` 属性可以访问表单元素集合,返回的是一个 HTMLCollection 对象,可以通过元素的 name 或者下标访问。
```html
<form id="myForm">
<label for="username">Username:</label>
<input type="text" name="username" id="username" />
<label for="password">Password:</label>
<input type="password" name="password" id="password" />
</form>
```
```javascript
const form = document.getElementById('myForm');
const username = form.elements['username']; // 通过 name 访问
const password = form.elements[1]; // 通过下标访问
```
需要注意的是,`document.forms` 和 `elements` 属性只能获取当前文档中的表单元素,无法获取跨域文档中的表单元素。同时,表单元素的 name 属性必须唯一,否则会出现访问混淆的问题。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)