XPath so với CSS Selectors: Cách chọn cho Web Scraping
TL;DR
Các bộ chọn CSS thường ngắn gọn cho cấu trúc và thuộc tính của phần tử, trong khi XPath hữu ích cho các trục rõ ràng và duyệt văn bản.
Chọn một bộ chọn được hỗ trợ bởi engine thực tế của bạn, không phải là một tuyên bố tổng quát về họ cú pháp.
CSS hiện đại có các bộ chọn quan hệ, nhưng hỗ trợ khác nhau giữa các trình duyệt và bộ phân tích phía máy chủ.
::text và ::attr(...) của Parsel là các mở rộng trích xuất, không phải là các bộ chọn CSS tiêu chuẩn của trình duyệt.
Danh tính ổn định, phạm vi, độ đếm và kiểm tra giá trị quan trọng hơn việc bộ chọn bắt đầu như CSS hay XPath.
Một bộ chọn không thể trích xuất nội dung vắng mặt khỏi tài liệu mà nó nhận; việc thu thập và hiển thị phải được chẩn đoán riêng biệt.
Bạn Có Nên Sử Dụng XPath Hay CSS Selectors Để Web Scraping?
Sử dụng các bộ chọn CSS khi chúng rõ ràng bày tỏ mối quan hệ cấu trúc hoặc thuộc tính yêu cầu, và sử dụng XPath khi các trục hoặc thao tác văn bản của nó làm cho mối quan hệ bản ghi trở nên rõ ràng hơn. Bộ chọn tốt nhất là một bộ chọn mà engine trích xuất của bạn hỗ trợ và nhóm của bạn có thể duy trì đối với các tài liệu đại diện. Không có người chiến thắng phổ quát giữa các trình duyệt, công cụ XML và bộ phân tích HTML phía máy chủ.
Một quy tắc khởi đầu hữu ích là chọn biểu thức đơn giản nhất xác định trường mong muốn trong một bản ghi được xác định rõ ràng. Sau đó khẳng định có bao nhiêu kết quả nên tồn tại và các giá trị mà chúng có thể chứa. Một bộ chọn ngắn mà khớp với mọi giá trên một trang tồi tệ hơn một bộ chọn hơi dài hơn gắn liền với danh tính sản phẩm chính xác.
Lớp thu thập vẫn độc lập. Nstdata Crawl có thể cung cấp các đại diện trang cho một bộ phân tích hạ nguồn, nhưng CSS và XPath hoạt động trên đại diện thực tế được trả về. Một bộ chọn không thể phục hồi một trường bị bỏ qua do việc hiển thị không đầy đủ hoặc dọn dẹp.
XPath và CSS So Sánh Như Thế Nào Trong Thực Tế?
XPath và CSS khác nhau về phong cách biểu thức, thao tác duyệt, loại kết quả và hỗ trợ engine. Những sự khác biệt đó trở nên hữu ích chỉ khi gắn với một nhiệm vụ trích xuất cụ thể.
Tại Sao “CSS Không Thể Chọn Một Cha” Là Một Quy Tắc Không Đầy Đủ?
“CSS không thể chọn một cha” là một quy tắc không đầy đủ vì các bộ chọn quan hệ hiện đại có thể diễn đạt một số mối quan hệ mà các hướng dẫn CSS cũ hơn đã loại trừ. Hỗ trợ trong engine thực tế vẫn là yếu tố quyết định. Một trình duyệt hỗ trợ một bộ chọn không xác lập rằng một bộ phân tích phía máy chủ cũ hơn hỗ trợ nó.
Ví dụ, một trận match quan hệ có thể xác định một phần tử chứa một hậu duệ cụ thể. XPath diễn đạt mối quan hệ đó với các predicates hoặc axes riêng của nó. Phiên bản nào rõ ràng hơn phụ thuộc vào tài liệu và engine. Đừng biến một khoảng trống hỗ trợ của một engine thành một tuyên bố về tất cả các triển khai CSS.
Việc khớp văn bản cần sự chú ý tương tự. CSS tiêu chuẩn không phải là một ngôn ngữ truy vấn văn bản tổng quát. Các thư viện có thể thêm các predicate văn bản đặc biệt, và các khung tự động hóa có thể cung cấp các bộ định vị văn bản hoặc khả năng tiếp cận. Những sự tiện lợi đó là API công cụ với ngữ nghĩa riêng của chúng. Bảo tồn sự phân biệt đó khi tài liệu hóa một extractor cần phải di động.
Bạn Nên Chuẩn Bị Gì Trước Khi Viết Một Bộ Chọn?
Chuẩn bị một tài liệu đại diện, một danh tính bản ghi ổn định, một định nghĩa trường và số lượng kết quả dự kiến trước khi viết bộ chọn. Ghi lại cả những trường hợp trang thông thường và đã thay đổi. Nếu nguồn của bạn có các biến thể, tiền tệ hoặc mối quan hệ danh sách/chi tiết, bao gồm các trường hợp đó trong bộ fixture.
Để trình diễn, sử dụng Python và cài đặt parsel. Phiên bản gói đã thử nghiệm là 1.12.1. Không cần tài khoản hoặc truy cập trang từ xa cho ví dụ HTML có kiểm soát. Tài liệu hướng dẫn sử dụng Parsel mô tả việc trích xuất CSS và XPath, bao gồm các mở rộng CSS của nó.
Giữ ít nhất một trường hợp tiêu cực: không có hồ sơ nào khớp, hai danh tính khớp, một trường thiếu, hoặc một đơn vị bất ngờ. Một bộ chọn hoạt động trên một trang đã lưu nhưng âm thầm chấp nhận hàng sai sau khi thay đổi nguồn không phải là một hợp đồng dữ liệu đáng tin cậy. Hướng dẫn so sánh trình phân tích cú pháp giúp tách biệt hành vi của động cơ khỏi sở thích của bộ chọn.
Làm Thế Nào Để So Sánh Các Biểu Thức CSS và XPath Tương Đương?
So sánh các biểu thức tương đương bằng cách yêu cầu chúng trả về cùng một trường dự kiến từ cùng một tài liệu. Cấu hình sau đây chứa hai bản ghi giống sản phẩm, và việc trích xuất được giới hạn cho danh tính A17.
Bước 1: Lưu bộ chọn dò tìm
Lưu cái này dưới dạng selector_probe.py, tránh các tên xung đột với các mô-đun thư viện chuẩn của Python. Cấu hình và các giá trị là minh họa; trình phân tích cú pháp và các khẳng định là mã đã thực thi.
Chạy python selector_probe.py. Kết quả đã xác minh chứa giá ['29.00'] và chủ sở hữu ['A17']. Điều này xác nhận việc trích xuất tương đương trên cấu hình được kiểm soát và chứng minh việc đi qua tổ tiên rõ ràng của XPath. Đây không phải là một so sánh hiệu suất tổng quát.
Bước 3: Thêm các trường hợp thay đổi nguồn
Thay đổi cấu hình để bao gồm một bản ghi khác, các gói bố cục bổ sung, một giá thiếu, hoặc nhiều hơn một giá. Quyết định những thay đổi nào nên bảo tồn kết quả và những thay đổi nào nên thất bại trong việc chấp nhận. Sự phù hợp chính xác của lớp trong ví dụ này được gắn kết một cách cố ý với một cấu hình có một lớp price duy nhất; đối với một nguồn có nhiều mã lớp, hãy sử dụng một dự đoán XPath nhận biết mã hoặc một chiến lược khác đã được tài liệu thay vì sự bình đẳng chính xác.
Một bài kiểm tra thành công nên thiết lập danh tính, số lượng, và ý nghĩa trường. Đừng chấp nhận một mảng rỗng như một cập nhật thành công khi nguồn dự kiến sẽ chứa bản ghi.
Làm Thế Nào Để Làm Cho Các Bộ Chọn Bền Bỉ Hơn?
Làm cho các bộ chọn bền bỉ hơn bằng cách neo chúng vào ngữ nghĩa ổn định và hạn chế phạm vi của chúng trước khi chọn một trường. Ưu tiên các thuộc tính dữ liệu đã được tài liệu, ID ổn định, hoặc một mối quan hệ bản ghi rõ ràng khi nguồn cung cấp chúng. Các lớp được tạo và các đường dẫn vị trí dài thường mã hóa các chi tiết trình bày có thể thay đổi độc lập với dữ liệu.
Bắt đầu từ chứa bản ghi và chọn bên trong nó. Nếu một trang chứa cả giá danh sách và giá khuyến mãi, hãy xác định cái nào mà lược đồ yêu cầu. Kiểm tra tiền tệ và ngữ cảnh biến thể tách biệt với việc trích xuất văn bản trông số. Đây là các kiểm tra ý nghĩa, và không có gia đình cú pháp nào tự động thực hiện chúng.
Giữ việc trích xuất và chuẩn hóa khác biệt. Việc chuẩn hóa văn bản có thể hợp nhất khoảng trắng có ý nghĩa, kết hợp các nhãn ẩn, hoặc bỏ qua nội dung lồng ghép tùy thuộc vào API được sử dụng. Lưu các giá trị dự kiến đại diện và kiểm tra nguồn khi chúng thay đổi. Quy trình trích xuất có cấu trúc giải thích lý do tại sao tuần tự chỉ là một giai đoạn của việc chấp nhận.
Tự Động Hóa Trình Duyệt Có Nên Sử Dụng Các Bộ Chọn Giống Như Một Trình Phân Tích Tĩnh?
Tự động hóa trình duyệt nên sử dụng các bộ chọn và bộ định vị phù hợp với thời gian chạy của nó thay vì mù quáng tái sử dụng các biểu thức trình phân tích tĩnh. Một trình duyệt có thể tiết lộ văn bản đã hiển thị, các khung, các gốc bóng, và các cập nhật bất đồng bộ mà một tài liệu HTML đã lưu không đại diện theo cùng một cách.
Hướng dẫn chỉ dẫn bộ định vị Playwright mô tả hành vi bộ định vị và tính năng tự động chờ. Đối với tương tác UI, các vai trò và nhãn định vị có thể thể hiện ý định rõ ràng hơn so với một đường dẫn DOM dài. Đối với việc trích xuất dữ liệu, các thuộc tính nguồn ổn định và kiểm tra trường rõ ràng vẫn có thể phù hợp.
Đừng giả định rằng việc chờ bộ định vị thiết lập tính đầy đủ của dữ liệu. Một phần tử có thể tồn tại trước khi giá trị của nó được điền, hoặc cùng một bộ chọn có thể khớp với một màn hình đồng ý. Chờ một trường hoặc trạng thái có ý nghĩa và xác minh nội dung được chấp nhận. Đối xử với ranh giới khung và gốc bóng như những yêu cầu thực hiện rõ ràng hơn là lý do để lặp qua các bộ chọn ngẫu nhiên.
Thử Nstdata miễn phí →
Nstdata Crawl Có Thể Giúp Gì Trước Khi Xuất Dữ Liệu Dựa Trên Bộ Lựa Chọn?
Nstdata Crawl có thể giúp khi bộ phân tích thiếu tài liệu cần thiết vì việc thu thập hoặc kết xuất là rào cản thực sự. Nstdata Crawl là một API thu thập web cho dữ liệu sẵn sàng cho LLM có thể biến các trang web có giới hạn thành đầu ra trang tái sử dụng. Khám phá trang web và hỗ trợ thu thập đệ quy giúp kiểm soát phạm vi. Kết xuất JavaScript có thể làm đầy nội dung động trước khi chuyển đổi đại diện. Bộ trích xuất của bạn vẫn chọn mối quan hệ bản ghi chính xác và xác thực các trường.
HTML và bằng chứng thay thế: HTML hữu ích cho việc phân tích nhạy bén với DOM, Markdown cho ngữ cảnh AI, liên kết để khám phá, và PDF hoặc ảnh chụp màn hình để xem xét. Đầu ra thô có thể giúp giải thích lý do một trường biến mất trước khi phân tích.
Tập hợp nguồn có giới hạn: Đặt giới hạn trang và độ sâu, sử dụng quy tắc bao gồm/loại trừ, và so sánh các URL trả về với danh mục đã được phê duyệt. Một bộ lựa chọn trích xuất không phải là sự thay thế cho phạm vi thu thập.
Định tuyến proxy tích hợp sẵn: Các cuộc gọi tiêu chuẩn tránh cấu hình Proxy Host, Port, Username, Password và Protocol riêng biệt. Tính đến việc định tuyến lưu lượng cùng với việc sử dụng URL trong mô hình thanh toán thu thập.
Để kiểm tra nội dung quản lý ban đầu, tạo một khóa thông qua Dashboard → Crawl Playground, cài đặt nstdata-ai-crawl dưới Python 3.10 hoặc phiên bản mới hơn, và thiết lập NSTDATA_API_TOKEN và APPROVED_PAGE_URL. Ví dụ phụ thuộc vào thông tin xác thực dưới đây yêu cầu khóa của riêng bạn và mục tiêu được phép. Nó xác minh Markdown trả về để kiểm tra; yêu cầu HTML khi áp dụng một bộ lựa chọn DOM ở giai đoạn tiếp theo.
[Screenshot: Nstdata Crawl Playground với mục tiêu đã được phê duyệt và định dạng yêu cầu; giữ bí mật khóa API.]
import os
from pathlib import Path
from nstdata_ai_crawl import NstDataClient, ScrapeRequestDto
with NstDataClient(os.environ["NSTDATA_API_TOKEN"], max_response_bytes=1_048_576)as client: result = client.submit_scrape_task_sync(ScrapeRequestDto( url=os.environ["APPROVED_PAGE_URL"], formats=["markdown"], onlyMainContent=True, timeout=60000,))if result.success isnotTrueor result.status !="completed":raise RuntimeError("Thu thập không hoàn thành thành công")if result.data isNoneor result.data.truncated isTrue:raise RuntimeError("Nội dung thiếu hoặc một phần yêu cầu xem xét") text = result.data.get_markdown()ifnot text ornot text.strip():raise RuntimeError("Không có Markdown có thể sử dụng được trả về") expected = os.environ.get("EXPECTED_TEXT")if expected and expected notin text:raise RuntimeError("Văn bản nguồn cần thiết còn thiếu") Path("accepted-page.md").write_text(text, encoding="utf-8")print("Đã lưu accepted-page.md; xác thực các sự kiện trước khi đưa vào")
Kiểm tra đầu ra trước khi thay đổi bộ trích xuất. Nếu văn bản yêu cầu vắng mặt khỏi mọi đại diện hữu ích, vấn đề nằm ở đầu phía trên CSS hoặc XPath. Hướng dẫn trang nhiều JavaScript giúp tách biệt việc kết xuất không hoàn thiện với sự thất bại của bộ phân tích.
Bạn Nên Làm Gì Khi Một Bộ Lựa Chọn Ngừng Hoạt Động?
Khi một bộ lựa chọn ngừng hoạt động, hãy so sánh tài liệu nhận được với thiết bị được chấp nhận trước khi viết lại biểu thức. Ghi lại xem bản ghi đã biến mất, di chuyển, thay đổi danh tính, hoặc đến trong một đại diện khác.
Triệu chứng
Nguyên nhân có thể
Kiểm tra tiếp theo
Không có sự phù hợp trong cả hai cú pháp
Thiếu nội dung hoặc thay đổi phạm vi bản ghi
Kiểm tra việc thu thập và HTML giữ lại
Quá nhiều sự phù hợp
Bộ lựa chọn không được chỉ định cho một danh tính
Kiểm tra số lượng chứa và kết quả
Hoạt động trong DevTools nhưng thất bại trong bộ phân tích
Tính năng không được hỗ trợ của engine hoặc DOM khác
Kiểm tra phiên bản và đại diện đầu vào thực tế
Số lượng nhìn đúng, mặt hàng sai
Sự phù hợp trình bày mà không có danh tính
Xác thực khóa thực thể và ngữ cảnh
Văn bản khác nhau giữa các lần chạy
Trạng thái động hoặc chuẩn hóa
So sánh trạng thái kết xuất và API trích xuất
Giữ các hàng bị từ chối tách biệt và bảo tồn dữ liệu đã được chấp nhận lần cuối. Đừng thay thế một bộ lựa chọn ổn định bằng một bộ rộng hơn chỉ để làm cho kết quả không rỗng.
Bạn Nên Giữ Bộ Lựa Chọn Nào?
Giữ lại bộ lựa chọn mà rõ ràng nhất thể hiện mối quan hệ nguồn và vượt qua các bài kiểm tra tích cực và tiêu cực đại diện trong engine thực tế của bạn. Tài liệu bất kỳ mở rộng hoặc giả định phiên bản nào để người duy trì khác có thể tái hiện hành vi. Đầu ra HTML và hình ảnh của Nstdata có thể cung cấp bằng chứng bổ sung khi một sự thất bại bắt đầu trước giai đoạn bộ lựa chọn.
Không. Hiệu suất phụ thuộc vào engine, tài liệu, biểu thức và khối lượng công việc. Đo lường các tác vụ tương đương trước khi đưa ra tuyên bố về hiệu suất.
Q: ::text có phải là CSS chuẩn của trình duyệt không?
Không. Trong ví dụ này, nó là một phần mở rộng trích xuất Parsel và không nên được sao chép nguyên trạng vào các cuộc gọi querySelector của trình duyệt.
Q: CSS hiện đại có thể diễn đạt các mối quan hệ giống như cha không?
Một số mối quan hệ có thể được diễn đạt bằng các bộ chọn quan hệ, nhưng cần phải kiểm tra hỗ trợ trong trình duyệt hoặc bộ phân tích thực tế.
Q: XPath có thể trích xuất dữ liệu JavaScript mà không bao giờ đến tài liệu không?
Không. XPath hoạt động trên tài liệu được cung cấp; việc hiển thị hoặc một phương pháp thu thập được phê duyệt khác phải cung cấp nội dung trước.
Q: Điều gì quan trọng hơn việc lựa chọn cú pháp?
Danh tính ổn định, phạm vi chính xác, hành vi engine được hỗ trợ, số lượng mong đợi và xác thực trường thường quan trọng hơn sở thích cú pháp.
Ivy Lin
Nov. 12th 2026
Thu thập toàn bộ trang web chỉ với một yêu cầu API
Tỷ lệ thành công 99,8% với kết xuất JavaScript
Nhận dữ liệu sạch, sẵn sàng cho LLM ở nhiều định dạng
Chuyển mọi trang web thành Markdown, HTML, JSON, liên kết, PDF và hơn thế nữa mà không cần quản lý hạ tầng thu thập dữ liệu.
