Question

有谁知道如何获取页面中存在的所有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

头戴式＆GT;标题
体 - ＆GT; H1，（DIV - ＆GT;表 - ＆GT; TR - ＆GT; TD，TD）

Answer 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。如果你想要一个数组数组，你可以对Array.from的结果使用querySelectorAll（必要时填充它，因为它相对较新）。

当然有十几种方法可以解决这个问题。例如，一个对象数组：

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

Answer 2

此功能可以帮助您。如果您在服务器端使用它，请创建一个DTO，其键和值为astibute作为String数据类型。您可以选择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

使用Javascript / JQuery获取id和类名称的所有html标记（父标记和子标记）

2 个答案: