在 JavaScript 中使用 forEach 遍历文档元素

在 JavaScript 中，我们通常需要遍历文档元素来进行各种操作，例如取得表单元素的值、修改样式、添加事件监听器等等。其中，forEach 是一种比较常见的遍历方法。

forEach 方法

forEach 是数组对象的方法，它可以对数组中的每个元素都执行一次指定的函数。在文档中，我们可以通过获取文档中一组元素的方式来获得需要遍历的元素。

以下是 forEach 方法的基本语法：

array.forEach(function(currentValue, index, array), thisValue)

其中：

• currentValue：当前元素的值。
• index：当前元素的索引。
• array：当前数组。
• thisValue：可选的 this 值。

使用 forEach 方法遍历文档元素时，需要将文档元素转换为数组，然后再对数组使用 forEach 方法来遍历。

以下是一个简单示例：

const elements = document.querySelectorAll('.my-element');
const elementArray = Array.from(elements);
    
elementArray.forEach(function(element) {
    console.log(element);
});

上述代码会获取文档中所有类名为 my-element 的元素，并将它们转换为数组后遍历输出到控制台。

使用 forEach 遍历表单元素

在实际开发中，我们经常需要遍历表单元素以获取表单数据或者修改样式、添加事件监听器等。

以下是一个示例，使用 forEach 遍历表单元素并输出每个表单元素的值：

const form = document.forms['my-form'];
const elements = form.elements;
const elementArray = Array.from(elements);

elementArray.forEach(function(element) {
    if (element.type === 'text' || element.type === 'textarea') {
        console.log(element.value);
    }
});

上述代码会获取名为 my-form 的表单中所有文本框和文本域元素，并输出它们的值到控制台。

Markdown 格式返回代码片段

## 在 JavaScript 中使用 forEach 遍历文档元素

在 JavaScript 中，我们通常需要遍历文档元素来进行各种操作，例如取得表单元素的值、修改样式、添加事件监听器等等。其中，forEach 是一种比较常见的遍历方法。

### forEach 方法

forEach 是数组对象的方法，它可以对数组中的每个元素都执行一次指定的函数。在文档中，我们可以通过获取文档中一组元素的方式来获得需要遍历的元素。

以下是 forEach 方法的基本语法：

array.forEach(function(currentValue, index, array), thisValue)

其中：

- `currentValue`：当前元素的值。
- `index`：当前元素的索引。
- `array`：当前数组。
- `thisValue`：可选的 this 值。

使用 forEach 方法遍历文档元素时，需要将文档元素转换为数组，然后再对数组使用 forEach 方法来遍历。

以下是一个简单示例：

const elements = document.querySelectorAll('.my-element'); const elementArray = Array.from(elements);

elementArray.forEach(function(element) { console.log(element); });

上述代码会获取文档中所有类名为 `my-element` 的元素，并将它们转换为数组后遍历输出到控制台。

### 使用 forEach 遍历表单元素

在实际开发中，我们经常需要遍历表单元素以获取表单数据或者修改样式、添加事件监听器等。

以下是一个示例，使用 forEach 遍历表单元素并输出每个表单元素的值：

const form = document.forms['my-form']; const elements = form.elements; const elementArray = Array.from(elements);

elementArray.forEach(function(element) { if (element.type === 'text' || element.type === 'textarea') { console.log(element.value); } });

上述代码会获取名为 `my-form` 的表单中所有文本框和文本域元素，并输出它们的值到控制台。