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

有几种方法：

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

或函数：hasChildNodes()

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

或 ：lengthchildNodes

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
}

这依赖于子属性，该属性未在 DOM1、DOM2 或 DOM3 中定义，但具有近乎通用的支持。 （它至少在IE6及更高版本以及Chrome，Firefox和Opera中工作，至少可以追溯到2012年11月，当时最初编写了这篇文章。如果支持较旧的移动设备，请务必检查支持。

如果不需要 IE8 及更早版本的支持，也可以执行以下操作：

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

这依赖于firstElementChild。就像 ，它也没有在 DOM1-3 中定义，但不像直到 IE9 才添加到 IE 中。这同样适用于 childElementCount：childrenchildren

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;
}

正如 slashnick & bobince 所提到的，对于空格（文本节点）将返回 true。但是，我不想要这种行为，这对我有用:)hasChildNodes()

element.getElementsByTagName('*').length > 0

编辑：对于相同的功能，这是一个更好的解决方案：

 element.children.length > 0

children[]是 的子集，仅包含元素。childNodes[]

兼容性