«child» — получение списка дочерних узлов

Octane, 24.07.2008

Функция child возвращает массив дочерних элементов текущего узла.

Входные параметры

  1. Первый параметр используется для выбора элементов по имени тега. Необязательный.

    • child() — пустое значение, функция вернет массив всех дочерних узлов.
    • child('div') — cтрока с именем тега, функция вернет массив дочерних узлов с именем тега DIV.
    • child('div h1 p') — строка со списком имен тегов, разделенных пробелами, функция вернет массив дочерних элементов с именами тегов DIV, H1 и P.
    • child(['div', 'h1', 'p']) — массив строк с именами тегов, результат выполнения функции аналогичен предыдущему пункту.
  2. Второй параметр логического типа так же необязателен и используется для переключения режима поиска дочерних элементов. Может принимать пустое значение или true. Если указано значение true, то будут выбраны все дочерние элементы, текущего узла, соответствующие критериям поиска, указанным в первом параметре, иначе — только непосредственно дочерние по отношению к текущему узлу. Допускается сочетание этого параметра со всеми вариантами первого параметра:

    • child(true)
    • child('div', true)
    • child('div h1 p', true)
    • child(['div', 'h1', 'p'], true)

Пример использования

var childArray = $('test').child('li');

В переменную childArray будет помещен массив элементов, с именем тега LI, являющихся непосредственно потомками текущего узла с идентификатором test.

Аналог без использования фреймворка

function child(id, tag) {
  var node = document.getElementById(id),
  children = node.childNodes,
  i, length = children.length, array = [];
  tag = tag.toUpperCase();
  for(i = 0; i < length; i++) {
    if(children[i].tagName == tag) {
      array.push(children[i]);
    }
  }
  return array;
}

var childArray = child('test', 'li');

Подписаться на обновления блога

Вам понравился наш блог, хотите следить за обновлениями? Подпишитесь на RSS рассылку или рассылку по электронной почте. Так же вы можете следить за нами в Twitter.

Категории: js-core, Работа с DOM | Комментировать

Комментарии

  1. Василий Степанович / 15.01.2016 в 17:12

    В аналоге без использования фреймворка если не указать аргумент tag при вызове функции, то функция вернёт пустой массив вместо списка всех дочерних элементов.

    Для исправления проблемы надо улучшить проверку:

    Сейчас так:
    if(children[i].tagName == tag) {
    array.push(children[i]);
    }

    А надо так:
    if (tag) {
    if(children[i].tagName == tag) {
    array.push(children[i]);
    }
    } else {
    // добавляем ЛЮБОЙ дочерний тег,
    // т.к. правило выборки не задано:
    array.push(children[i]);
    };

  2. Кирилл / 23.01.2017 в 22:38

    Статья несколько не новая, но возможно кому-нибудь будет полезен перевод спецификации DOM4 (который является последним стандартом на данный момент): http://topolyan.com/w3c/w3c-dom4-ru.html

    Уже оставил подобный комментарий, но тут тоже уместно.

Оставить комментарий

480×60
480×60