javascript - 在 html div 中显示所有 DOM 节点

标签 javascript html nodes

我想在一个 div 中显示我的 html 页面的所有节点。

到目前为止我有什么(js):

var nodes = document.getElementsByTagName("*");
div3.innerHTML = nodes;

和 html:

<body>
  <div id="content">
    <div id="1-1">
      <div id="div1"></div><br>
      <div id="div2"></div><br>
      <div id="div3"></div><br>
      <div id="div4"></div><br>
      <div id="div5"></div>
    </div>
  </div>

  <script src="script201.js" rel="text/javascript"></script>

</body>

我从 div3 中的这段代码得到的输出:[object HTMLCollection] 如何让所有节点显示如下:

BODY
DIV
DIV
DIV
DIV
DIV
DIV
DIV
SCRIPT

所以基本上文件中的每个节点

最佳答案

您必须遍历所有节点,以便单独获得 nodeName 属性。

请注意:由于 document 对象有一些其他标签,如 HTMLHEAD, STLYLE, SCRIPT 等,所有这些都将使用 * 选择器作为目标。

var nodes = [...document.getElementsByTagName("*")];
nodes.forEach(function(el){
  div3.innerHTML += el.nodeName + ' ';
})
<body>
  <div id="content">
    <div id="1-1">
        <div id="div1"></div><br>
        <div id="div2"></div><br>
        <div id="div3"></div><br>
        <div id="div4"></div><br>
        <div id="div5"></div>
    </div>
  </div>

  <script src="script201.js" rel="text/javascript"></script>

</body>

关于javascript - 在 html div 中显示所有 DOM 节点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54942106/

相关文章:

javascript - 如何获取两个日期之间的小时数差异

javascript - 检查每个单词是否存在于数据库中

java - 在 JavaFX 中动态添加组件

jquery - 删除固定类并不能正确地将它们从演示文稿中删除

php - 使用PHP和Xpath解析XML时无法访问子节点

javascript - 为什么 onChange 会使 Internet Explorer 7 崩溃?

javascript - ECMA 2015/ES6 弃用了哪些语言结构或 API?

javascript - 将缩进文本转换为 HTML 列表的 jQuery 脚本中出现错误

javascript - 带有图像工具提示的幻灯片库,图像突破无限宽度 block

javascript - 第一个下拉菜单选择第二个和第三个下拉菜单