CSS Selector là gì?

Các Selector liên quan đến Cây Tài liệu

CSS selectors khớp với các phần tử theo tên, thuộc tính, mối quan hệ và các điều kiện hỗ trợ. Ngôn ngữ Thông số kỹ thuật ngôn ngữ Selectors mô tả ngôn ngữ mẫu tiêu chuẩn.

Trong một stylesheet, một phần tử khớp nhận các khai báo liên quan đến quy tắc. Trong một script trích xuất, một API selector trình duyệt trả về các phần tử đã khớp. Cùng một ngôn ngữ lựa chọn hỗ trợ các thao tác khác nhau vì việc khớp và sử dụng sự khớp là các bước riêng biệt.

Mô hình truy vấn DOM định nghĩa cây trình duyệt và các giao diện truy vấn. Một selector truy vấn cây cung cấp. Nó không thể phát hiện markup mà chưa bao giờ được lấy hoặc thực thi ứng dụng sẽ tạo ra các phần tử bị thiếu.

Ranh giới đầu vào đó là thiết yếu cho việc scraping. Một selector được sao chép từ một trang trình duyệt được hiển thị có thể không tìm thấy gì trong một phản hồi HTTP ban đầu vì trình duyệt đã tạo ra bản ghi sau đó. Kiểm tra tài liệu được sử dụng bởi thời gian chạy của bạn trước khi xử lý một sự khớp trống như một lỗi cú pháp.

Chọn selectors từ cấu trúc nguồn thực tế. Các lớp trông mô tả không tự động ổn định, và một selector gọn gàng không tự động chính xác cho trường bạn cần.

Element, Class, ID, và Attribute Selectors

CSS selectors cơ bản khớp với các loại phần tử, token lớp, ID hoặc thuộc tính. Những mẫu này hữu ích khi nguồn cung cấp một định danh đáng tin cậy cho thực thể hoặc trường.

Selector a khớp với các phần tử anchor trong một tài liệu HTML điển hình. Một selector lớp như .product khớp với một phần tử có token lớp đó; nó không có nghĩa là thuộc tính lớp hoàn chỉnh của phần tử phải bằng từ đó. Một selector ID như #catalog khớp với giá trị ID liên quan.

Một selector thuộc tính như a[href] khớp với các anchor mang thuộc tính href. Một bài kiểm tra giá trị có thể thu hẹp sự lựa chọn hơn nữa. Đây là các ví dụ cú pháp, không phải selectors đã được xác minh chống lại một trang web đích cụ thể.

Ưu tiên các thuộc tính có ý nghĩa phù hợp với trường khi nguồn cung cấp chúng. Một thuộc tính danh tính sản phẩm có thể diễn đạt bản ghi tốt hơn một lớp layout được tạo ra. Vẫn cần xác minh thuộc tính đó trên các trang đại diện; một tên nghe có vẻ ngữ nghĩa có thể được sử dụng không nhất quán.

Đừng cho rằng một ID làm cho một trường trở nên chính xác. Một trang có thể chứa markup trùng lặp hoặc không mong đợi mặc dù có những mong đợi về việc tạo ra bình thường. Kiểm tra số lượng khớp và danh tính trang trong thời gian chạy trích xuất thay vì chỉ dựa vào sự độc nhất rõ rệt của một chuỗi.

Các Combinator và Truy Vấn theo Phạm vi Bản ghi

Các combinator mô tả các mối quan hệ giữa các phần tử đã khớp. Một khoảng trắng chọn các phần tử con, trong khi > cần một mối quan hệ con trực tiếp. Các combinator đồng cấp thể hiện các mối quan hệ giữa các phần tử chia sẻ một cha.

Đối với một cây thẻ sản phẩm minh họa, .product a có thể khớp với các anchor ở bất kỳ đâu dưới một thẻ, trong khi .product > a cần một anchor ngay bên dưới nó. Một bộ bọc mới có thể ảnh hưởng đến selector thứ hai mà không thay đổi ý nghĩa hiển thị của bản ghi.

Chọn mối quan hệ một cách có chủ đích. Một truy vấn phần tử con rộng có thể bao gồm các liên kết gợi ý, trong khi một đường dẫn con quá chính xác có thể mã hóa thông tin trình bày không liên quan đến trường. Kiểm tra nguồn để xác định mối quan hệ nào xác định phần tử mong muốn.

Đối với các bản ghi lặp lại, trước tiên hãy xác định từng container bản ghi và truy vấn các trường của nó trong ngữ cảnh đó. Đừng thu thập độc lập tất cả các tiêu đề và tất cả các giá mỗi trang và kết hợp chúng theo chỉ số. Các trường thiếu hoặc các module đã chèn có thể khiến các danh sách đó không đồng ý.

Các truy vấn trình duyệt theo phạm vi cũng xứng đáng được kiểm tra nơi các mối quan hệ tổ tiên hoặc các selectors phức tạp hơn có liên quan. Sử dụng :scope khi mối quan hệ mong muốn cần tham chiếu rõ ràng đến gốc truy vấn. Xác minh biểu thức trong thời gian chạy thực tế thay vì cho rằng mọi trình phân tích đều triển khai cùng một hành vi.

Pseudo-Classes và Điều kiện Cấu trúc

Pseudo-classes thêm các điều kiện vào việc khớp phần tử, bao gồm vị trí cấu trúc hoặc các mối quan hệ. Giá trị của chúng phụ thuộc vào việc điều kiện đó mô tả ý nghĩa dữ liệu ổn định hay một vị trí layout tạm thời.

Một selector sử dụng :nth-child() phụ thuộc vào vị trí của một phần tử giữa các phần tử cùng cấp. Thêm một phần tử cùng cấp mới có thể thay đổi vị trí đó. Một sự chọn lựa theo vị trí có thể hợp lệ cho một tài liệu cố định, nhưng cần chứng minh trước khi trở thành quy tắc trường bền vững.

Các bộ chọn quan hệ hiện đại như :has() có thể khớp với một phần tử dựa trên điều kiện bộ chọn tương đối. Điều đó có nghĩa là một tuyên bố tổng quát rằng CSS không bao giờ có thể chọn một mẫu liên quan tới cha là không chính xác. Hỗ trợ vẫn cần được kiểm tra trong thời gian thực nơi truy vấn sẽ chạy.

Các bộ chọn CSS chuẩn không cung cấp một tìm kiếm chuỗi con chung cho văn bản của phần tử. Một số thư viện thu thập dữ liệu thêm một :contains() phần mở rộng hoặc các định danh văn bản đặc biệt. Những giao diện đó tách biệt với ngôn ngữ bộ chọn trình duyệt chuẩn.

Giữ cho cú pháp phần mở rộng rõ ràng trong ghi chú triển khai của bạn. Một bộ chọn được chấp nhận bởi một thư viện có thể gây ra lỗi trong API truy vấn trình duyệt. Đối xử với khả năng tương thích phân tích cú pháp như một ràng buộc thực sự, đặc biệt khi di chuyển quy trình công việc thu thập dữ liệu giữa các môi trường.

Chọn phần tử và đọc giá trị trường

Lựa chọn CSS trả về các phần tử trong API truy vấn trình duyệt, trong khi việc trích xuất trường đọc dữ liệu từ những phần tử đó. Văn bản, thuộc tính và thuộc tính DOM có thể đại diện cho các giá trị khác nhau.

Đối với một liên kết, thuộc tính href có thể chứa một tham chiếu tương đối, trong khi thuộc tính tương ứng của trình duyệt có thể hiển thị một URL đã được giải quyết. Quyết định giá trị nào mà hợp đồng trường yêu cầu và bảo tồn tham chiếu nguồn khi điều đó giúp giải thích kết quả.

Đối với văn bản, phân biệt nội dung con thô với hành vi văn bản đã được hiển thị. Các phần tử ẩn, đánh dấu nội tuyến và khoảng trắng có thể ảnh hưởng đến giá trị thu được bởi thuộc tính đã chọn. Chuẩn hóa có chủ ý và giữ cho các điều kiện quan trọng đối với nhiệm vụ.

Hành vi kết quả của querySelectorAll trả về một tập hợp tĩnh của các phần tử đã khớp. Nó không liên tục cập nhật tập hợp đó khi các thay đổi trang sau này xảy ra. Nếu trang tạo thêm nhiều bản ghi, có thể cần một truy vấn mới để kiểm tra cây đã được cập nhật.

Kiểm tra độ đa dạng khớp trước khi chấp nhận một trường. Một API với một kết quả có thể lặng lẽ chọn kết quả đầu tiên trong vài khớp, và một kết quả trống có thể có nghĩa là nội dung bị thiếu hoặc tài liệu sai. Việc xác thực nên quyết định trạng thái nào thực sự áp dụng.

CSS Selectors so với XPath

Các bộ chọn CSS và XPath đều định vị nội dung trong cây tài liệu, nhưng chúng cung cấp các mô hình biểu thức và hành vi trả về khác nhau. Sử dụng hình thức mô tả rõ ràng trường dự định và hoạt động trong môi trường trích xuất của bạn.

Không ngôn ngữ nào đảm bảo thu thập ổn định. Một truy vấn liên kết với một đường dẫn bao bọc được tạo có thể bị gãy trong bất kỳ cú pháp nào. Hiệu suất thời gian thực cũng phụ thuộc vào việc triển khai và khối lượng công việc, vì vậy hãy đánh giá tác vụ thu thập thực tế nếu tốc độ ảnh hưởng đến thiết kế.

So sánh CSS và XPath cung cấp ngữ cảnh thực tiễn. Xác minh hỗ trợ hiện tại và tránh chuyển một phần mở rộng thư viện vào bộ chọn trình duyệt mà không kiểm tra nó.

Thiết kế các bộ chọn có thể được duy trì

Một bộ chọn có thể duy trì diễn đạt một trường xác định trong một bản ghi được công nhận và có quy tắc rõ ràng cho các khớp thiếu hoặc không rõ ràng. Nó nên có khả năng giải thích lý do bộ chọn xác định dữ liệu.

Kiểm tra các biến thể đại diện: sản phẩm giảm giá, mặt hàng không có sẵn, mẫu trang thay thế, và danh sách trống khi có liên quan. Nếu một bộ chọn khớp với giá bán trên một trang và giá đơn vị trên một trang khác, truy vấn cần có một hợp đồng chính xác hơn.

Giữ bằng chứng cho các bản ghi bị từ chối. Một sự gia tăng đột ngột trong các khớp bị thiếu có thể chỉ ra một sự thay đổi bố cục; nhiều khớp cho mỗi bản ghi có thể chỉ ra một mô-đun nội dung liên quan mới. Phân biệt những kết quả đó để một người vận hành có thể cập nhật quy tắc chính xác.

Đối với các trang phụ thuộc JavaScript, Trình duyệt Đại lý Scrapeless cung cấp thực thi đám mây được mô tả trong tài liệu Trình duyệt Đại lý. Trình duyệt tạo môi trường tài liệu; bộ chọn và quy tắc xác thực của bạn xác định các trường chấp nhận được.

Sử dụng Giá Scrapeless cho chi phí thực hiện hiện tại. Bao gồm công việc duy trì nhận diện trang và lựa chọn trường trong kế hoạch vận hành, vì một dịch vụ hiển thị không thể quyết định số lượng mà nhiệm vụ kinh doanh của bạn có nghĩa là gì.

Kết luận

Một bộ chọn CSS khớp các phần tử thông qua các thuộc tính và mối quan hệ của chúng. Việc scraping đáng tin cậy kết hợp sự lựa chọn đó với một ranh giới bản ghi, việc trích xuất giá trị rõ ràng và xác thực các khớp thiếu hoặc nhiều.

Bắt đầu với tài liệu thực tế và ý nghĩa của trường. Ưu tiên một bộ chọn rõ ràng có thể được thử nghiệm qua các biến thể nguồn, và ghi lại bất kỳ cú pháp cụ thể nào trong thời gian thực. Cách tiếp cận đó mang lại cho bạn một quy tắc trích xuất có thể hiểu được khi trang thay đổi.

Tài liệu tham khảo

• Rendering và thực thi Trình duyệt Agent
• Trình duyệt Agent Scrapeless
• So sánh CSS và XPath