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