Показать все узлы DOM в html div - PullRequest
Новая
       3

Показать все узлы DOM в html div

0 голосов
/ 01 марта 2019

Я хочу показать все узлы моей html-страницы внутри div.

Что у меня есть (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

Таким образом, каждый узел в файле в основном

Ответы [ 3 ]

0 голосов
/ 01 марта 2019

Вы можете использовать метод JavaScript querySelectorAll, который используется для выбора всех узлов на основе переданного нами параметра.например, если мы передаем * внутрь document.querySelectorAll('*'), он выбирает все узлы в документе.«*» - универсальный селектор. 

var allNode=document.querySelectorAll('*')
console.log(allNode)
<body>
<div id="content">
<div>
    <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>
0 голосов
/ 01 марта 2019

Вы должны пройти через все узлы, чтобы получить свойство nodeName по отдельности.

Обратите внимание: , начиная с document объект имеет некоторые другие теги, такие как HTML, HEAD, 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>
0 голосов
/ 01 марта 2019

Используйте element_name.querySelectorAll('*'), чтобы получить все элементы внутри него.

var b=document.getElementById('div3')
document.querySelectorAll('*').forEach(e=>b.innerHTML+=e.nodeName + "<br>")
<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...