Cara menggunakan child element javascript

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