CSS Selector là gì?

Trình duyệt thu thập dữ liệu Scrapeless cung cấp nội dung DOM của trang công khai đã được kết xuất mà mã trích xuất có thể truy vấn bằng CSS selectors.

Một CSS selector là một mẫu xác định các phần tử trong một cây tài liệu HTML hoặc XML. Trình duyệt sử dụng các selector để quyết định nơi các quy tắc CSS áp dụng, và JavaScript cùng với các thư viện thu thập dữ liệu sử dụng cùng một cú pháp để tìm các phần tử cho việc đọc hoặc tương tác.

Người Thông số kỹ thuật W3C Selectors định nghĩa các selector là các mẫu phù hợp với các phần tử trong một cây.

CSS Selector hoạt động như thế nào?

Một CSS selector kiểm tra tên phần tử, thuộc tính, trạng thái và mối quan hệ cho đến khi tìm thấy các nút phù hợp.

Các loại CSS Selector chính là gì?

Các CSS selector từ thử nghiệm thuộc tính đơn giản đến các kết hợp diễn đạt mối quan hệ cây.

• Selector loại, ID và lớp. Khớp với một tên phần tử, một giá trị ID hoặc một mã lớp.
• Selector thuộc tính. Khớp với sự hiện diện hoặc giá trị của các thuộc tính như data-product-id hoặc aria-label.
• Công thức. Diễn tả mối quan hệ hậu duệ, con và anh chị em giữa các phần tử.
• Lớp giả. Tinh chỉnh các kết quả phù hợp theo trạng thái hoặc cấu trúc, chẳng hạn như :first-child, :not(), hoặc :has().
• Danh sách selector. Kết hợp các mẫu thay thế bằng dấu phẩy và trả về các kết quả cho bất kỳ mẫu nào trong danh sách.

Các CSS selector được sử dụng như thế nào trong việc thu thập dữ liệu web?

In web scraping, CSS selectors locate the nodes that contain each field in the output schema.

Một bộ chọn sản phẩm có thể xác định mỗi bộ chứa bản ghi, sau đó các bộ chọn lồng nhau đọc tiêu đề, giá, URL và tình trạng khả dụng bên trong mỗi thẻ.

Phương pháp trình duyệt Document.querySelector() trả về phần tử khớp đầu tiên, trong khi querySelectorAll trả về tất cả các kết quả phù hợp. Các thư viện web scraping thường cung cấp các thao tác tương đương với các phương thức đặc trưng của thư viện.

Điều hướng dẫn bộ chọn và tổ hợp MDN nhóm các bộ chọn cơ bản, bộ chọn thuộc tính, lớp giả và tổ hợp mối quan hệ thành một tham khảo cú pháp thực tiễn.

Bạn Viết Các Bộ Chọn CSS Ổn Định Thế Nào?

Các bộ chọn CSS ổn định sử dụng các thuộc tính bền vững nhất mà thể hiện vai trò của phần tử mà không sao chép toàn bộ đường dẫn DOM.

1. Bắt đầu từ một bộ chứa bản ghi hoặc ranh giới thành phần độc đáo.
2. Ưu tiên các ID ngữ nghĩa, thuộc tính dữ liệu, tên và nhãn khả năng tiếp cận khi chúng ổn định.
3. Tránh các mã lớp được tạo và lặp lại :nth-child() chuỗi trừ khi vị trí là một phần của hợp đồng dữ liệu.
4. Kiểm tra bộ chọn trên nhiều trang đại diện, bao gồm các mô-đun thiếu và tùy chọn.
5. Khẳng định số lượng khớp mong đợi và xác thực các giá trị đã trích xuất.

Bạn Đọc Một Bộ Chọn CSS Từ Phải Sang Trái Như Thế Nào?

Một trình duyệt hoặc bộ phân tích khớp một bộ chọn với các phần tử ứng viên, và bộ chọn hợp thành bên phải xác định phần tử có thể được trả về. Trong .product-list > article[data-sku] h2, kết quả là một h2. Các phần trước ràng buộc các tiêu đề nào đủ điều kiện: tiêu đề phải nằm bên trong một bài báo có một data-sku thuộc tính, và bài báo đó phải là một đứa trẻ trực tiếp của một phần tử có lớp product-list .

Đọc từ phải sang trái giúp phân tách trường mục tiêu khỏi ngữ cảnh của nó. Đầu tiên hỏi nút nào nên cung cấp giá trị. Sau đó thêm bộ chứa bản ghi ổn định gần nhất và chỉ số tổ tiên cần thiết để ngăn chặn các khớp không liên quan. Điều này tạo ra các bộ chọn dễ dàng kiểm tra hơn so với các đường dẫn dài sao chép từ công cụ phát triển.

Tập quán tương tự làm rõ các thất bại. Nếu không có phần tử nào khớp, thử nghiệm phần phải nhất trước, sau đó thêm mỗi mối quan hệ. Nếu quá nhiều phần tử khớp, kiểm tra xem phạm vi bản ghi có thiếu không hoặc lớp có được chia sẻ bởi điều hướng, khuyến nghị và nội dung chính hay không.

Các Bộ Chọn Thuộc Tính Nên Được Sử Dụng Như Thế Nào?

Các bộ chọn thuộc tính có thể khớp với sự hiện diện hoặc giá trị của một thuộc tính HTML. Khớp chính xác rất hữu ích cho các trạng thái ổn định và nhãn ngữ nghĩa, trong khi khớp tiền tố, hậu tố và chuỗi con có thể giúp khi một thuộc tính chứa một token có thể dự đoán. Mỗi khớp một phần nên đủ hẹp để một giá trị mới, không liên quan không thể vào kết quả mà không bị chú ý.

Ưu tiên các thuộc tính mô tả danh tính, vai trò hoặc ý nghĩa miền. Một tài liệu data-sku, tên biểu mẫu, đích liên kết hoặc thuộc tính khả năng tiếp cận có thể bền vững hơn một lớp được tạo bởi một quy trình xây dựng. Tuy nhiên, không có thuộc tính nào là tự động vĩnh viễn. Xác nhận hành vi của nó trên nhiều loại trang, vùng địa lý, trạng thái đăng xuất và biến thể nội dung.

Trích dẫn giá trị thuộc tính là mặc định thực tiễn, đặc biệt khi các giá trị chứa dấu câu hoặc khoảng trắng. Khi văn bản, URL hoặc định danh được lắp ráp vào bộ chọn tại runtime, hãy thoát chúng bằng các cơ sở hạ tầng bộ chọn do nền tảng cung cấp. Nối chuỗi thô có thể tạo ra các bộ chọn không hợp lệ hoặc chọn một nút khác với dự định.

Các Lớp Giả Thêm Gì Cho Sự Lựa Chọn?

Các lớp giả thể hiện các điều kiện không được viết dưới dạng một phần tử đơn giản, lớp hoặc thuộc tính. Các hình thức cấu trúc có thể xác định một đứa trẻ theo vị trí, lọc các phần tử theo loại hoặc loại trừ một trạng thái đã biết. Các hình thức logic như :is(), :where(), và :not() có thể nhóm các lựa chọn thay thế hoặc loại bỏ các khớp không mong muốn khi động cơ bộ chọn hỗ trợ chúng.

Các lớp giả dựa trên vị trí cần được cảnh giác trong việc trích xuất. Thẻ thứ ba trên một trang có thể trở thành thẻ thứ tư sau khi một khuyến mãi được chèn vào. Một quy tắc vị trí là phù hợp khi vị trí tự nó xác định trường, chẳng hạn như ô đầu tiên trong một sơ đồ bảng cố định. Nó yếu hơn khi được sử dụng chỉ vì nút mong muốn tình cờ chiếm vị trí đó trong quá trình phát triển.

Hỗ trợ khác nhau giữa các thư viện trình duyệt và phân tích, đặc biệt là đối với các tính năng quan hệ mới hơn. Kiểm tra tài liệu cho động cơ bộ chọn thực tế và giữ một bài kiểm tra tương thích trong dự án. Một bộ chọn được chấp nhận bởi một trình duyệt hiện tại không phải là bằng chứng rằng thư viện phân tích phía máy chủ sẽ đánh giá nó theo cùng một cách.

Bạn Trích Xuất Các Bản Ghi Lặp Lại Với CSS Như Thế Nào?

Bắt đầu bằng cách chọn các bộ chứa bản ghi thay vì chọn mọi trường trên toàn tài liệu. Đối với mỗi bộ chứa, chạy các bộ chọn tương đối cho tiêu đề, giá, liên kết, trạng thái hoặc các trường khác. Điều này giữ mối quan hệ giữa các giá trị và ngăn giá thứ ba không bị ghép nối với tiêu đề sản phẩm thứ tư.

Việc trích xuất theo mức bản ghi cũng giúp quản lý các trường tùy chọn. Một thẻ sản phẩm có thể bỏ qua số lượng đánh giá mà không làm dịch chuyển các giá trị từ các thẻ bên cạnh. Việc ánh xạ có thể trả về một giá trị null cho trường đó trong khi vẫn giữ nguyên phần còn lại của bản ghi và đính kèm trạng thái xác thực.

Sau khi trích xuất, hãy kiểm tra số lượng container và số lượng của mỗi trường. Một bộ chọn tiêu đề trả về hai nút bên trong một thẻ có thể đã khớp cả tiêu đề hiển thị và một bản sao khả năng tiếp cận. Hãy quyết định rõ ràng xem có nên lấy một giá trị, kết hợp giá trị, hay đánh dấu bản ghi để kiểm tra.

Làm Thế Nào Để Bạn Duy Trì Thư Viện Bộ Lựa Chọn?

Giữ các bộ chọn gần với định nghĩa trường và đặt tên chúng theo nghĩa thay vì hình thức trang. Một ánh xạ được gọi là productTitle truyền đạt nhiều hơn largeBlueText. Bao gồm loại trang dự kiến, cho dù bộ chọn trả về một hoặc nhiều nút, và kết quả vắng mặt có nghĩa là gì.

Sử dụng các đoạn mã hoặc đoạn trích đã được ghi lại thể hiện các biến thể trang đã biết. Các bài kiểm tra nên xác nhận các giá trị được trích xuất và ghi lại các ranh giới, không chỉ rằng một bộ chọn trả về một cái gì đó. Khi đánh dấu thay đổi, hãy so sánh đoạn mã không thành công với một bản ghi hiện tại và cập nhật neo ổn định nhỏ nhất.

Rút gọn các bộ chọn một cách có chủ đích. Nếu hai bố cục đồng thời tồn tại, hãy định tuyến mỗi bố cục đến một ánh xạ có phiên bản thay vì xây dựng một biểu thức với nhiều lựa chọn không liên quan. Các phiên bản bộ chọn rõ ràng giúp có thể đo lường các mẫu nào vẫn xuất hiện và loại bỏ các quy tắc lỗi thời khi nguồn không còn sử dụng chúng nữa.

Kết luận

Một bộ chọn CSS là một cách ngắn gọn để tìm các phần tử trong một cây tài liệu đã được phân tích. Đối với việc lấy dữ liệu từ web, các bộ chọn tốt nhất là dễ đọc, có phạm vi, dựa trên các thuộc tính bền vững, và được kiểm tra dựa trên cả số lượng khớp mong đợi và giá trị trường.