Ana saf javascriptin alt öğesini bulma

142

En etkili yöntem, yalnızca saf javascript kullanarak belirli bir üst öğenin alt öğesini (sınıf veya kimlik ile) bulmaktır. JQuery veya başka çerçeveler yok.

Bu durumda, ben bulmak gerekir child1 veya child2 ait ebeveyn DOM ağacı birden sahip olabileceği düşünülmüştür child1 veya alt2 ağacında sınıf elemanlarını. Sadece ebeveynlerin unsurlarını istiyorum

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

javascript dom

— Blyde
kaynak

stackoverflow.com/questions/7815374/…

— Dmitry Volokh

1

Kimlik en kolay yol olacaktır. Benzersiz olmaları gerekir, böylece yapabilirsiniz document.getElementById('element-id').

— Felix Kling

1

Düzenli dom sorguları kullanın, sonra: çocuk düğümlerini almak için

— Elias Van Ootegem

152

childrenÖzelliği çok benzeri elemanların bir dizi döndürür:

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

Arzu ettiğiniz querySelectorgibi alternatifler var document.getElementsByClassName('parent')[0].

Düzenleme: Şimdi bu konuda düşünüyorum, sadece bir sınıf adı olan querySelectorAlldecendents almak için kullanabilirsiniz :parentchild1

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

QS ve qSA arasındaki fark, ikincisinin seçiciyle eşleşen tüm öğeleri döndürürken, ilkinin yalnızca ilk öğeyi döndürmesidir.

— Rick Viscomi
kaynak

182

Zaten sahipseniz var parent = document.querySelector('.parent');, aramayı parentçocuklarına dahil etmek için bunu yapabilirsiniz :

parent.querySelector('.child')

— CSCH
kaynak

1

Ayrıca parent.querySelectorAll('.child')bir NodeList'i de döndürebilirsiniz

— schmijos

20

Hemen çocuk almak için bir çocuk seçici kullanabileceğiniz başka bir fikir eklemek

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

.child1 sınıfı olan tüm yakın çocukları iade etmelidir

— Waleed
kaynak

Herkes getElementBy ** daha querySelector önermek görüyorum. Daha verimli mi?

— Andre

Belki bu yardımcı olur. stackoverflow.com/questions/14377590/…

— Waleed

2

Bir üst öğeniz var, belirli öznitelik 1'in tüm alt öğelerini almak istiyorsunuz. Üst öğeyi alın 2. parent.nodeName.toLowerCase()nodename'i küçük harfe dönüştürerek üst nodename alın örn. DIV div 3 olacaktır. Daha özel bir amaç için, ebeveyn örn parent.getAttribute("id"). bu size idebeveyn 4'ü verecektir . Sonra document.QuerySelectorAll(paret.nodeName.toLowerCase()+"#"_parent.getAttribute("id")+" input " ); üst düğümün giriş alt öğelerini istiyorsanız kullanın

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

Snippet'i genişlet

— Adio Azeez
kaynak