Bỏ để qua phần nội dung

Bộ chọn XPath và CSS: Hướng dẫn chuyên sâu dành cho chuyên gia quét web

Trong hơn 10 năm làm chuyên gia quét web của tôi, có rất ít câu hỏi thường xuyên được đặt ra như "Tôi có nên sử dụng bộ chọn XPath hay CSS không?"

Mặc dù không có câu trả lời đúng duy nhất nhưng việc hiểu được những điểm khác biệt chính giữa hai công nghệ lựa chọn yếu tố này có thể giúp bạn trở thành người thực hành có nhiều thông tin hơn.

Trong hướng dẫn toàn diện này, tôi sẽ trình bày mọi thứ bạn cần biết về XPath và CSS từ góc độ tìm kiếm web:

  • Nguồn gốc và sự tiến hóa
  • Cú pháp và cấu trúc truy vấn
  • Khả năng và hạn chế
  • Cân nhắc về hiệu suất
  • Hỗ trợ và tiêu chuẩn trình duyệt
  • Hỗ trợ công cụ và thư viện

Mục tiêu của tôi là cung cấp những hiểu biết sâu sắc mà bạn cần, với tư cách là nhà phát triển và người thu thập dữ liệu, để xác định thời điểm nên sử dụng XPath và CSS cho bất kỳ công việc trích xuất web cụ thể nào.

Sẵn sàng? Hãy đi sâu vào.

Tóm tắt lịch sử

XPath có nguồn gốc là ngôn ngữ truy vấn cho các tài liệu XML, trong khi CSS được thiết kế để tạo kiểu cho các trang web.

Nhưng theo thời gian, chúng nổi lên như những công cụ lựa chọn phần tử mạnh mẽ cho nhu cầu tự động hóa và thu thập dữ liệu.

Sự trỗi dậy của XPath

Khi XML trở nên phổ biến vào những năm 1990, các nhà phát triển cần một cách tiêu chuẩn để nhắm mục tiêu các nút trong các tài liệu phức tạp.

XPath được tạo ra vào năm 1999 để đáp ứng nhu cầu này.

W3C đã sử dụng XPath làm thành phần chính của XSLT và XQuery. Và các phần mềm khác như Selenium và Scrapy tích hợp XPath hỗ trợ tìm kiếm các phần tử HTML trên các trang web được hiển thị.

Bằng cách mô hình hóa DOM dưới dạng cây, XPath cung cấp khả năng truyền tải mạnh mẽ lên, xuống và qua các nhánh.

Bộ chọn CSS trở nên phổ biến

CSS được thiết kế như một ngôn ngữ tạo kiểu và bao gồm các bộ chọn cơ bản như loại, ID và lớp.

Khi CSS trở thành một phần không thể thiếu trong phát triển web vào những năm 1990, các trình duyệt đã đầu tư rất nhiều vào việc tối ưu hóa các công cụ CSS.

Hiệu suất này kết hợp với tính phổ biến đã làm cho bộ chọn CSS trở nên hấp dẫn đối với nhu cầu quét web.

Các thư viện thu thập dữ liệu như Beautiful Soup đã sử dụng bộ chọn CSS làm chiến lược định vị nhanh.

Vì vậy, trong khi XPath nhắm mục tiêu toàn bộ các tài liệu XML/HTML, CSS lại tập trung vào việc tạo kiểu cho các phần tử giao diện người dùng hiển thị.

So sánh cú pháp XPath và CSS

Hãy giải nén cú pháp của XPath và CSS thông qua một số ví dụ.

Hãy xem xét trang đơn giản này:

<html>

<body>
  <div>
    <h2>Hello World</h2>
    <p>This is a page</p> 
  </div>

  <ul>
    <li class="highlight"><span>List item 1</span></li>
    <li>List item 2</li>    
  </ul>

</body>

</html>

Cú pháp XPath

DOM được coi như một cây nút. XPath sử dụng các biểu thức đường dẫn để di chuyển giữa các nút:

  • /html/body - Chọn <body> thành phần
  • //li[1] – Chọn trước <li>
  • //h2/text() – Nhận văn bản bên trong <h2>
  • //span/ancestor::ul - Đi lên <ul> cha mẹ

Một số điều đáng chú ý:

  • Cấu trúc phân cấp dựa trên vị trí DOM
  • "//" để tìm kiếm trên toàn cầu; "/" cho con trực tiếp
  • [ ] cho các vị ngữ và chức năng như position()

Cú pháp bộ chọn CSS

CSS sử dụng cú pháp khớp mẫu đơn giản cho các phần tử mục tiêu:

  • body - Lựa chọn <body> tag
  • .highlight – Chọn theo tên lớp
  • ul > li - Cuộc thi đấu <li> trong <ul>
  • h2 + p – Bộ kết hợp anh chị em liền kề

Quan sát:

  • Mẫu phẳng, không phân cấp
  • Các ký tự đặc biệt như >, + để xác định các mối quan hệ
  • Không có cách nào để đi lên cây

Vì vậy, tóm lại, XPath hướng tới truy vấn tài liệu có cấu trúc, trong khi CSS cung cấp khả năng khớp chuỗi con đơn giản.

So sánh tính năng XPath và CSS

Với những điều cơ bản được đề cập, hãy so sánh một số điểm khác biệt chính:

Truyền tải DOM

  • XPath có thể di chuyển lên và xuống
  • Bộ chọn CSS chỉ cho phép di chuyển xuống

Điều này làm cho XPath linh hoạt hơn.

Dễ đọc

  • Bộ chọn CSS thường dễ đọc và ngắn gọn hơn
  • Chuỗi XPath dài có thể trở nên phức tạp

Vì vậy, đối với các truy vấn đơn giản hơn, CSS có lợi thế hơn.

HIỆU QUẢ

  • Bộ chọn CSS thường nhanh hơn do tối ưu hóa trình duyệt
  • Nhưng đối với các trang phức tạp, khoảng cách sẽ thu hẹp lại

Trong hầu hết các trường hợp, tốc độ có thể so sánh được.

So khớp một phần

  • Hỗ trợ XPath contains() để tìm kiếm một phần văn bản
  • CSS thiếu hỗ trợ gốc, một số lớp giả chỉ hoạt động trên các kết quả khớp chính xác

Ở đây XPath có chức năng tốt hơn.

Hỗ trợ ngôn ngữ

  • XPath có thể truy vấn cả XML và HTML
  • CSS chỉ hoạt động với HTML/DOM

XPath hữu ích cho cả hai định dạng dữ liệu.

Sử dụng cái nào khi cạo?

Dựa trên khả năng của họ, đây là một số đề xuất về thời điểm nên mặc định sử dụng XPath hoặc CSS:

Ưu tiên XPath khi bạn cần:

  • Duyệt qua cây DOM
  • Tìm kiếm một phần giá trị văn bản
  • Truy vấn XML (không chỉ HTML)
  • Sử dụng logic điều kiện nâng cao

Ưu tiên Bộ chọn CSS khi bạn muốn:

  • Viết các truy vấn ngắn và đơn giản
  • Tận dụng tối ưu hóa trình duyệt
  • Hỗ trợ các thư viện như Beautiful Soup
  • Xác định vị trí các thành phần UI hiển thị

Nhưng không có quy tắc cứng nhắc nào – kinh nghiệm sẽ cho bạn biết khi nào thì phù hợp hơn.

Thường sử dụng cả hai cùng nhau là cách tiếp cận tối ưu.

Hỗ trợ và tiêu chuẩn trình duyệt

Tất cả các trình duyệt hiện đại đều hỗ trợ đầy đủ cho XPath và CSS:

Đặc tínhcơ rômFirefoxSafari
Xpath
Bộ chọn CSS

Và cả hai đều là tiêu chuẩn Web:

  • XPath là khuyến nghị của W3C
  • CSS được chuẩn hóa bởi W3C

Vì vậy, bạn có thể tin cậy vào sự hỗ trợ tuyệt vời trên nhiều trình duyệt cho cả hai công nghệ.

Kết luận và rút ra chính

Sự lựa chọn giữa XPath và CSS tùy thuộc vào khả năng của chúng hơn là hiệu suất.

Lời khuyên của tôi là hãy thông thạo cả hai và để trường hợp sử dụng hướng dẫn lựa chọn của bạn.

Để tra cứu phần tử đơn giản, hãy ưu tiên CSS để dễ đọc.

Khi bạn cần truyền tải DOM mạnh mẽ hoặc khớp một phần, hãy sử dụng XPath.

Nếu có thể, hãy sử dụng XPath và CSS cùng nhau để hưởng lợi từ sức mạnh tổng hợp của chúng.

Với kinh nghiệm trích xuất dữ liệu từ web, bạn sẽ tự nhiên biết được khi nào nên tận dụng XPath so với các bộ chọn CSS để phát huy tối đa tiềm năng của chúng.

Tôi hy vọng hướng dẫn này đã cung cấp cái nhìn tổng quan toàn diện về các điểm mạnh, sự khác biệt và ứng dụng chính của chúng cho nhu cầu quét web của bạn.

Chúc mừng giải nén!

Tham gia vào cuộc đối thoại

Chúng tôi sẽ không công khai email của bạn. Các ô đánh dấu * là bắt buộc *