logo标签列表

使用Javascript获取所有HTML标签

javascriptjqueryhtml
6

有没有人知道如何获取页面上存在的所有HTML标签？ 我需要仅获取标签，而不带其ID或其他属性，并创建一种树形结构。 最好使用JavaScript或JQuery完成。

例如，以下是HTML代码：

<html>
  <head>
    <title>
      Example Page 
  </title>
  </head>
  < body>
    <h1 style="somestyle">
      Blabla
  </h1>
  <div id="id">
    <table id="formid">
      <tr>
        <td>
        </td>
      </tr>
      </table>
  </div>
  </body>
</html>

应该返回return:

html
head
title
body
h1
div
table
tr
td

使用 document.querySelectorAll('*') 或者递归遍历 DOM（document.body）的 .children。 - A1rPun
2
这个有什么使用场景呢？复制 DOM 并不是一件轻松的事情。 - charlietfl
https://developer.mozilla.org/en/docs/Web/API/TreeWalker - Kaiido
请澄清一下，您想要“将返回:”下面描述的输出，还是缩进的类似树形结构的版本？ - Nick McCurdy
这并不那么重要。@NicolasMcCurdy，我尝试使用querySelectorAll来实现，但它返回了很多无用的东西，而我只需要标签名。 - Gal
3个回答
10

您可以向getElementsByTagName()传递*，这样它将返回页面中的所有元素：

var all = document.getElementsByTagName("*");

for (var i=0, max=all.length; i < max; i++) {
     // Do something with the element here
}
0
我使用getElementsByTagName和.tagName来处理返回数组中的每个值。
0

这是一段非常简单的Javascript代码

document.querySelectorAll('*')

在控制台日志中尝试一下，它将向您展示文档中的所有标签。

另一个例子是使用getElementsByTagName

这些会打印成一个数组，因此您可以遍历元素并对不同的元素执行不同的操作。

例如：

var items = document.getElementsByTagName("*");
for (var i = 0; i < items.length; i++) {
    //do stuff
}
另外，为了增加一些信息，每个HTML元素都有一个“tagName”属性，它提供了您要查找的基本名称。默认情况下是大写的。 - Katana314
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接