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

Question

Phương pháp hiệu quả nhất là tìm một phần tử con (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 phải tìm child1 hoặc child2 của mẹ, giả định rằng cây DOM có thể có nhiều child1 hoặc child2 yếu tố lớp trong cây. Tôi chỉ muốn các yếu tố của mẹ

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

Answer 1

Thuộc tính children 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">] 

querySelector là tương đối mới và không được hỗ trợ trong các trình duyệt cũ. Có các lựa chọn thay thế, chẳng hạn như document.getElementsByClassName('parent')[0] nếu bạn muốn.

---

Edit: Bây giờ tôi nghĩ về nó, bạn chỉ có thể sử dụng querySelectorAll để có được decendents của parent có một tên lớp của child1:

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

Sự khác biệt giữa QS và QSA là sau này trả lại tất cả các thành phần khớp với công cụ chọn, trong khi phần tử trước chỉ trả về phần tử đầu tiên như vậy.

Answer 2

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

parent.querySelector('.child')