Javascript'te elemanın çocuğu olup olmadığı nasıl kontrol edilir?

Basit bir soru, üzerinden kaptığım bir öğem var .getElementById (). Çocuğu olup olmadığını nasıl kontrol ederim?

Birkaç yol:

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

veya hasChildNodes()işlev:

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

veya lengthmülkiyeti childNodes:

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

Tüm modern tarayıcılarda (ve IE8 - hatta IE6'da bile) yalnızca alt öğeler hakkında bilgi edinmek istiyorsanız (metin düğümleri, öznitelik düğümleri vb.) Bunu yapabilirsiniz: (Teşekkürler Florian !)

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

Yani dayanıyor childrentanımlanan değildi mülkiyet, DOM1 , DOM2 , ya dom3 ama neredeyse evrensel desteğe sahip olan. (IE6 ve üzeri ile Chrome, Firefox ve Opera'da en azından orijinal olarak yazıldığı Kasım 2012'de çalışır.) Daha eski mobil cihazları destekliyorsa, desteği kontrol ettiğinizden emin olun.

IE8 ve önceki desteğe ihtiyacınız yoksa, bunu da yapabilirsiniz:

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

Bu dayanır firstElementChild. Gibi children, DOM1-3'te de tanımlanmamıştı, ancak aksine IE9'a childrenkadar IE'ye eklenmemişti.

DOM1'de tanımlanan bir şeye bağlı kalmak istiyorsanız (belki de gerçekten belirsiz tarayıcıları desteklemeniz gerekir), daha fazla iş yapmanız gerekir:

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

Bunların tümü DOM1'in bir parçasıdır ve neredeyse evrensel olarak desteklenir.

Bunu bir işlevle özetlemek kolay olacaktır, örneğin:

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

Slashnick ve bobince'den bahsedildiği gibi, hasChildNodes()boşluklar (metin düğümleri) için true dönecektir. Ancak, bu davranışı istemedim ve bu benim için çalıştı :)

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

Düzenleme : aynı işlevsellik için bu daha iyi bir çözümdür:

 element.children.length > 0

children[]childNodes[]yalnızca öğeleri içeren bir alt kümesidir .

Uyumluluk

Elemanın alt düğümlere sahip olup olmadığını kontrol edebilirsiniz element.hasChildNodes(). Mozilla'da, etiketten sonra boşluksa bunun true döneceğine dikkat edin, bu nedenle etiket türünü doğrulamanız gerekir.

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

Ayrıca şunları da yapabilirsiniz:

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

Bu, yalnızca beyaz boşluklara sahip (bu durumda hasChildNodestrue döndürür) boş öğeleri boş olarak ele almak için trim () yöntemini kullanır .

JSBin Demosu

Geç ancak belge parçası bir düğüm olabilir:

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

Bakınız:
https://github.com/k-gun/so/blob/master/so.dom.js#L42
https://github.com/k-gun/so/blob/master/so.dom.js # L741

ChildElementCount özelliğini deneyin :

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

Yeniden kullanılabilir bir isEmpty( <selector> )işlev.
Ayrıca bir öğe koleksiyonuna doğru da çalıştırabilirsiniz (örneğe bakın)

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>

trueBir öğe boşlukların veya satırsonlarının yanında herhangi bir içeriğe sahip olur olmaz döner (ve döngüden çıkar).

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