如何使用 HTML DOM 从页面元素中获取数据并输出为数组？-html教程-PHP中文网

如何使用 HTML DOM 从页面元素中获取数据并输出为数组？

DDD

发布： 2024-10-28 08:30:13

原创

822人浏览过

如何使用 HTML DOM 从页面元素中获取数据并输出为数组？

html dom 输出数据数组

解决思路

使用 HTML DOM 获取页面元素，再通过innerText属性获取每个元素的文本内容，就可以将数据输出为数组。

具体步骤：

监听“保存”按钮的点击事件，获取姓名和年龄输入框的值。
使用innerHTML将新的一行数据添加到列表中。
监听“上传”按钮的点击事件，获取列表中的所有行元素。
遍历行元素，获取姓名和年龄的文本内容，并将其推入数组中。
在控制台中输出数组。

常见问题及解决方案：

立即学习“前端免费学习笔记（深入）”；

即构数智人

即构数智人是由即构科技推出的AI虚拟数字人视频创作平台，支持数字人形象定制、短视频创作、数字人直播等。

查看详情

问题：遍历行元素时，会出现foreach不是Array对象的函数的错误。
- 解决方案：使用扩展运算符...将类数组转换为真正的数组。
问题：输出的数组中包含空白行。
- 解决方案：在遍历行元素时，增加一个过滤逻辑，只将存在td单元格的行元素推入数组中。

优化后的代码：

//上传
document.getElementById("upload").addEventListener("click", () => {
  let listElement = document.getElementById("list");
  let lineElement = [...listElement.querySelectorAll("tr")];
  let result = [];
  lineElement.forEach((item) => {
    let tds = item.querySelectorAll("td");
    if (tds.length) {
      let name = tds[0].innerText;
      let age = tds[1].innerText;
      result.push({ name, age });
    }
  });
  console.log(result);
});

登录后复制

以上就是如何使用 HTML DOM 从页面元素中获取数据并输出为数组？的详细内容，更多请关注php中文网其它相关文章！