Мастер-классы по Javascript Екатеринбург Ростов-на-Дону Москва Узнать больше...
Содержание (скрыть) Содержание (показать)

Найти следующий элемент

Напишите функцию getNextElement(elem), которая возвращает следующий за elem узел-элемент (игнорирует остальные узлы).

Пример:

<div>Первый</div>
<!-- комментарий... -->
<p>Второй</p>

<script>
function getNextElement(elem) { /* ваш код */ }

*!*
alert(getNextElement(document.body.children[0]).tagName); // "P"
alert(getNextElement(document.body.lastChild)); // null
*/!*
</script>

P.S. Функция должна работать максимально эффективно и учитывать возможности современных браузеров.

Менее эффективный вариант
Решение
Менее эффективный вариант

Цикл по правым соседям в поисках узла-элемента:

<div>Первый</div>
<!-- комментарий... -->
<p>Второй</p>

<script>
*!*
function getNextElement(elem) {
  var current = elem.nextSibling;

  while(current && current.nodeType != 1) {
    current = current.nextSibling;
  }
 
  // два варианта окончания цикла:
  // current == null (нет следующего узла-элемента)
  // current.nodeType == 1 (нашли)
  return current;
}
*/!*

alert(getNextElement(document.body.children[0]).tagName); // "P"
alert(getNextElement(document.body.lastChild)); // null
</script>

Более эффективный вариант
Более эффективный вариант

Все браузеры, кроме IE<9, поддерживают свойство nextElementSibling. Воспользуемся этим.

Проверим поддержку этого свойства, и если она есть — определим функцию как обёртку над ним, а если нет — используем вариант, описанный выше.

<div>Первый</div>
<!-- комментарий... -->
<p>Второй</p>

<script>
*!*
if (document.documentElement.nextElementSibling !== undefined) {
  var getNextElement = function(elem) {
    return elem.nextElementSibling;
  }
} else {
  var getNextElement = function(elem) {
    var current = elem.nextSibling;
    while(current && current.nodeType != 1) {
      current = current.nextSibling;
    }
    return current;
  }
}
*/!*

alert(getNextElement(document.body.children[0]).tagName); // "P"
alert(getNextElement(document.body.lastChild)); // null
</script>

В браузерах, которые не знают о nextElementChildren (IE<9), это свойство всегда равно undefined (вторая ветка if), а в других null, т.к. у <html> нет правого соседа-элемента (первая ветка if).

#444
Наверх

Реклама

Нашли опечатку?

Нашли опечатку на сайте? Что-то кажется странным?
Выделите соответствующий текст и нажмите Ctrl+Enter!

Последние Комментарии

Помоги другим!

Помоги другим узнать о хорошей статье!