问题分析：使用html dom输出数组
在该问题中，我们是通过HTML DOM来实现对数组的输出，具体做法是点击“保存”按钮添加数据行到列表中，然后点击“上传”按钮输出列表数据为数组形式。
实现方法
获取输入值：保存按钮的点击事件中，获取输入姓名和年龄的值，并拼接成列表中的一行数据（）；动态添加数据行：将拼接好的列表行添加到table中的tbody（list）中；上传输出：上传按钮的点击事件中，获取table中的所有数据行，遍历每一行，提取姓名和年龄值，并推入到result数组中；输出结果：最后，将result数组的内容打印到控制台。
解决方案
然而，在提供的问题代码中，有两个问题：
立即学习“前端免费学习笔记（深入）”；
不能直接使用foreach遍历NodeList：NodeList虽然类似数组，但本质上不是数组，不能直接使用foreach遍历，需要借助展开运算符(…)将其转换为真正的数组；内部HTML拼接导致多余的td：innerHTML拼接时会在每一行后多拼接一个带有空格的td，需要过滤掉这样的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/2808636.html
