javascript - 如何检查元素在 Javascript 中是否有子元素？

Question

简单的问题，我有一个元素，我正在通过 .getElementById () 获取它。我如何检查它是否有 child ？

Answer 1

几种方式:

if (element.firstChild) {
    // It has at least one
}

或 hasChildNodes() 函数:

if (element.hasChildNodes()) {
    // It has at least one
}

或者childNodes的length属性:

if (element.childNodes.length > 0) { // Or just `if (element.childNodes.length)`
    // It has at least one
}

如果您只想了解所有现代浏览器(和 IE8——事实上，甚至是 IE6)上的子元素(而不是文本节点、属性节点等)，您可以这样做: (谢谢 Florian !)

if (element.children.length > 0) { // Or just `if (element.children.length)`
    // It has at least one element as a child
}

这依赖于 children属性，未在 DOM1 中定义, DOM2 、或 DOM3 , 但它得到了近乎普遍的支持。 (它在 IE6 及更高版本和 Chrome、Firefox 和 Opera 中工作，至少最早可追溯到 2012 年 11 月，当时是最初编写的。)如果支持较旧的移动设备，请务必检查支持。

如果不需要IE8及更早版本的支持，也可以这样做:

if (element.firstElementChild) {
    // It has at least one element as a child
}

那依赖于firstElementChild .和children一样，它也没有在DOM1-3中定义，但与children不同的是，它直到IE9才被添加到IE中。同样适用于childElementCount :

if (element.childElementCount !== 0) {
    // It has at least one element as a child
}

如果你想坚持 DOM1 中定义的东西(也许你必须支持非常晦涩的浏览器)，你必须做更多的工作:

var hasChildElements, child;
hasChildElements = false;
for (child = element.firstChild; child; child = child.nextSibling) {
    if (child.nodeType == 1) { // 1 == Element
        hasChildElements = true;
        break;
    }
}

所有这些都是 DOM1 的一部分，并且几乎得到普遍支持。

将其包装在一个函数中会很容易，例如:

function hasChildElement(elm) {
    var child, rv;

    if (elm.children) {
        // Supports `children`
        rv = elm.children.length !== 0;
    } else {
        // The hard way...
        rv = false;
        for (child = element.firstChild; !rv && child; child = child.nextSibling) {
            if (child.nodeType == 1) { // 1 == Element
                rv = true;
            }
        }
    }
    return rv;
}