Как пройти DOM и отобразить все теги? - PullRequest
Новая
       0

Как пройти DOM и отобразить все теги?

1 голос
/ 28 октября 2019

Я хочу обойти дерево DOM и отобразить все его элементы и их графики. Я застрял с этим решением, но это плохо. Мне нужно сделать рекурсивную функцию, но я не очень хорош в этом.

Результат программы 

const First = document.querySelector("*");
  for (var i = 0; i < First.children.length; i++) {
      console.log(First.children[i]);
  for (var j = 0; j < First.children[i].children.length; j++) {
    if (First.nodeType == 1) {
       console.log(First.children[i].children[j]);
    }
  }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
  <h1>Header</h1>
  <p>Some text
     <a href="#">References</a>
  </p>
  <ul id="myList">
    <li>One</li>
    <li>Two</li>
    <li>Tree</li>
  </ul>
</body>
</html>

Ответы [ 2 ]

2 голосов
/ 28 октября 2019

Если вы используете document.querySelectorAll("*"), нет необходимости в рекурсии.

Я добавил второе (с отступом) решение с помощью рекурсивной функции, которую я написал "карри": функция rtl(ind)фактически возвращает другую (анонимную) функцию с аргументом родительского узла: 

console.log([...document.querySelectorAll('*')].map(e=>e.nodeName).join(', '));

// for indentation use a modified recursive function 
// as written by kemicofa:

function rtl(ind=''){return function(parent=document.body){
  console.log(ind+parent.tagName);
  if(parent.children.length > 0){[...parent.children].forEach(rtl(ind+'  '));}
}}

rtl()();
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
  <h1>Header</h1>
  <p>Some text
     <a href="#">References</a>
  </p>
  <ul id="myList">
    <li>One</li>
    <li>Two</li>
    <li>Tree</li>
  </ul>
</body>
</html>
2 голосов
/ 28 октября 2019

Вот рекурсивная реализация, которая проверяет каждый «родительский» элемент, чтобы увидеть, имеет ли он более 0 дочерних элементов. Если это так, прокрутите дочерние элементы, вызовите функцию и установите «нового» родителя. 

function recursiveTagLister(parent = document.body, depth = 0){
  const indentation = (new Array(depth)).fill('&nbsp;').join("");
  console.log(indentation + parent.tagName);
  if(parent.children.length > 0){
    Array
    .from(parent.children)
    .forEach(item=>recursiveTagLister(item, depth+1));
  }
}

recursiveTagLister();
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
  <h1>Header</h1>
  <p>Some text
     <a href="#">References</a>
  </p>
  <ul id="myList">
    <li>One</li>
    <li>Two</li>
    <li>Tree</li>
  </ul>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...