Предыдущая сборка и следующая сборка возвращает текст?

#javascript #html

#javascript #HTML #dom

Вопрос:

Может кто-нибудь пояснить, почему приведенный ниже код возвращает #text вместо ‘li’ ?

Не должен ли следующий брат первого li быть li ? Аналогично, предыдущий брат last li является li ?

 <body>
  <ul>
    <!-- comment -->
    <li id="A"></li>
    <li id="B"></li>
    <!-- comment -->
  </ul>

  <script>
    //cache selection of the ul
    var ul = document.querySelector('ul');

     //What is the nextSibling of the first li?
    console.log(ul.querySelector('#A').nextSibling.nodeName); //logs text

     //What is the previousSibling of the last li?
    console.log(ul.querySelector('#B').previousSibling.nodeName); //logs text
  </script>
</body>

Ответ №1:

Пробел между ними также является узлом. Вот почему существуют библиотеки JS. Чтобы предоставить вам такие опции, как извлечение родственных элементов.

Если исходный код HTML выглядел следующим образом:

 <ul>
<li id="A"></li><li id="B"></li>
</ul>

Это будет работать так, как вы ожидаете, потому что между li элементами нет пробелов.

Совсем недавно были введены еще два свойства, которые называются previousElementSibling и nextElementSibling , которые игнорируют этот пробел. Он работает с IE9 и выше, и другие основные браузеры поддерживают его уже некоторое время.

1. Я бы предложил включить упоминание о previousElementSibling и nextElementSibling в ваш ответ, чтобы дополнить его. И извлечение родственных элементов может быть выполнено полностью без использования каких-либо библиотек, использующих эти методы, или посредством повторных вызовов previousSibling (or next... ) в while() цикле.

2. Поддержка xyzElementSibling элементов превосходна, даже в IE9 она есть. К сожалению, IE8 этого не делает и не собирается делать так скоро, как нам всем хотелось бы. 🙂

3. Да, IE8 одной ногой в могиле!

Ответ №2:

лучше использовать ‘nextElementSibling’ и ‘previousElementSibling’