Khi sử dụng querySelectorAll, có cách nào để tham chiếu đến các nút con ngay lập tức của nút ngữ cảnh mà không sử dụng các ID không?

Question

Nói rằng tôi có một cấu trúc HTML như

<div id="a"> 
    <div id="b"> 
    <div id="c"></div> 
    </div> 
</div> 

Để làm một truy vấn cho con cái "a" bằng querySelectorAll tôi có thể làm một cái gì đó giống như

//Get "b", but not "c" 
document.querySelectorAll('#a > div') 

Câu hỏi của tôi là: là nó có thể để làm điều này mà không có ID, tham chiếu nút trực tiếp? Tôi đã thử làm

var a_div = document.getElementById('a') 
a_div.querySelectorAll('> div') //<-- error here 

nhưng tôi gặp lỗi khi cho biết bộ chọn tôi đã sử dụng không hợp lệ.

---

Và trong trường hợp bất kỳ ai thắc mắc, trường hợp sử dụng thực của tôi sẽ phức tạp hơn như '> .foo .bar .baz' vì vậy tôi muốn tránh quá trình duyệt DOM thủ công. Hiện tại tôi đang thêm id tạm thời vào div gốc nhưng điều đó có vẻ giống như một hack xấu xí ...

Answer 1

Không, không có cách nào ^(chưa) để tham chiếu tất cả các phần tử con của một số phần tử mà không sử dụng tham chiếu đến yếu tố đó. Vì > là một số child combinator, đại diện cho mối quan hệ giữa yếu tố gốc và phần tử con, cần simple selector (cha/mẹ) (ví dụ: thiếu trong ví dụ của bạn).

Trong một bình luận, BoltClock said rằng Selectors API Level 2 specification định nghĩa một phương pháp findAll^{tên thể thay đổi}"mà chấp nhận như một cuộc tranh cãi những gì có thể sẽ được biết đến như một selector tương đối (một selector có thể bắt đầu với một combinator hơn bộ chọn hợp chất) ".
Khi điều này được thực hiện, nó có thể được sử dụng như sau:

a_div.findAll('> div'); 

Answer 2

Tôi nghĩ mình phải được hiểu lầm câu hỏi của bạn, nhưng đây là cách tôi giải thích nó ..

var a = document.getElementById('a') 
var results = a.querySelectorAll('div'); 

kết quả sẽ giữ tất cả các div con của bạn ngay bây giờ.

Answer 3

document.querySelector('#a').querySelectorAll(':scope > div') 

Tôi không chắc chắn về hỗ trợ trình duyệt, nhưng tôi sử dụng nó trên các ứng dụng đóng gói chrome và chrome dành cho thiết bị di động và nó hoạt động tốt.