Почему previousSibling надо писать 2 раза?

Question

[Gabe Jonson]

Есть такая структура:

<h2>Repeating from here</h2>
    <section class="repeating">
      <label>
        <input type="text" name="heading[0]" id="" />
      </label>
      <label>
        <input type="text" name="" id="" />
      </label>
      <label>
        <input type="text" name="" id="" />
      </label>
    </section>
    <button class="push-to-add">Push to add</button>

По логике вещей, чтобы добраться до класса repeating, надо написать:

document.querySelector('.push-to-add').previousSibling

НО! Нифига... Работает только с

document.querySelector('.push-to-add').previousSibling.previousSibling

, только тогда он достанет предыдущий элемент. И вот вопрос, почему так?

Answer 1

[Алексей Уколов]

Потому что в previousSibling попадают и текстовые ноды (пробелы между тегами, иначе говоря). В этом легко убедиться, выведя в консоль результат выражения

document.querySelector('.push-to-add').previousSibling

А чтобы увидеть все узлы на этом уровне, выполните

console.dir(document.querySelector('.push-to-add').parentElement.childNodes)

Вам в данном случае нужно использовать previousElementSibling или убрать пробел между тегами, чтобы исчез текстовый узел, возникающий между этими элементами:
</section><button class="push-to-add">