Bagaimana cara memeriksa apakah elemen memiliki anak di Javascript?

Pertanyaan sederhana, saya memiliki elemen yang saya ambil .getElementById (). Bagaimana cara memeriksa apakah ada anak?

Beberapa cara:

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

atau hasChildNodes()fungsinya:

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

atau lengthproperti dari childNodes:

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

Jika Anda hanya ingin tahu tentang elemen anak (sebagai lawan dari node teks, node atribut, dll.) Pada semua browser modern (dan IE8 - bahkan IE6) Anda dapat melakukan ini: (terima kasih Florian !)

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

Itu bergantung pada childrenproperti, yang tidak ditentukan di DOM1 , DOM2 , atau DOM3 , tetapi memiliki dukungan yang hampir universal. (Ini berfungsi di IE6 dan yang lebih baru serta Chrome, Firefox, dan Opera setidaknya sejak November 2012, saat ini pertama kali ditulis.) Jika mendukung perangkat seluler lama, pastikan untuk memeriksa dukungan.

Jika Anda tidak membutuhkan IE8 dan dukungan sebelumnya, Anda juga dapat melakukan ini:

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

Itu bergantung firstElementChild. Seperti children, itu tidak didefinisikan di DOM1-3, tetapi tidak seperti childrenitu tidak ditambahkan ke IE hingga IE9.

Jika Anda ingin tetap menggunakan sesuatu yang didefinisikan di DOM1 (mungkin Anda harus mendukung browser yang benar-benar tidak dikenal), Anda harus melakukan lebih banyak pekerjaan:

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

Semua itu adalah bagian dari DOM1 , dan hampir didukung secara universal.

Ini akan mudah untuk membungkusnya dalam sebuah fungsi, misalnya:

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

Seperti slashnick & bobince mention, hasChildNodes()akan mengembalikan nilai true untuk whitespace (node ​​teks). Namun, saya tidak menginginkan perilaku ini, dan ini berhasil untuk saya :)

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

Sunting : untuk fungsionalitas yang sama, ini adalah solusi yang lebih baik:

 element.children.length > 0

children[]adalah bagian dari childNodes[], yang hanya berisi elemen.

Kesesuaian

Anda dapat memeriksa apakah elemen tersebut memiliki node turunan element.hasChildNodes(). Hati-hati di Mozilla ini akan mengembalikan nilai true jika spasi kosong setelah tag sehingga Anda perlu memverifikasi jenis tag.

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

Anda juga bisa melakukan hal berikut:

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

Ini menggunakan metode trim () untuk menangani elemen kosong yang hanya memiliki spasi putih (dalam hal ini hasChildNodes mengembalikan nilai true) sebagai kosong.

Demo JSBin

Fragmen dokumen terlambat tetapi bisa menjadi node:

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

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

Coba properti childElementCount :

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

isEmpty( <selector> )Fungsi yang dapat digunakan kembali .
Anda juga dapat menjalankannya ke kumpulan elemen (lihat contoh)

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>

mengembalikan true(dan keluar dari loop) segera satu elemen memiliki jenis konten apa pun di samping spasi atau baris baru.

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