[解決済み] Javascriptで要素が子要素を持つかどうかを確認するには？

質問

簡単な質問ですが、私はある要素を .getElementById () . どのように私はそれが任意の子を持つかどうかを確認するには？

どのように解決するのですか？

いくつかの方法があります。

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 で動作します。 少なくとも で動作します)。古い携帯端末をサポートする場合は、必ずサポートの有無を確認してください。

IE8 以前のサポートが不要な場合は、このようにすることもできます。

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

これは firstElementChild . のように children と同様、DOM1-3 では定義されていませんが、DOM1-3 の children とは異なり、IE には IE9 まで追加されませんでした。同じことが 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;
}