obtener - replacechild javascript

¿Cómo verificar si el elemento tiene hijos en Javascript?

Question

Pregunta simple, tengo un elemento que estoy agarrando a través de .getElementById () . ¿Cómo puedo verificar si tiene hijos?

Answer 1

Como slashnick & bobince mencionan, hasChildNodes() devolverá verdadero para espacios en blanco (nodos de texto). Sin embargo, no quería este comportamiento, y esto funcionó para mí :)

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

Editar : para la misma funcionalidad, esta es una mejor solución:

 element.children.length > 0

children[] es un subconjunto de childNodes[] , que contiene solo elementos.

Compatibility

Answer 2

Fragmento tardío pero documentado podría ser 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;
}

Ver:
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 3

Puede verificar si el elemento tiene nodos secundarios element.hasChildNodes() . Tenga cuidado con Mozilla, esto devolverá verdadero si el espacio en blanco es posterior a la etiqueta, por lo que deberá verificar el tipo de etiqueta.

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

Answer 4

También podría hacer lo siguiente:

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

Utiliza el método trim () para tratar los elementos vacíos que solo tienen espacios en blanco (en cuyo caso hasChildNodes devuelve verdadero) como vacíos.

Demostración de JSBin

Answer 5

Un par de maneras:

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

o la función hasChildNodes() :

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

o la propiedad de length de childNodes :

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

Si solo quieres saber sobre los elementos secundarios (a diferencia de los nodos de texto, los nodos de atributos, etc.) en todos los navegadores modernos (e IE8, de hecho, incluso IE6) puedes hacer esto: (¡gracias, Florian !)

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

Eso depende de la propiedad de los children , que no estaba definida en DOM1 , DOM2 o DOM3 , pero que tiene un apoyo casi universal. (Funciona en IE6 y versiones posteriores y Chrome, Firefox y Opera al menos desde noviembre de 2012, cuando esto se escribió originalmente). Si admite dispositivos móviles anteriores, asegúrese de buscar asistencia.

Si no necesita IE8 y soporte anterior, también puede hacer esto:

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

Eso depende de firstElementChild . Al igual que los children , tampoco se definió en DOM1-3, pero a diferencia de los children , no se agregó a IE hasta IE9.

Si desea atenerse a algo definido en DOM1 (tal vez tiene que admitir navegadores realmente oscuros), debe hacer más trabajo:

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

Todo eso es parte de DOM1 , y casi universalmente compatible.

Sería fácil resumir esto en una función, por ejemplo:

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 6

Una función reutilizable es isEmpty( <selector> ) .
También puedes ejecutarlo hacia una colección de elementos (ver ejemplo)

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>

devuelve true (y sale del bucle) en cuanto un elemento tiene algún tipo de contenido al lado de espacios o líneas nuevas.

Answer 7

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