Tìm phần tử con của javascript thuần

Phương pháp hiệu quả nhất là gì để tìm một phần tử con của (với lớp hoặc ID) của một phần tử cha cụ thể chỉ sử dụng javascript thuần túy. Không có jQuery hoặc các khung công tác khác.

Trong trường hợp này, tôi sẽ cần tìm child1 hoặc child2 của cha mẹ , giả sử rằng cây DOM có thể có nhiều phần tử lớp child1 hoặc child2 trong cây. Tôi chỉ muốn các yếu tố của cha mẹ

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

Các childrentài sản trả về một mảng của các yếu tố, như vậy:

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

Có những lựa chọn thay thế querySelector, như document.getElementsByClassName('parent')[0]nếu bạn rất mong muốn.

Chỉnh sửa: Bây giờ tôi nghĩ về nó, bạn chỉ có thể sử dụng querySelectorAllđể có được những người tán thành parentcó tên lớp child1:

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

Sự khác biệt giữa qS và qSA là cái sau trả về tất cả các phần tử khớp với bộ chọn, trong khi cái trước chỉ trả về phần tử đầu tiên như vậy.

Nếu bạn đã có var parent = document.querySelector('.parent');bạn có thể làm điều này để phạm vi tìm kiếm cho parenttrẻ em:

parent.querySelector('.child')

Chỉ cần thêm một ý tưởng khác, bạn có thể sử dụng bộ chọn con để lấy con ngay lập tức

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

nên trả lại tất cả trẻ em ngay lập tức với lớp .child1

Bạn có một phần tử cha, bạn muốn lấy tất cả con của thuộc tính cụ thể 1. lấy phần tử cha 2. lấy tên nút cha bằng cách sử dụng parent.nodeName.toLowerCase()chuyển đổi tên nút thành chữ thường, ví dụ DIV sẽ là div 3. với mục đích cụ thể hơn, hãy lấy thuộc tính của cha mẹ ví dụ parent.getAttribute("id"). cái này sẽ cung cấp cho bạn idcủa cha mẹ 4. Sau đó sử dụng document.QuerySelectorAll(paret.nodeName.toLowerCase()+"#"_parent.getAttribute("id")+" input " ); nếu bạn muốn nhập con của nút cha

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