Comment vérifier si un élément a des enfants en Javascript ?

Question

Question simple, j'ai un élément que j'attrape par l'intermédiaire de .getElementById () . Comment puis-je vérifier s'il a des enfants ?

Answer 1

De plusieurs façons :

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

ou le hasChildNodes() función:

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

ou le length propriété de childNodes :

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

Si vous voulez seulement savoir ce qu'est un enfant éléments (par opposition aux nœuds de texte, d'attribut, etc.) sur tous les navigateurs modernes (et IE8 - en fait, même IE6), vous pouvez le faire : (merci Florian !)

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

Cela repose sur le children qui n'a pas été définie dans DOM1 , DOM2 , ou DOM3 mais qui bénéficie d'un support quasi-universel. (Il fonctionne dans IE6 et plus et Chrome, Firefox, et Opera à menos jusqu'en novembre 2012, date à laquelle ce document a été initialement rédigé). Si vous prenez en charge des appareils mobiles plus anciens, veillez à vérifier la prise en charge.

Si vous n'avez pas besoin de la prise en charge d'IE8 et des versions antérieures, vous pouvez également procéder ainsi :

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

Cela repose sur firstElementChild . Comme children il n'a pas été défini dans DOM1-3 non plus, mais contrairement à children il n'a pas été ajouté à IE avant IE9. Il en va de même pour childElementCount :

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

Si vous voulez vous en tenir à quelque chose de défini dans DOM1 (peut-être devez-vous supporter des navigateurs vraiment obscurs), vous devez faire plus de travail :

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

Tout cela fait partie de DOM1 et presque universellement soutenu.

Il serait facile d'emballer cela dans une fonction, par exemple :

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

Answer 2

Comme le mentionnent Slashnick et Bobince, hasChildNodes() retournera vrai pour les espaces blancs (nœuds de texte). Cependant, je ne voulais pas ce comportement, et ceci a fonctionné pour moi :)

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

Editar pour la même fonctionnalité, c'est une meilleure solution :

 element.children.length > 0

children[] est un sous-ensemble de childNodes[] contenant uniquement des éléments.

Compatibilité

Answer 3

Vous pouvez vérifier si l'élément a des nœuds enfants element.hasChildNodes() . Attention, dans Mozilla, cela retournera vrai s'il y a un espace après la balise, vous devrez donc vérifier le type de balise.

https://developer.mozilla.org/En/DOM/Node.hasChildNodes

Answer 4

Un fragment de document tardif mais qui pourrait être un nœud :

function hasChild(el){
    var child = el && el.firstChild;
    while (child) {
        if (child.nodeType === 1 || child.nodeType === 11) {
            return true;
        }
        child = child.nextSibling;
    }
    return false;
}
// or
function hasChild(el){
    for (var i = 0; el && el.childNodes[i]; i++) {
        if (el.childNodes[i].nodeType === 1 || el.childNodes[i].nodeType === 11) {
            return true;
        }
    }
    return false;
}

Voir :
https://github.com/k-gun/so/blob/master/so.dom.js#L42
https://github.com/k-gun/so/blob/master/so.dom.js#L741

Answer 5

<script type="text/javascript">

function uwtPBSTree_NodeChecked(treeId, nodeId, bChecked) 
{
    //debugger;
    var selectedNode = igtree_getNodeById(nodeId);
    var ParentNodes = selectedNode.getChildNodes();

    var length = ParentNodes.length;

    if (bChecked) 
    {
/*                if (length != 0) {
                    for (i = 0; i < length; i++) {
                        ParentNodes[i].setChecked(true);
                    }
    }*/
    }
    else 
    {
        if (length != 0) 
        {
            for (i = 0; i < length; i++) 
            {
                ParentNodes[i].setChecked(false);
            }
        }
    }
}
</script>

<ignav:UltraWebTree ID="uwtPBSTree" runat="server"..........>
<ClientSideEvents NodeChecked="uwtPBSTree_NodeChecked"></ClientSideEvents>
</ignav:UltraWebTree>