JS输出所有div的id属性

在JavaScript中，可通过document.getElementsByTagName()获取页面所有div元素，再利用.id属性读取其id值。本文将详细讲解具体实现步骤，帮助理解如何遍历div并提取id信息，从而实现对页面元素的有效操作与控制。

1、 创建一个名为test.html的页面，通过JavaScript演示如何获取并输出页面中所有div元素的id属性值。

2、 在test.html中添加四个div，其中三个设置id属性，并创建一个按钮用于触发获取这些div的id值操作。

3、 为按钮绑定点击事件，当触发点击时调用handleAllTags函数，获取页面中所有div元素的id属性值。

4、 在 handleAllTags() 函数中，通过调用 document.getElementsByTagName() 方法获取页面中所有 div 元素，并将返回的元素集合赋值给变量 arrayOfDocFonts，以便后续操作和处理这些 DOM 节点，实现对页面结构的动态访问与控制。

5、 在handleAllTags函数中，通过length属性获取arrayOfDocFonts的长度，并利用for循环遍历该数组以取得每个div元素。

6、 在handleAllTags()函数中，通过.id获取每个div元素的id属性，并将其依次存入数组arr中。具体实现代码如下所示。

7、 通过document.write()方法将数组arr中的元素输出到页面，即显示当前页面中所有div标签的id属性。运行test.html文件并在浏览器中查看结果，页面成功显示出所有div的id值，验证了获取操作的正确性。