Come verificare se l’elemento ha figli in Javascript?

Domanda semplice, ho un elemento che sto prendendo tramite .getElementById () . Come posso verificare se ha bambini?

Un paio di modi:

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

o la funzione hasChildNodes() :

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

o la proprietà length di childNodes :

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

Se vuoi solo conoscere elementi figlio (a differenza di nodes di testo, nodes attributi, ecc.) Su tutti i browser moderni (e IE8 – in realtà, anche IE6) puoi farlo: (grazie Florian !)

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

Questo si basa sulla proprietà children , che non era definita in DOM1 , DOM2 o DOM3 , ma che ha un supporto quasi universale. (Funziona in IE6 e versioni successive e Chrome, Firefox e Opera almeno fino a novembre 2012, quando questo è stato scritto in origine.) Se si supportano i dispositivi mobili meno recenti, assicurarsi di verificare la presenza di supporto.

Se non hai bisogno di IE8 e supporto precedente, puoi anche farlo:

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

Questo si basa su firstElementChild . Come i children , non è stato definito nemmeno in DOM1-3, ma a differenza dei children non è stato aggiunto a IE fino a IE9.

Se vuoi attenersi a qualcosa definito in DOM1 (forse devi supportare browser veramente oscuri), devi fare più lavoro:

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

Tutto ciò è parte di DOM1 e quasi universalmente supportato.

Sarebbe facile racchiuderlo in una funzione, ad esempio:

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

Come menzionato da hasChildNodes() e hasChildNodes() , hasChildNodes() restituirà true per gli spazi bianchi (nodes di testo). Tuttavia, non volevo questo comportamento, e questo ha funzionato per me 🙂

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

Modifica : per la stessa funzionalità, questa è una soluzione migliore:

  element.children.length > 0 

children[] è un sottoinsieme di childNodes[] , contenente solo elementi.

Compatibilità

È ansible verificare se l’elemento ha nodes figli element.hasChildNodes() . Attenzione in Mozilla questo restituirà true se lo spazio è dopo il tag, quindi dovrai verificare il tipo di tag.

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

Puoi anche fare quanto segue:

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

Questo usa il metodo trim () per trattare gli elementi vuoti che hanno solo spazi bianchi (nel qual caso hasChildNodes restituisce true) come vuoti.

JSBin Demo

Il frammento tardivo ma del documento potrebbe essere un nodo:

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

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

Una funzione isEmpty( ) riutilizzabile isEmpty( ) .
Puoi anche eseguirlo verso una raccolta di elementi (vedi esempio)

 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 ); 
 
foo

foo