Cách lọc và duyệt cây DOM bằng JavaScript

Bạn có biết có một API JavaScript có nhiệm vụ duy nhất là lọc ra và lặp qua các nút chúng ta muốn từ cây DOM? Trên thực tế, không phải một mà có hai API như vậy: Nút mã hóa và Cây cối. Chúng khá giống nhau, với một số khác biệt hữu ích. Cả hai có thể trả về một danh sách các nút hiện diện dưới một nút gốc nhất định trong khi tuân thủ mọi quy tắc lọc được xác định trước và / hoặc tùy chỉnh áp dụng cho họ.

Các bộ lọc được xác định trước có sẵn trong API có thể giúp chúng tôi nhắm mục tiêu các loại nút khác nhau chẳng hạn như các nút văn bản hoặc các nút phần tử và các bộ lọc tùy chỉnh (được thêm bởi chúng tôi) có thể tiếp tục lọc bó, ví dụ bằng cách tìm kiếm các nút có nội dung cụ thể. Danh sách các nút được trả về là lặp đi lặp lại, tức là họ có thể lặp qua, và chúng ta có thể làm việc với tất cả các nút riêng lẻ trong danh sách.

Cách sử dụng Nút mã hóa API

Một Nút mã hóa đối tượng có thể được tạo bằng cách sử dụng createdNodeIterator () phương pháp của tài liệu giao diện. Phương pháp này mất ba đối số. Cái đầu tiên là bắt buộc; nó”s Nút gốc chứa tất cả các nút mà chúng ta muốn lọc ra.

Đối số thứ hai và thứ ba là không bắt buộc. Họ là bộ lọc tùy chỉnh và được xác định trước, tương ứng. Các bộ lọc được xác định trước có sẵn để sử dụng như hằng số của Nút Node vật.

Ví dụ: nếu NodeFilter.SHOW_TEXT hằng số được thêm vào như là tham số thứ hai, nó sẽ trả về một trình vòng lặp cho một danh sách tất cả các nút văn bản dưới nút gốc. NodeFilter.SHOW_ELEMENT sẽ trở lại chỉ các nút phần tử. Xem danh sách đầy đủ về tất cả các hằng số có sẵn.

Đối số thứ ba (bộ lọc tùy chỉnh) là một chức năng thực hiện bộ lọc.

Đây là một đoạn mã ví dụ:

        
chức vụ
 
 đây là trình bao bọc trang 
xin chào
 
Bạn khỏe không?
 
 txt một số liên kết    

Giả sử chúng ta muốn trích xuất nội dung của tất cả các nút văn bản bên trong #vỏ bánh div, đây là cách chúng tôi sử dụng nó Nút mã hóa:

 var div = document.querySelector ('# trình bao bọc'); var nodeIterator = document.createNodeIterator (div, NodeFilter.SHOW_TEXT); while (nodeIterator.nextNode ()) console.log (nodeIterator.referenceNode.nodeValue.trim ());  / * đầu ra giao diện điều khiển [Nhật ký] đây là trình bao bọc trang [Nhật ký] Xin chào [Nhật ký] [Nhật ký] Bạn khỏe không? [Nhật ký] * / 

Các nextNode () phương pháp của Nút mã hóa API trả về nút tiếp theo trong danh sách các nút văn bản có thể lặp lại. Khi chúng ta sử dụng nó trong một trong khi vòng lặp để truy cập từng nút trong danh sách, chúng tôi ghi lại nội dung được cắt xén của mỗi nút văn bản vào bàn điều khiển. Các tài liệu tham khảo tài sản của Nút mã hóa trả về nút mà trình vòng lặp hiện được gắn vào.

Như bạn có thể thấy trong đầu ra, có một số nút văn bản chỉ có khoảng trống cho nội dung của chúng. Chúng ta có thể tránh hiển thị những nội dung trống này bằng bộ lọc tùy chỉnh:

 var div = document.querySelector ('# trình bao bọc'); var nodeIterator = document.createNodeIterator (div, NodeFilter.SHOW_TEXT, function (node) return (node.nodeValue.trim ()! == "")? NodeFilter.FILTER_ACCEPT: NodeFilter while (nodeIterator.nextNode ()) console.log (nodeIterator.referenceNode.nodeValue.trim ());  / * đầu ra giao diện điều khiển [Nhật ký] đây là trình bao bọc trang [Nhật ký] Xin chào [Nhật ký] Bạn khỏe không? * / 

Chức năng lọc tùy chỉnh trả về hằng số NodeFilter.FILTER_ACCEPTnếu nút văn bản không trống, dẫn đến việc đưa nút đó vào danh sách các nút mà trình vòng lặp sẽ lặp lại. Trái lại, NodeFilter.FILTER_RE DỰ ÁN hằng số được trả về để loại trừ các nút văn bản trống từ danh sách các nút lặp.

Cách sử dụng Cây cối API

Như tôi đã đề cập trước đó, Nút mã hóa và Cây cối API là tương tự nhau.

Cây cối có thể được tạo bằng cách sử dụng createdTreeWalker () phương pháp của tài liệu giao diện. Phương pháp này, giống như createdNodeFilter (), mất ba đối số: nút gốc, bộ lọc được xác định trước và bộ lọc tùy chỉnh.

Nếu chúng ta sử dụng Cây cối API thay vì Nút mã hóa đoạn mã trước trông giống như sau:

 var div = document.querySelector ('# trình bao bọc'); var treeWalker = document.createTreeWalker (div, NodeFilter.SHOW_TEXT, function (node) return (node.nodeValue.trim ()! == "")? NodeFilter.FILTER_ACCEPT: NodeFilter while (treeWalker.nextNode ()) console.log (treeWalker.cienNode.nodeValue.trim ());  / * đầu ra [Nhật ký] đây là trình bao bọc trang [Nhật ký] Xin chào [Nhật ký] Bạn khỏe không? * / 

Thay vì tài liệu tham khảo, các currentNode tài sản của Cây cối API được sử dụng để truy cập vào nút mà trình lặp hiện đang được gắn vào. Ngoài nextNode () phương pháp, Người đi rừng có các phương pháp hữu ích khác. Các trướcNode () phương pháp (cũng có mặt trong Nút mã hóa) trả về nút trước của nút mà trình vòng lặp hiện đang được neo vào.

Chức năng tương tự được thực hiện bởi cha mẹ (), FirstChild (), con cuối cùng(), trướcSibling (), và nextSibling () phương pháp. Những phương pháp này là chỉ có sẵn trong Cây cối API.

Đây là một ví dụ mã xuất ra con cuối cùng của nút iterator được neo vào:

 var div = document.querySelector ('# trình bao bọc'); var treeWalker = document.createTreeWalker (div, NodeFilter.SHOW_ELEMENT); console.log (treeWalker.lastChild ()); / * đầu ra [Nhật ký] 
Bạn khỏe không?
 * / 

Chọn API nào

Chọn Nút mã hóa API, khi bạn chỉ cần một trình vòng lặp đơn giản để lọc và lặp qua các nút đã chọn. Và, chọn Cây cối API, khi bạn cần truy cập vào gia đình của các nút được lọc, chẳng hạn như anh chị em ruột của họ.