Einfache Frage, ich habe ein Element, das ich über .getElementById ()
ergreife. Wie überprüfe ich, ob es Kinder hat?
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;
}
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.
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.
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
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.
Versuchen Sie die Eigenschaft childElementCount :
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>
gibt true
zurück (und verlässt die Schleife), sobald ein Element neben Leerzeichen oder Zeilenumbrüchen einen Inhalt enthält.