html dom 输出数据数组
解决思路
使用 HTML DOM 获取页面元素，再通过innerText属性获取每个元素的文本内容，就可以将数据输出为数组。
具体步骤：
监听“保存”按钮的点击事件，获取姓名和年龄输入框的值。使用innerHTML将新的一行数据添加到列表中。监听“上传”按钮的点击事件，获取列表中的所有行元素。遍历行元素，获取姓名和年龄的文本内容，并将其推入数组中。在控制台中输出数组。
常见问题及解决方案：
立即学习“前端免费学习笔记（深入）”；
问题：遍历行元素时，会出现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 从页面元素中获取数据并输出为数组？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2808641.html
