การค้นหาองค์ประกอบย่อยของจาวาสคริปต์ผู้ปกครองบริสุทธิ์

วิธีใดที่จะมีประสิทธิภาพที่สุดในการค้นหาองค์ประกอบลูกของ (ที่มีคลาสหรือ ID) ขององค์ประกอบหลักโดยใช้จาวาสคริปต์ที่บริสุทธิ์เท่านั้น ไม่มี jQuery หรือกรอบอื่น ๆ

ในกรณีนี้ฉันจะต้องหาchild1หรือchild2ของparentโดยสมมติว่าทรี 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เพื่อหลอกลวงparentว่ามีชื่อชั้นของchild1:

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

ความแตกต่างระหว่าง qS และ qSA คือส่วนหลังจะส่งคืนองค์ประกอบทั้งหมดที่ตรงกับตัวเลือกในขณะที่อดีตส่งคืนองค์ประกอบแรกเท่านั้น

หากคุณมีอยู่แล้วvar parent = document.querySelector('.parent');คุณสามารถทำได้เพื่อกำหนดขอบเขตการค้นหาให้กับparentลูก ๆ :

parent.querySelector('.child')

เพียงเพิ่มแนวคิดอื่นคุณสามารถใช้ตัวเลือกเด็กเพื่อรับเด็กได้ทันที

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

ควรส่งคืนเด็กทั้งหมดที่อยู่ในชั้นเรียนด้วยเด็ก 1

คุณมีองค์ประกอบหลักคุณต้องการรับลูกทั้งหมดของแอตทริบิวต์เฉพาะ 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")