Лучший способ получить дочерние узлы

Мне было интересно, JavaScript предлагает множество методов для получения первого дочернего элемента из любого элемента, но какой из них лучший? Под лучшими я имею в виду: кросс-браузерную совместимость, быструю, наиболее полную и предсказуемую, когда дело доходит до поведения. Список методов / свойств, которые я использую как псевдонимы:

var elem = document.getElementById('container');
var child = elem.children[0];
var child = elem.firstElementChild; // == children[0]

Это работает для обоих случаев:

var child = elem.childNodes[0]; // or childNodes[1], see below

Это в случае форм или <div>итерации. Если я могу встретить текстовые элементы:

var child = elem.childNodes; // treat as NodeList
var child = elem.firstChild;

Насколько я могу понять, firstChildиспользует NodeList из childNodesи firstElementChildиспользует children. Я основываю это предположение на ссылке MDN:

childNodeявляется ссылкой на первый дочерний элемент узла элемента или, nullесли его нет.

Я предполагаю, что с точки зрения скорости, разница, если таковая имеется, будет почти нулевой, поскольку firstElementChildфактически является ссылкой children[0]на childrenобъект , и объект в любом случае уже находится в памяти.

Что бросает меня, это childNodesобъект. Я использовал его, чтобы взглянуть на форму, на элемент таблицы. Хотя childrenперечисляет все элементы формы, childNodesтакже, кажется, включает пробелы из кода HTML:

console.log(elem.childNodes[0]);
console.log(elem.firstChild);

Оба журнала <TextNode textContent="\n ">

console.log(elem.childNodes[1]);
console.log(elem.children[0]);
console.log(elem.firstElementChild);

Все бревно <input type="text"... >. Как придешь? Я бы понял, что один объект позволил бы мне работать с «сырым» HTML-кодом, в то время как другой придерживается DOM, но этот childNodesэлемент работает на обоих уровнях.

Возвращаясь к моему первоначальному вопросу, я могу предположить, что если я хочу получить наиболее полный объект, childNodesэто путь, но из-за его полноты он может быть не самым предсказуемым с точки зрения возврата элемента, который я хочу / ожидать в любой момент. Кросс-браузерная поддержка также может оказаться проблемой в этом случае, хотя я могу ошибаться.

Кто-нибудь может прояснить различие между предметами под рукой? Если есть разница в скорости, как бы она ни была незначительна, я бы тоже хотел знать. Если я вижу все это неправильно, не стесняйтесь обучать меня.

PS: Пожалуйста, пожалуйста, мне нравится JavaScript, так что да, я хочу иметь дело с такого рода вещами. Ответы типа «jQuery занимается этим для вас» - не то, что я ищу, поэтому нетJQuery тег.

Звучит так, будто ты слишком много думаешь. Вы заметили разницу между childNodesи children, которая заключается в том, что она childNodesсодержит все узлы, включая текстовые узлы, состоящие полностью из пробелов, в то время childrenкак это коллекция только дочерних узлов, которые являются элементами. Это действительно все, что нужно сделать.

В каждой коллекции нет ничего непредсказуемого, хотя следует учитывать несколько моментов:

• IE <= 8 не включает текстовые узлы только для пробелов в childNodesто время как другие браузеры делают
• IE <= 8 включает узлы комментариев внутри, в childrenто время как другие браузеры имеют только элементы

children, firstElementChildИ друзья просто удобство, представляющее отфильтрованный вид DOM ограничивается только элементами.

firstElementChild может быть недоступен в IE <9 (только firstChild)

в IE <9 firstChild является firstElementChild, потому что MS DOM (IE <9) не хранит пустые текстовые узлы. Но если вы сделаете это в других браузерах, они вернут пустые текстовые узлы ...

мое решение

child=(elem.firstElementChild||elem.firstChild)

это даст первому ребенку даже на IE <9

Кросс-браузерный способ - использовать childNodesдля получения NodeList, а затем создать массив всех узлов с nodeType ELEMENT_NODE .

/**
 * Return direct children elements.
 *
 * @param {HTMLElement}
 * @return {Array}
 */
function elementChildren (element) {
    var childNodes = element.childNodes,
        children = [],
        i = childNodes.length;

    while (i--) {
        if (childNodes[i].nodeType == 1) {
            children.unshift(childNodes[i]);
        }
    }

    return children;
}

http://jsfiddle.net/s4kxnahu/

Это особенно легко, если вы используете служебную библиотеку, такую ​​как lodash :

/**
 * Return direct children elements.
 *
 * @param {HTMLElement}
 * @return {Array}
 */
function elementChildren (element) {
    return _.where(element.childNodes, {nodeType: 1});
}

Будущее:

Можно использовать querySelectorAllв сочетании с :scopeпсевдо-класса (соответствует элементу , который является точкой отсчета селектора):

parentElement.querySelectorAll(':scope > *');

На момент написания статьи это :scopeподдерживается в Chrome, Firefox и Safari.

Просто чтобы добавить к другим ответам, здесь все еще есть заметные различия, особенно когда речь идет об <svg>элементах.

Я использовал оба .childNodesи .childrenи предпочел работать с HTMLCollectionдоставлено в .childrenпоглотителе.

Однако сегодня я столкнулся с проблемами сбоя IE / Edge при использовании .childrenна <svg>. Хотя .childrenподдерживается в IE для базовых элементов HTML, он не поддерживается для фрагментов документа / документа или элементов SVG .

Для меня я был в состоянии просто захватить необходимые элементы через, .childNodes[n]потому что у меня нет посторонних текстовых узлов, чтобы беспокоиться. Вы можете сделать то же самое, но, как уже упоминалось выше, не забывайте, что вы можете столкнуться с неожиданными элементами.

Надеюсь, что это полезно для того, чтобы кто-то почесал голову, пытаясь понять, почему он .childrenработает в других местах своих js на современном IE и не работает с элементами документа или SVG.

Эй, ребята, не позволяйте пустому пространству обмануть вас. просто проверьте это в консольном браузере. использовать родной JavaScript. Вот и пример с двумя наборами 'ul' с одним и тем же классом. Вам не нужно иметь список 'ul' в одной строке, чтобы избежать пробелов, просто используйте количество массивов, чтобы перепрыгнуть через пробелы.

Как обойти белое пространство , querySelector()то childNodes[]Js скрипки ссылки: https://jsfiddle.net/aparadise/56njekdo/

var y = document.querySelector('.list');
var myNode = y.childNodes[11].style.backgroundColor='red';

<ul class="list">
    <li>8</li>
    <li>9</li>
    <li>100</li>
</ul>

<ul class="list">
    <li>ABC</li>
    <li>DEF</li>
    <li>XYZ</li>
</ul>