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

Ответ 1

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

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

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

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

Ответ 2

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

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

мое решение

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

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

Ответ 3

Способ кросс-браузера - использовать 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.

Ответ 4

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

Как обойти пустое пространство с помощью querySelector(), затем childNodes[] js fiddle link: 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>

Ответ 5

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

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

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

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

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