Menemukan elemen anak javascript murni induk

Apa metode yang paling efisien untuk menemukan elemen anak (dengan kelas atau ID) dari elemen induk tertentu hanya menggunakan javascript murni. Tidak ada jQuery atau kerangka kerja lainnya.

Dalam hal ini, saya akan harus mencari child1 atau child2 dari orang tua , dengan asumsi bahwa pohon DOM bisa memiliki beberapa child1 atau child2 kelas elemen di pohon. Saya hanya menginginkan elemen induk

    <div class="parent">
        <div class="child1">
            <div class="child2">
            </div>
        </div>
    </div>

The childrenproperti mengembalikan array dari elemen, seperti:

parent = document.querySelector('.parent');
children = parent.children; // [<div class="child1">]

Ada alternatif lain querySelector, seperti document.getElementsByClassName('parent')[0]jika Anda menginginkannya.

Sunting: Sekarang setelah saya memikirkannya, Anda bisa menggunakan querySelectorAlluntuk mendapatkan desenden parentmemiliki nama kelas child1:

children = document.querySelectorAll('.parent .child1');

Perbedaan antara qS dan qSA adalah bahwa qSA mengembalikan semua elemen yang cocok dengan selector, sedangkan qSA hanya mengembalikan elemen pertama.

Jika Anda sudah memilikinya, var parent = document.querySelector('.parent');Anda dapat melakukan ini untuk memperluas pencarian ke parentanak-anak:

parent.querySelector('.child')

Hanya menambahkan ide lain, Anda dapat menggunakan pemilih anak untuk mendapatkan anak langsung

document.querySelectorAll(".parent > .child1");

harus mengembalikan semua anak langsung dengan class .child1

Anda memiliki elemen induk, Anda ingin mendapatkan semua anak dengan atribut tertentu 1. dapatkan induk 2. dapatkan nama noden induk dengan menggunakan parent.nodeName.toLowerCase()konversi nama noden ke huruf kecil misalnya DIV akan menjadi div 3. untuk tujuan spesifik lebih lanjut, dapatkan atribut misalnya orang tua parent.getAttribute("id"). ini akan memberikan Anda iddari orang tua 4. Kemudian gunakan document.QuerySelectorAll(paret.nodeName.toLowerCase()+"#"_parent.getAttribute("id")+" input " ); jika Anda ingin memasukkan anak dari node induk

let parent = document.querySelector("div.classnameofthediv")
let parent_node = parent.nodeName.toLowerCase()
let parent_clas_arr = parent.getAttribute("class").split(" ");
let parent_clas_str = '';
  parent_clas_arr.forEach(e=>{
     parent_clas_str +=e+'.';
  })
let parent_class_name = parent_clas_str.substr(0, parent_clas_str.length-1)  //remove the last dot
let allchild = document.querySelectorAll(parent_node+"."+parent_class_name+" input")