听起来你想多了。你观察到的区别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 上，这也会给 firstchild

跨浏览器的方法是使用childNodesget 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 > *');

在撰写本文时，Chrome、Firefox 和 Safari:scope均支持此功能。

只是为了补充其他答案，这里仍然存在值得注意的差异，特别是在处理<svg>元素时。

我都用了.childNodes，并.children和宁愿与工作HTMLCollection由交付.children吸气。

然而今天，我遇到了与IE /边缘使用时失败的问题.children上<svg>。虽然.childrenIE 支持基本 HTML 元素，但不支持文档/文档片段或SVG 元素。

对我来说，我能够简单地通过获取所需的元素，.childNodes[n]因为我没有多余的文本节点需要担心。您也许可以这样做，但正如上面其他地方提到的，不要忘记您可能会遇到意想不到的元素。

希望这对那些试图弄清楚为什么.children在现代 IE 上的 js 中的其他地方有效而在文档或 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>