怎么把页面的数据写到数组中js例子

要将页面的数据写到数组中，您可以使用DOM选择器、事件监听、数组方法等技术。以获取页面数据并将其存储到JavaScript数组中。以下是一个具体的例子：

1. 获取表单数据并存储到数组中

要从页面的表单获取数据并将其存储到数组中，您可以使用以下步骤：

一、创建HTML页面

首先，创建一个简单的HTML表单页面：

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Data to Array</title>
</head>
<body>
    <form id="dataForm">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name"><br><br>
        <label for="age">Age:</label>
        <input type="text" id="age" name="age"><br><br>
        <button type="button" id="submitBtn">Submit</button>
    </form>
    <script src="script.js"></script>
</body>
</html>

二、编写JavaScript代码

接下来，在script.js文件中编写JavaScript代码，以获取表单数据并将其存储到数组中：

document.addEventListener('DOMContentLoaded', () => {

    const form = document.getElementById('dataForm');
    const submitBtn = document.getElementById('submitBtn');
    let dataArray = [];
    submitBtn.addEventListener('click', () => {
        const name = document.getElementById('name').value;
        const age = document.getElementById('age').value;
        if (name && age) {
            dataArray.push({ name, age });
            console.log(dataArray);
            alert('Data added to array!');
        } else {
            alert('Please fill in all fields.');
        }
    });
});

三、解释代码

在上述代码中，我们首先通过document.addEventListener('DOMContentLoaded')确保DOM内容加载完毕后再执行代码。 然后，我们获取表单和按钮的引用，并初始化一个空数组dataArray。

当用户点击提交按钮时，通过监听器捕捉点击事件，获取表单数据并将其存储到dataArray中。最后，我们使用console.log输出数组内容以供调试，并通过alert向用户提示数据已被添加到数组中。

四、使用表格数据

如果您需要从一个表格获取数据并存储到数组中，可以使用以下步骤：

HTML 表格

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table Data to Array</title>
</head>
<body>
    <table id="dataTable">
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>John</td>
            <td>25</td>
        </tr>
        <tr>
            <td>Jane</td>
            <td>30</td>
        </tr>
    </table>
    <button type="button" id="extractBtn">Extract Data</button>
    <script src="tableScript.js"></script>
</body>
</html>

JavaScript 代码

document.addEventListener('DOMContentLoaded', () => {

    const extractBtn = document.getElementById('extractBtn');
    let tableDataArray = [];
    extractBtn.addEventListener('click', () => {
        const table = document.getElementById('dataTable');
        const rows = table.getElementsByTagName('tr');
        for (let i = 1; i < rows.length; i++) {
            const cells = rows[i].getElementsByTagName('td');
            const name = cells[0].innerText;
            const age = cells[1].innerText;
            tableDataArray.push({ name, age });
        }
        console.log(tableDataArray);
        alert('Table data added to array!');
    });
});

五、解释代码

在这个例子中，我们首先通过获取表格和按钮的引用，并初始化一个空数组tableDataArray。当用户点击按钮时，通过监听器捕捉点击事件，遍历表格的每一行，获取单元格数据并将其存储到tableDataArray中。

六、使用Fetch API获取数据

如果需要从外部API获取数据并存储到数组中，可以使用Fetch API：

document.addEventListener('DOMContentLoaded', () => {

    const fetchDataBtn = document.getElementById('fetchDataBtn');
    let apiDataArray = [];
    fetchDataBtn.addEventListener('click', () => {
        fetch('https://jsonplaceholder.typicode.com/users')
            .then(response => response.json())
            .then(data => {
                apiDataArray = data.map(user => ({
                    id: user.id,
                    name: user.name,
                    email: user.email
                }));
                console.log(apiDataArray);
                alert('API data added to array!');
            })
            .catch(error => console.error('Error fetching data:', error));
    });
});

在这个例子中，我们使用Fetch API从外部API获取数据，并将其存储到apiDataArray中。

总结

通过使用DOM选择器、事件监听和数组方法，您可以轻松地将页面数据写入JavaScript数组中。无论是从表单、表格还是外部API获取数据，这些技术都非常实用且易于实现。上述示例展示了这些技术的实际应用，帮助您更好地理解和掌握这些技能。

相关问答FAQs：

Q: 如何将页面中的数据写入到JavaScript数组中？

A: 将页面数据写入JavaScript数组是一种常见的操作，您可以按照以下步骤进行操作：

1. 如何获取页面中的数据？
   您可以使用JavaScript中的DOM操作方法，如getElementById、getElementsByClassName或querySelectorAll来获取页面中特定元素的数据。例如，通过使用getElementById方法获取具有特定ID的元素的值。

2. 如何将获取的数据写入数组？
   在获取到数据后，您可以使用JavaScript中的数组方法，如push或直接通过索引赋值的方式，将数据写入数组中。例如，使用push方法将获取到的值添加到数组的末尾。

3. 如何遍历数组并使用其中的数据？
   一旦将数据写入数组，您可以使用JavaScript的循环结构，如for循环或forEach方法，遍历数组并使用其中的数据。

下面是一个示例代码，演示了将页面中特定元素的数据写入到JavaScript数组中的过程：

// 获取页面中的特定元素
var elements = document.getElementsByClassName('example');

// 创建一个空数组，用于存储数据
var dataArray = [];

// 将获取到的数据写入数组
for (var i = 0; i < elements.length; i++) {
  dataArray.push(elements[i].value);
}

// 遍历数组并使用其中的数据
dataArray.forEach(function(data) {
  // 在此处对数据进行处理或其他操作
  console.log(data);
});

请注意，上述示例代码仅为演示目的，您需要根据实际情况进行适当的调整和修改。