Wie überprüfe ich, ob das Element Kinder in Javascript hat?

Einfache Frage, ich habe ein Element, über das ich greife .getElementById (). Wie überprüfe ich, ob Kinder vorhanden sind?

Ein paar Möglichkeiten:

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

oder die hasChildNodes()Funktion:

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

oder das lengthEigentum von childNodes:

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

Wenn Sie nur über untergeordnete Elemente (im Gegensatz zu Textknoten, Attributknoten usw.) in allen modernen Browsern (und IE8 - sogar IE6) wissen möchten, können Sie dies tun: (Danke, Florian !)

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

Das beruht auf der childrenEigenschaft, die nicht in definiert wurde DOM1 , DOM2 , oder DOM3 , aber das hat nahezu universelle Unterstützung. (Es funktioniert in IE6 und höher sowie in Chrome, Firefox und Opera mindestens im November 2012, als dies ursprünglich geschrieben wurde.) Wenn Sie ältere mobile Geräte unterstützen, überprüfen Sie die Unterstützung.

Wenn Sie IE8 und frühere Unterstützung nicht benötigen, können Sie dies auch tun:

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

Das hängt davon ab firstElementChild. Wie childrenwar es auch nicht in DOM1-3 definiert, aber anders als childrenes nicht zu IE bis IE9 aufgenommen.

Wenn Sie sich an etwas halten möchten, das in DOM1 definiert ist (möglicherweise müssen Sie wirklich undurchsichtige Browser unterstützen), müssen Sie mehr Arbeit leisten:

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

All dies ist Teil von DOM1 und wird nahezu universell unterstützt.

Es wäre einfach, dies in eine Funktion zu packen, z.

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

Wie slashnick & bobince erwähnen, hasChildNodes()wird true für Whitespace ( Textknoten ) zurückgegeben. Ich wollte dieses Verhalten jedoch nicht und das hat bei mir funktioniert :)

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

Bearbeiten : Für die gleiche Funktionalität ist dies eine bessere Lösung:

 element.children.length > 0

children[]ist eine Teilmenge von childNodes[], die nur Elemente enthält.

Kompatibilität

Sie können überprüfen, ob das Element untergeordnete Knoten hat element.hasChildNodes(). Beachten Sie, dass dies in Mozilla true zurückgibt, wenn nach dem Tag ein Leerzeichen steht, sodass Sie den Tag-Typ überprüfen müssen.

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

Sie können auch Folgendes tun:

if (element.innerHTML.trim() !== '') {
    // It has at least one
} 

Hierbei wird die Methode trim () verwendet, um leere Elemente, die nur Leerzeichen enthalten (in diesem Fall wird hasChildNodestrue zurückgegeben), als leer zu behandeln.

JSBin Demo

Spät, aber Dokumentfragment könnte ein Knoten sein:

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

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

Probieren Sie die childElementCount-Eigenschaft aus :

if ( element.childElementCount !== 0 ){
      alert('i have children');
} else {
      alert('no kids here');
}

Eine wiederverwendbare isEmpty( <selector> )Funktion.
Sie können es auch für eine Sammlung von Elementen ausführen (siehe Beispiel).

const isEmpty = sel =>
    ![... document.querySelectorAll(sel)].some(el => el.innerHTML.trim() !== "");

console.log(
  isEmpty("#one"), // false
  isEmpty("#two"), // true
  isEmpty(".foo"), // false
  isEmpty(".bar")  // true
);

<div id="one">
 foo
</div>

<div id="two">
 
</div>

<div class="foo"></div>
<div class="foo"><p>foo</p></div>
<div class="foo"></div>

<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>

trueGibt zurück (und beendet die Schleife), sobald ein Element neben Leerzeichen oder Zeilenumbrüchen Inhalte enthält.

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