Как вытащить значения из всех под-элементов div'a?

Question

[andrey_levushkin]

Имеется такой элемент:

<div id="spisok">
    <div id="elem1">
        <p id="elem1p">
            <br>Элемент 1
            <button>Кнопка</button>
        </p>
    </div>
    <div id="elem2">
        <p id="elem2p">
            <br>Элемент2
            <button>Кнопка</button>
        </p>
    </div>
....
    <div id="elemN">
        <p id="elemNp">
            <br>ЭлементN
            <button>Кнопка</button>
        </p>
    </div>
</div>

Каким образом можно пройтись по div с id="spisok",
чтобы получить в итоге строку/массив значений вида:
Элемент 1
Элемент 2
...
Элемент 3

Answer 1

[0xD34F]

const result = Array.from(
  document.querySelectorAll('#spisok > div > p > br'),
  n => n.nextSibling.textContent.trim()
);

или

const result = Array.prototype.map.call(
  document.getElementById('spisok').getElementsByTagName('button'),
  n => n.previousSibling.nodeValue.replace(/(^\s+)|(\s+$)/g, '')
);

Comments

[antonwx]

Нифига себе JS эволюционировал за всё это время. В то время, когда я пытался ковырять веб, такие фокусы можно было только jQuery каким-нибудь вытворять, да и то не все.

[Вадим]

antonwx, Вы не поверите - jquery на 100% состоит из JavaScript :-)