親の純粋なJavaScriptの子要素を見つける

最も効率的な方法は、純粋なJavaScriptのみを使用して特定の親要素の（クラスまたはIDを持つ）子要素を見つけることです。jQueryやその他のフレームワークはありません。

この場合、私が見つける必要があるだろうchild1のかchild2のの親を DOMツリーが複数持つことができると仮定し、child1のかchild2のツリー内のクラスの要素を。親の要素だけが欲しい

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

childrenプロパティはそうのような要素の配列を返します。

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

希望する場合querySelectorなどdocument.getElementsByClassName('parent')[0]、の代替手段があります。

編集：私はそれについて考えたので、あなたは単にクラス名を持つquerySelectorAll子孫を取得するために使用できます：parentchild1

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

qSとqSAの違いは、後者はセレクターに一致するすべての要素を返すのに対し、前者は最初のそのような要素のみを返すことです。

既に持っているvar parent = document.querySelector('.parent');場合は、これを実行してparentの子に検索範囲を設定できます。

parent.querySelector('.child')

別のアイデアを追加するだけで、子セレクターを使用して直接の子を取得できます

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

クラス.child1を持つすべての直接の子を返す必要があります

親要素があり、特定の属性のすべての子を取得したい場合1.親を取得2. parent.nodeName.toLowerCase()ノード名を小文字に変換して親ノード名を取得します。たとえば、DIVはdivになります3.さらに特定の目的のために、属性を取得します親parent.getAttribute("id")。これidにより、親が4にdocument.QuerySelectorAll(paret.nodeName.toLowerCase()+"#"_parent.getAttribute("id")+" input " ); なります。次に、親ノードの子を入力する場合に使用します。

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