Hoe te controleren of een element kinderen heeft in Javascript?

Eenvoudige vraag, ik heb een element dat ik oppik via .getElementById (). Hoe controleer ik of hij kinderen heeft?

Antwoord 1, autoriteit 100%

Een aantal manieren:

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

of de functie hasChildNodes():

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

of de eigenschap lengthvan childNodes:

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

Als u alleen iets wilt weten over onderliggende elementen(in tegenstelling tot tekstknooppunten, attribuutknooppunten, enz.) in alle moderne browsers (en IE8 – in feite zelfs IE6), dan kunt u dat doen dit: (bedankt Florian!)

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

Dat is afhankelijk van de eigenschap children, die niet is gedefinieerd in DOM1, DOM2, ofDOM3, maar met bijna universele ondersteuning. (Het werkt in IE6 en hoger en Chrome, Firefox en Opera minstensal in november 2012, toen dit oorspronkelijk werd geschreven.) Als u oudere mobiele apparaten ondersteunt, moet u controleren op ondersteuning.

Als je IE8 en eerdere ondersteuning niet nodig hebt, kun je ook dit doen:

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

Dat is afhankelijk van firstElementChild. Net als childrenwas het ook niet gedefinieerd in DOM1-3, maar in tegenstelling tot childrenwerd het pas in IE9 aan IE toegevoegd. Hetzelfde geldt voor childElementCount:

if (element.childElementCount !== 0) {
    // It has at least one element as a child
}

Als je je wilt houden aan iets dat in DOM1 is gedefinieerd (misschien moet je echt obscure browsers ondersteunen), moet je meer werk doen:

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

Dit alles maakt deel uit van DOM1, en bijna universeel ondersteund.

Het zou gemakkelijk zijn om dit in een functie te verpakken, bijvoorbeeld:

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

Antwoord 2, autoriteit 6%

Als slashnick & bobince-vermelding, hasChildNodes()retourneert true voor witruimte (tekstknooppunten). Ik wilde dit gedrag echter niet, en dit werkte voor mij 🙂

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

Bewerken: voor dezelfde functionaliteit is dit een betere oplossing:

element.children.length > 0

children[]is een subset van childNodes[], die alleen elementen bevat.

Compatibiliteit

Antwoord 3, autoriteit 3%

U kunt ook het volgende doen:

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

Dit gebruikt de methode trim() om lege elementen die alleen spaties hebben (in welk geval hasChildNodestrue retourneert) als leeg te behandelen.

NB:De bovenstaande methode filtert opmerkingenniet uit. (dus een opmerking zou een kind classificeren)

Om ook reacties uit te filteren, kunnen we gebruik maken van de alleen-lezen Node.nodeTypeeigenschap waar Node.COMMENT_NODE(A Comment node, zoals <!-- … -->) heeft de constante waarde – 8

if (element.firstChild?.nodeType !== 8 && element.innerHTML.trim() !== '' {
   // It has at least one
}

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

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

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>

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