Tại sao chúng ta không thể sử dụng bộ chọn CSS thay vì XPath?

Khi tôi đang học cạo, tôi đã thực hiện nhiều hướng dẫn về nó. Một số hướng dẫn đã sử dụng XPath và những hướng dẫn khác đã sử dụng Bộ chọn CSS của chúa. Cho đến hôm nay tôi luôn dùng đến CSS vì nó là sự lựa chọn quen thuộc. Tất cả những gì tôi mới về XPath là Scrapy sử dụng nó theo mặc định và bất kỳ bộ chọn CSS nào cũng được chuyển đổi thành XPath đằng sau hậu trường. Là một người hoàn toàn mới vào thời điểm đó, tôi đã không suy nghĩ nhiều về nó. Than ôi, đã đến lúc tôi phải chìm sâu vào chủ đề này và hiểu sự khác biệt giữa hai loại bộ chọn này là gì

 

Xpath

 

nó là gì

XPath là viết tắt của Đường dẫn XML. Nó sử dụng tài liệu XML và truy vấn nó để xác định các thành phần bên trong nó. Phần đường dẫn của XPath có nghĩa là chúng ta cần chỉ định đường dẫn từ đầu đến phần tử mong muốn

 

Ưu điểm của XPath

  • Cho phép điều hướng lên DOM khi tìm kiếm các phần tử
  • Linh hoạt hơn Bộ chọn CSS
  • Cho phép tìm kiếm toàn bộ hoặc một phần nội dung trong tên thành phần với từ khóa contains

 

Bộ chọn CSS

 

nó là gì

Bộ chọn CSS sử dụng các kiểu được chỉ định trong Cascading Style Sheet (CSS) để chọn các phần tử mong muốn. Hầu hết các trang web trực tuyến đều được tạo kiểu bằng CSS và điều đó khiến CSS Selector trở thành lựa chọn phổ biến của nhiều người

CSS dựa vào các thẻ, tên lớp và id trong số những thứ khác để chọn những gì chúng ta muốn. Điều này trái ngược với XPath sử dụng cấu trúc dạng cây để chọn phần tử

Mỗi năm, ngày càng có nhiều công ty bắt đầu sử dụng các công cụ quét web như một phần của phân tích và thông tin kinh doanh của họ. Điều này giúp các doanh nghiệp trở nên cạnh tranh hơn và có lợi hơn

Bạn phải luôn kiểm tra xem bạn có thể trích xuất dữ liệu từ một trang web hay không trước khi cạo. Dưới đây là danh sách kiểm tra có chứa 5 điều cần xem xét trước khi thực hiện quét web

Vì vậy, bạn đã tìm thấy một trang web mà bạn có thể cạo. Nhiều khả năng, bạn sẽ muốn trích xuất dữ liệu từ các phần tử HTML nhất định hoặc các phần tử có lớp hoặc ID cụ thể

Các chiến lược định vị nâng cao như bộ chọn CSS hoặc XPath đều có khả năng tìm thấy hầu hết mọi phần tử HTML trên trang web

Cascading Style Sheets (CSS) là ngôn ngữ biểu định kiểu được sử dụng để mô tả giao diện và định dạng của tài liệu được viết bằng HTML hoặc XML

Bộ chọn CSS là các mẫu được sử dụng để chọn (các) phần tử được tạo kiểu

XPath, ngôn ngữ đường dẫn XML, là ngôn ngữ truy vấn để chọn các nút từ tài liệu XML. Định vị các phần tử bằng XPath hoạt động rất tốt với rất nhiều tính linh hoạt

XPath sử dụng các biểu thức đường dẫn để điều hướng qua các phần tử và thuộc tính trong tài liệu XML

Các mẫu dữ liệu

Hãy xem đoạn mã HTML sau

________số 8

Để khớp thẻ với bộ chọn CSS, chúng ta nên làm như thế này

p.dataflowkit.expandable

Trình định vị XPath trông giống như

//p[@class='dataflowkit expandable']

Bộ chọn CSS tốt hơn để sử dụng khi xử lý các lớp, ID và tên thẻ. Chúng ngắn hơn và dễ đọc hơn

Hãy xem một mã HTML khác

<p> First </p><p> Second </p><p> Third. Some text in Paragraph </p>

Trình định vị XPath để lấy nội dung của thẻ <p> thứ ba là

//p[contains(text(), 'Some text in Paragraph')]

Làm cách nào để đạt được kết quả tương tự với CSS Selector?

//p[@class='dataflowkit expandable']
0

Không có bộ chọn nội dung nào trong. Chúng ta có thể so khớp trên một phần tử, tên của một thuộc tính trong phần tử và giá trị của thuộc tính được đặt tên trong một phần tử. Tuy nhiên, không có gì để khớp nội dung trong một phần tử

Tuy nhiên, điều gì sẽ xảy ra nếu chúng ta cần thực hiện một truy vấn phức tạp có tính đến nội dung của phần tử mà bạn đang cố tìm?

Hoặc

Bộ chọn CSS + jQuery sẽ là sự thay thế hoàn hảo cho XPath

Để lấy nội dung của thẻ <p> thứ ba từ ví dụ trước, chúng ta có thể sử dụng jQuery. chứa () Bộ chọn

//p[@class='dataflowkit expandable']
2

Ngoài ra, bạn có thể xem xét công cụ chọn CSS thuần JavaScript của

//p[@class='dataflowkit expandable']
3

So sánh song song ngắn gọn về Bộ chọn CSS3 và Biểu thức XPath

Bảng dưới đây được điều chỉnh từ bài viết này

Ghi chú kết thúc

Sử dụng Bộ chọn CSS để thực hiện các truy vấn đơn giản dựa trên các thuộc tính của phần tử. Bộ chọn CSS có xu hướng hoạt động tốt hơn, nhanh hơn và đáng tin cậy hơn XPath trong hầu hết các trình duyệt

//p[@class='dataflowkit expandable']
0 (https. //github. com/PuerkitoBio/goquery) nó dựa trên trình phân tích cú pháp HTML(5) và hỗ trợ bộ chọn kiểu CSS. Nó được nhiều lập trình viên Go sử dụng để có chức năng tương tự như nguồn cảm hứng javascript của nó, JQuery

Tuy nhiên, đối với các truy vấn phức tạp hơn, để khắc phục việc không thể truy vấn nội dung của phần tử bằng Bộ chọn CSS, hãy sử dụng bộ chọn XPath hoặc jQuery

Bạn có thể muốn kiểm tra

//p[@class='dataflowkit expandable']
1 (https. //godoc. org/gopkg. trong/xmlpath. v2) cho công cụ Go XPath thuần túy hoặc
//p[@class='dataflowkit expandable']
2(https. //github. com/moovweb/gokogiri) cho trình bao bọc Go trên thư viện C libxml

Bộ chọn bộ luồng dữ liệu

Dataflow kit là dịch vụ trích xuất dữ liệu web không yêu cầu kỹ năng mã hóa. Chúng tôi sử dụng Bộ chọn CSS + jQuery để chỉ định các phần tử HTML để lấy dữ liệu từ. Trong hầu hết các trường hợp, chỉ cần trỏ và chọn các thành phần cần thiết trên một trang đã tải để thu thập dữ liệu là đủ

Sự khác biệt giữa CSS Selector và XPath là gì?

XPath cho phép luồng hai chiều, nghĩa là quá trình truyền tải có thể đi theo cả hai chiều – từ con đến cha mẹ và từ cha mẹ sang con. Ngược lại, CSS cho phép luồng một chiều, do đó, quá trình truyền tải chỉ hoạt động từ cấp độ cha sang cấp độ con

Làm cách nào để chuyển từ XPath sang CSS Selector?

Tìm Bộ chọn CSS hoặc XPath .
Nhấp chuột phải vào một phần tử
Chọn Kiểm tra
Xác định vị trí phần tử trong bảng Thành phần của Công cụ dành cho nhà phát triển
Nhấp chuột phải vào dòng của phần tử
Chọn Sao chép -> Sao chép Bộ chọn hoặc Sao chép -> Sao chép XPath
Dán kết quả vào trường ID của một hành động

Chúng ta có thể sử dụng CSS Selector trong Selenium không?

Trong Selenium, CSS cho phép so khớp một phần chuỗi cung cấp cách tạo bộ chọn CSS sử dụng chuỗi con . Điều này có thể được thực hiện theo ba cách. Mục đích này là để tương ứng với chuỗi bằng cách sử dụng tiền tố phù hợp. Tiếp đầu ngữ. chuỗi dựa trên đó thao tác so khớp được thực hiện.

Bạn có thể sử dụng XPath trong CSS không?

Chúng ta có thể trực tiếp sử dụng chúng bằng cách sử dụng bộ định vị id hoặc tên. Ở đây sử dụng xpath / Css, chúng tôi có thể kết hợp hai bộ định vị khi cần thiết , hãy xem cách chúng tôi có thể đạt được. sử dụng xpath. - //*[@id='email' or @name='email'] , ở đây đầu tiên nó sẽ kiểm tra id và sau đó nó sẽ kiểm tra cái thứ hai.