it-swarm.com.de

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

Einfache Frage, ich habe ein Element, das ich über .getElementById () ergreife. Wie überprüfe ich, ob es Kinder hat?

86
David

Ein paar Möglichkeiten:

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

oder die Funktion hasChildNodes():

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

oder die length-Eigenschaft von childNodes:

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

Wenn Sie nur unter elements (im Gegensatz zu Textknoten, Attributknoten usw.) in allen modernen Browsern (und IE8 - tatsächlich sogar IE6) wissen möchten, können Sie Folgendes tun: (Vielen Dank Florian !)

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

Dies hängt von der Eigenschaft children ab, die nicht in DOM1 , DOM2 , oderDOM3 definiert wurde, die aber nahezu universelle Unterstützung bietet. (Dies funktioniert bereits ab November 2012, als dies ursprünglich geschrieben wurde, ab IE6 und Chrome, Firefox und Opera bei least.) Wenn Sie ältere mobile Geräte unterstützen, sollten Sie unbedingt nach Unterstützung suchen.

Wenn Sie keine Unterstützung für IE8 und frühere Versionen benötigen, können Sie auch Folgendes tun:

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

Das hängt von firstElementChild ab. Wie children wurde es auch nicht in DOM1-3 definiert, aber im Gegensatz zu children wurde es - bis IE9 nicht zu IE hinzugefügt.

Wenn Sie sich an etwas halten wollen, das in DOM1 definiert ist (möglicherweise müssen Sie wirklich unübersichtliche Browser unterstützen), müssen Sie mehr Arbeit erledigen:

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 leicht, dies in einer Funktion zusammenzufassen, 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;
}
156
T.J. Crowder

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

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

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

5
c24w

Sie können überprüfen, ob das Element über untergeordnete Knoten element.hasChildNodes() verfügt. Achtung in Mozilla, dies gibt true zurück, wenn nach dem Tag ein Leerzeichen ist. Sie müssen den Tag-Typ überprüfen.

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

2
slashnick

Verspätet, 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;
}

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

1
K-Gun

Sie können auch Folgendes tun:

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

Diese Methode verwendet die trim () -Methode, um leere Elemente, die nur Leerzeichen enthalten (in diesem Fall hasChildNodes true), als leer zu behandeln.

JSBin Demo

1
Danield

Versuchen Sie die Eigenschaft childElementCount :

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

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>

gibt true zurück (und verlässt die Schleife), sobald ein Element neben Leerzeichen oder Zeilenumbrüchen einen Inhalt enthält.

0
Roko C. Buljan