Как проверить, имеет ли элемент каких-либо детей в JavaScript?

Пара способов:

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

или hasChildNodes () функция:

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

или свойство length объекта childNodes :

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

Если вы хотите знать только о дочерних элементах (в отличие от текстовых узлов, узлов атрибутов и т. д.) во всех современных браузерах (и IE8 - фактически, даже IE6), вы можете сделать это: ( спасибо Флориан !)

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 года, когда это было изначально написано.) Если вы поддерживаете старые мобильные устройства, обязательно проверьте наличие поддержки.

Если вам не нужна поддержка IE8 и более ранних версий, вы также можете сделать это:

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

Это зависит от firstElementChild . Как и children , он также не был определен в DOM1-3, но в отличие от children он не был добавлен в IE до IE9.

Если вы хотите придерживаться чего-то определенного в 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;
}