Menemukan elemen anak javascript murni induk

154

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>
javascript dom Blyde
sumber
stackoverflow.com/questions/7815374/…
Dmitry Volokh
1
ID akan menjadi cara termudah. Mereka harus unik, jadi Anda bisa melakukannya document.getElementById('element-id').
Felix Kling
1
Gunakan kueri dom biasa, lalu: baca cara terbaik
turunan

Jawaban:

165

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.

Rick Viscomi
sumber
205

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

parent.querySelector('.child')
csch
sumber
2
Anda juga parent.querySelectorAll('.child')dapat mengembalikan NodeList
schmijos
20

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

Waleed
sumber
Saya telah melihat semua orang menyarankan querySelector daripada getElementBy **. Apakah lebih efisien?
Andre
Mungkin ini akan membantu. stackoverflow.com/questions/14377590/…
Waleed
2

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")
Luaskan cuplikan

Adio Azeez
sumber