使用 Javascript/JQuery 获取所有带有 id 和类名的 html 标签（父标签和子标签）答案

【问题标题】：Get all html tags(parent and child tags) with id and class name with Javascript/JQuery使用 Javascript/JQuery 获取所有带有 id 和类名的 html 标签（父标签和子标签）
【发布时间】：2017-08-07 13:22:33
【问题描述】：

有人知道如何获取页面中存在的所有 HTML 标记吗？

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

这会得到所有的标签，但我的要求是

获取第一个父标签及其下的所有子标签
获取下一个父标签及其下的所有子标签，以此类推

我需要以一种树状结构获取标签。更喜欢使用 Javascript 或 JQuery。

例如：

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

应该返回：

html

head->title
body-->h1,(div-->table-->tr-->td,td)

【问题讨论】：

"Javascript 或 JQuery" jQuery 不是一种语言。您的意思是“...在 JavaScript 中直接使用 DOM 或使用 jQuery。”
“我需要以一种树状结构获取标签。” 它们不是标签，它们是元素。（“标签”是一个文本概念。）它们已经在一个树结构中：DOM。
我需要将这些元素存储在一个列表/变量中，以便在不同的概念中使用。例如，假设我在第一个循环中获取 head 元素并将该元素分配给 var 并查看 head 下是否有任何子元素并将这些值分配给另一个变量。
我的回答向您展示了您将使用什么来做到这一点。（我以为你想要一个数组而不仅仅是循环中的变量，但调整它很容易。）
Idd 使用document.documentElement.children[0].children[0].children 等等（如果你愿意，还可以使用 children.length）。

标签： javascript jquery html

【解决方案1】：

document.documentElement 是树的根 (html)。然后，您可以通过children 获取其所有子元素（childNodes 将包括非元素子元素），并使用querySelectorAll("*") 按文档顺序获取它们的后代：

var results = Array.prototype.map.call(
    document.documentElement.children,
    function(element) {
    return element.querySelectorAll("*");
});

Live example

results 将是一个数组，其中包含html 元素的每个直接子元素的条目，其中每个元素都是一个NodeList。如果你想要一个数组数组，你可以在querySelectorAll 的结果上使用Array.from（如果需要，可以填充它，因为它相对较新）。

当然，有十几种方法可以旋转它。例如，改为一个对象数组：

var results = Array.prototype.map.call(
    document.documentElement.children,
    function(element) {
    return {
         element: element,
         descendants: Array.from(element.querySelectorAll("*"))
    };
});

【讨论】：

【解决方案2】：

这个功能可以帮到你。如果您在服务器端使用它，请创建一个 DTO，其键和值作为字符串数据类型的属性。您可以选择 body 或 html 作为基础。

function myFunction() {
    var c = document.body.children;
    var txt = "";
    var i;
    var ListOfMap=[];


    for (i = 0; i < c.length; i++) {
       var map={};
       var key=c[i].tagName;
     //console.log("key::::"+key);
   //  console.log("value::::"+document.getElementsByTagName(c[i].tagName)[0].textContent);
       if(key !== 'undefined' && typeof key !== undefined){
           map.key=c[i].tagName;
           map.value=document.getElementsByTagName(c[i].tagName)[0].textContent;
           txt=txt+ document.getElementsByTagName(c[i].tagName)[0].textContent+"</br>";
       }
       ListOfMap.push(map);
    }

    document.getElementById("demo").innerHTML = txt;
    console.log(JSON.stringify(ListOfMap));
    return ListOfMap;
}

工作示例：https://plnkr.co/edit/5FIbffmTZ3xkRG5GCBhK?p=preview

【讨论】：