Блог

Главная - Вопросы по программированию - Получить все дочерние элементы каждого дочернего элемента элемента в JavaScript

Получить все дочерние элементы каждого дочернего элемента элемента в JavaScript

#javascript #html #children

#javascript #HTML #дочерние элементы

Вопрос:

Допустим, у меня есть элемент, document.createElement("div") назовем его myDiv myDiv.innerHTML = "<div><p></p></div>" , который myDiv теперь имеет дочерний элемент: a div . И у этого div есть дочерний элемент, a p . Я знаю, что могу получить myDiv дочерние элементы, используя myDiv.childNodes , и div с помощью myDiv.childNodes[0].childNodes . Но теперь, как я могу получить все дочерние элементы каждого дочернего элемента, как и все дочерние элементы, которые существуют? Пример:

 myDiv.innerHTML = "<div><p></p><i></i></div></p></p>"
myDiv.someMethod((childs) => {
   // childs should return the `div`, the `div`'s childs (`p` amp; `i`) and `p` 
})

Комментарии:

1. Вам не нужно знать, какие из них являются дочерними, а какие внуками, тем более, чьи они внуки? В какой форме вы хотите вернуть все эти узлы?

2. Все в массиве, даже если некоторые из них являются дочерними, а некоторые другими и внуками.

3. Как насчет использования querySelectorAll? const childArray = Array.prototype.slice.call(myDiv.querySelectorAll(‘*’))

Ответ №1:

вы можете использовать Element.querySelectorAll 

 let div = document.createElement('div');
div.innerHTML = `<div><p></p><i></i></div><p></p>`;

console.log([...div.querySelectorAll('*')])