CSS Selector nhanh hơn XPath như thế nào?

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

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

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

Để 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

 First 
 Second 
 Third. Some text in Paragraph 

Trình định vị XPath để nhận nội dung của thẻ

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

//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']

Không có bộ chọn nội dung trong đặc tả CSS3. 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[@class='dataflowkit expandable']

3 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']

6

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']

7

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']

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']

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

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à đủ

Trong ảnh chụp màn hình trước, bạn có thể thấy hai tùy chọn cho XPath – XPath và Full XPath. Phần trước đã trình bày cách tạo một XPath đầy đủ.  

Nếu XPath được chọn thay vì XPath đầy đủ trong ví dụ trên, thì XPath mà chúng tôi nhận được như sau

Vì vậy, có gì sai với Full XPath? . Điều này sẽ không luôn luôn như vậy, mặc dù. Ví dụ: nếu cùng một phương pháp được thực hiện để tạo XPath đầy đủ cho mục lục của bất kỳ trang Wikipedia nào, thì XPath đầy đủ sẽ giống như thế này

/html/body/div[3]/div[3]/div[5]/div[1]/div[2]/ul/li[1]/a/span[2]

Có ba vấn đề chính với XPath này

1. Nó không thể đọc được và không thể bảo trì

2. Nó quá cứng nhắc. Ngay cả khi chỉ có một thay đổi nhỏ, chẳng hạn như biểu ngữ thông tin bổ sung ở đầu trang, XPath này sẽ bị hỏng

3. XPath đầy đủ sẽ đi qua từng nút và làm cho nó chậm lại

Đó là lý do tại sao chúng ta cần tìm hiểu XPath ngắn hơn, nhanh hơn và dễ đọc hơn. Hãy bắt đầu với khối xây dựng đầu tiên – ký tự gạch chéo. Trong khi một dấu gạch chéo đơn chọn nút con, thì dấu gạch chéo kép chọn tất cả các nút phù hợp, bất kể chúng ở đâu trong tài liệu

Ví dụ: để tìm tất cả các thẻ trong tài liệu, biểu thức XPath sẽ như sau

Tương tự, để tìm tất cả các

các thẻ, XPath sẽ như sau

Trong tài liệu1. html đang được thảo luận, chỉ có một

nhãn. Điều này có nghĩa là XPath mà chúng ta đã tạo trước đó, /html/body/h2 có thể đơn giản là //h2. Khối xây dựng tiếp theo là dấu hoa thị. Ký tự này được sử dụng như một thẻ đại diện sẽ khớp với mọi phần tử. Ví dụ, nếu chúng ta muốn lấy danh sách tất cả các phần tử là con của một

phần tử, không có dấu hoa thị, XPath sẽ như sau

Tương tự, để chọn tất cả các

các phần tử là con của

, chúng ta có thể sử dụng XPath này

Tuy nhiên, nếu chúng ta muốn chọn tất cả các phần tử là con của một

phần tử, chúng ta có thể sử dụng dấu hoa thị. XPath sẽ như sau

Bạn nên sử dụng cái này vì nó có thể khớp với nhiều phần tử nếu các điều kiện khác không được thêm vào. Các điều kiện này được thêm vào bằng cách sử dụng dấu ngoặc vuông và được gọi là vị ngữ

Vị ngữ trong XPath

Vị ngữ được viết trong ngoặc vuông. Ở dạng đơn giản nhất, đây chỉ là một con số

Ví dụ: XPath sau sẽ khớp với hai thẻ neo

Nếu chúng ta thêm một số trong dấu ngoặc vuông, chúng ta có thể chỉ định phần tử nào sẽ chọn. Ví dụ bạn muốn chọn thẻ anchor đầu tiên thì XPath sẽ như sau

Lưu ý rằng nút đầu tiên là 1, không phải 0, giống như trong hầu hết các ngôn ngữ lập trình

Chúng ta cũng có thể sử dụng các hàm trong ngoặc vuông. Ví dụ: để lấy thẻ cuối cùng, chúng ta có thể viết XPath này

Còn nhiều chức năng nữa sẽ được đề cập ngay sau đây. Trước đó, chúng ta sẽ xem cách lấy văn bản từ các phần tử

Lấy văn bản từ các phần tử

XPath //h2 trả về phần tử. Hãy xem cách chúng ta có thể trích xuất văn bản, hay nói cách khác, một giá trị nguyên tử từ các phần tử.  

Văn bản thường được chứa giữa phần mở đầu và phần kết thúc. Ví dụ

Để trích xuất văn bản này, có thể sử dụng hàm XPath text[]. Ví dụ: XPath sau đây sẽ trả về văn bản bên trong phần tử h2

Để trích xuất giá trị của bất kỳ thuộc tính nào, hãy sử dụng ký hiệu @ với tên thuộc tính. Ví dụ: hãy xem xét thẻ neo này

Visit our Blog

Để trích xuất giá trị của thuộc tính href, hãy sử dụng @href trong XPath

Điều này sẽ nhận được văn bản https. //oxylabs. io/blog

Chúng ta cũng có thể sử dụng các bộ chọn thuộc tính trong các vị từ XPath. Ví dụ, XPath này sẽ chọn tất cả

các phần tử trong đó giá trị của thuộc tính id là tiêu đề. \

Nếu bạn muốn tìm một phần tử chứa văn bản cụ thể, bạn có thể tìm kiếm bằng cách sử dụng hàm text[] trong ngoặc vuông

Lưu ý rằng điều này sẽ tìm kiếm một trận đấu hoàn chỉnh. Nếu bạn muốn tìm một phần khớp, hãy sử dụng chức năng chứa. Chức năng này sẽ là tiêu chí quan trọng giúp bạn quyết định giữa XPath và CSS

Đây là tất cả về những điều cơ bản của XPath. Trong phần tiếp theo, bạn sẽ tìm hiểu lĩnh vực chính mà XPath thực sự mạnh mẽ

Ưu điểm của việc sử dụng XPath

Khi làm việc với bất kỳ HTML hoặc DOM nào, có thể có ba trục chính. Đây là tổ tiên, con cháu và anh chị em ruột. Mặc dù có thể chọn anh chị em và con cháu bằng CSS, nhưng chỉ XPath mới có khả năng đi lên tổ tiên

Lấy ví dụ này

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

Trong ví dụ này, nếu chúng ta phải trích xuất giá trị của thuộc tính href của thẻ, chúng ta có thể xác định vị trí thẻ span và đi lên một cấp để tìm thẻ

Lưu ý việc sử dụng. để đi lên một cấp. Điều này là không thể khi sử dụng Bộ chọn CSS

Hơn nữa, để khớp một phần, CSS có. chứa toán tử nhưng hiện đã không được dùng nữa. Nó có thể hoạt động với một vài công cụ cụ thể nhưng sự hỗ trợ không được đảm bảo

Mặt khác, hàm XPath contains[] được hỗ trợ phổ biến. Tóm lại, nếu bạn muốn duyệt qua DOM, XPath là lựa chọn duy nhất của bạn. Nếu bạn muốn thực hiện khớp một phần, một lần nữa, XPath có thể là lựa chọn duy nhất của bạn

Bộ chọn CSS là gì?

Bộ chọn CSS là phần đầu tiên của quy tắc CSS. CSS là một tập hợp các thành phần và quy tắc thông báo cho trình duyệt biết phần tử HTML nào phải được định vị và áp dụng với các thuộc tính CSS

HTML hiếm khi được cung cấp mà không có CSS ​​hoặc Cascading Style Sheet. Nếu có nhu cầu thay đổi giao diện của bất kỳ thành phần HTML nào, cách phổ biến nhất để làm điều đó là áp dụng một kiểu cho nó – có thể đơn giản như thay đổi màu văn bản hoặc có thể phức tạp hơn nếu bạn đang sử dụng hoạt ảnh

Trong cả hai trường hợp, bước đầu tiên sẽ là xác định vị trí phần tử. Khi một phần tử được định vị, các kiểu có thể được áp dụng bằng CSS. Để xác định vị trí các phần tử, bộ chọn CSS được sử dụng. Bộ chọn CSS được phát triển vì những lý do hoàn toàn khác nhau, nhưng chúng phục vụ cùng một mục đích – chọn phần tử

Bây giờ bạn đã có ý tưởng về bộ chọn XPath và CSS là gì, chúng ta sẽ xem cách XPath và CSS được tạo ra và khi nào bạn nên sử dụng cái này thay vì cái kia

Làm cách nào để tạo bộ chọn CSS?

Bắt đầu với bộ chọn CSS rất dễ dàng. Bộ chọn CSS có thể sử dụng tên thẻ, id, lớp [giả] hoặc thuộc tính. Xem xét yếu tố này

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

Dưới đây là một số ví dụ về bộ chọn CSS cho thẻ này

• h2 – Chọn theo tên phần tử. Thẻ đại diện là *

• #header – Sử dụng # để chỉ định id

• ưa thích - Sử dụng một khoảng thời gian để chỉ định lớp

• [name="ctrl"] – Sử dụng bất kỳ thuộc tính nào trong ngoặc vuông

Chúng có thể được kết hợp quá. Ví dụ

h2#header chọn

các phần tử có id làm tiêu đề

Để chọn con, toán tử > được sử dụng. Để chọn anh chị em đầu tiên + toán tử được sử dụng. Để chọn tất cả anh chị em, ~ được sử dụng. Dưới đây là một vài ví dụ

• div > a – chọn các phần tử là con của

• div a – chọn các phần tử là hậu duệ của

   

• div + a – chọn phần tử đầu tiên sau a

• div ~ a – Chọn tất cả các phần tử sau a

Nếu bạn biết những điều này, bạn sẽ có thể xử lý hầu hết các tình huống

Ưu điểm của việc sử dụng Bộ chọn CSS

Điều tốt nhất về bộ chọn CSS là chúng dễ học và dễ bảo trì

Bộ chọn CSS được hỗ trợ bởi tất cả các thư viện kiểm tra và quét web – Selenium, Beautiful Soup [Python], Scrapy [Python], Cheerio [JavaScript] và Puppeteer [JavaScript]

Lưu ý rằng Beautiful Soup không hỗ trợ XPath. CSS Selector là lựa chọn duy nhất trong trường hợp này

Các trình duyệt cũ hơn như Internet Explorer không hỗ trợ CSS đầy đủ. Tuy nhiên, hiện nay, trình duyệt hỗ trợ đầy đủ Bộ chọn CSS;

Bộ chọn CSS cũng nhanh hơn XPath. Tuy nhiên, lưu ý rằng sự khác biệt rất nhỏ nên nó hoàn toàn không quan trọng trong thế giới thực

So sánh CSS với XPath

Quyết định giữa XPath và CSS có thể giống như một nhiệm vụ khó khăn. Hãy xem bảng dưới đây để so sánh

Tại sao trình định vị CSS nhanh hơn XPath?

CSS nhanh hơn XPath bao nhiêu?

Tại sao bộ chọn CSS có mức độ ưu tiên cao hơn biểu thức XPath?

Tại sao CSS là công cụ định vị nhanh nhất?