Nếu bạn đã duyệt qua blog của chúng tôi một chút, có thể bạn đã xem qua phần giới thiệu của chúng tôi về các biểu thức XPath, cũng như bài viết của chúng tôi về cách sử dụng bộ chọn CSS để quét web - nếu bạn chưa biết, rất khuyến khích 👍. Khá nhiều bài đọc tốt
Vì vậy, bạn có thể đã có một ý tưởng tốt về những gì chúng làm và cách chúng được sử dụng, nhưng điều có thể còn thiếu - để hoàn thiện bức tranh - là cách chúng so sánh với nhau. Đó chính xác là những gì chúng ta sẽ làm trong bài viết hôm nay
Chúng tôi sẽ so sánh chúng với nhau và so sánh song song các tính năng của chúng, thảo luận về nguồn gốc lịch sử của chúng và xem xét trường hợp sử dụng nào chúng là lý tưởng và nơi chúng có thể tỏa sáng
Sẵn sàng để vật?
Mục đích của biểu thức XPath và bộ chọn CSS
Vâng, chúng tôi chỉ nói rằng chúng tôi cho rằng bạn đã biết rõ về những gì họ làm, nhưng nếu chúng tôi giả định sai, vui lòng cho phép chúng tôi nhanh chóng cung cấp cho độc giả của chúng tôi một cái nhìn tổng quan nhanh
Mục đích của các biểu thức XPath và bộ chọn CSS là cung cấp một ngôn ngữ biểu cảm, cho phép bạn tìm và chọn các thành phần trong tài liệu XML và HTML
Giả sử chúng ta có trang web sau
What is the DOM ?
DOM 101
Webscraping is awsome !
Here is my blog
Và bây giờ chúng tôi muốn trích xuất URL của thẻ neo trỏ đến ScrapingBee. Chúng ta nên làm việc đó như thế nào?
Tất nhiên, chúng ta có thể phân tích thủ công toàn bộ chuỗi HTML [e. g. mã hóa mọi thứ và kiểm tra
{
"title": "h1",
"subtitle": "#subtitle"
}
{
"title": "h1",
"subtitle": "#subtitle"
}
Đó chính xác là nơi các bộ chọn XPath và CSS xuất hiện. Trong ví dụ của chúng tôi, chúng tôi có thể truy cập thẻ neo của mình bằng cú pháp sau trong XPath và CSS tương ứng
- biểu thức XPath.
3{ "title": "h1", "subtitle": "#subtitle" } - bộ chọn CSS.
4{ "title": "h1", "subtitle": "#subtitle" }
Điều đó dễ dàng hơn rất nhiều, phải không?
💡 Bạn muốn biết thêm?
Nếu bạn muốn biết thêm về các chi tiết cơ bản của từng công nghệ, vui lòng xem các bài viết chuyên dụng của chúng tôi
- XPath thực tế để quét web
- Sử dụng bộ chọn CSS để quét web
Lịch sử của bộ chọn XPath và CSS
Cả hai công nghệ quay trở lại khá lâu. Cả hai đều ra mắt vào khoảng giữa đến cuối những năm 90 và trong khi họ rất, rất giống nhau về nhiều mặt - và có thể được coi là anh em họ hoặc thậm chí là anh em - họ vẫn có nguồn gốc khác nhau và mục đích ban đầu khác nhau
Xpath. Mặc dù phải thừa nhận rằng ranh giới giữa HTML và XML luôn hơi lỏng lẻo, nhưng HTML luôn tập trung vào web, trong khi XML chủ yếu luôn là định dạng tài liệu có cấu trúc cho dữ liệu. Và đó là nơi XPath xuất hiện. XPath được giới thiệu cùng lúc với XML và có mục đích cung cấp ngôn ngữ truy vấn cho XML. Nó sẽ cho phép bạn truy cập thông tin nhanh chóng và dễ dàng trong một tài liệu XML nhất định, bất kể đó là trang web hay cơ sở dữ liệu XML khét tiếng
CSS. Bộ chọn CSS không phải là một phát minh của riêng chúng mà là một phần của hệ sinh thái CSS tổng thể. Tuy nhiên, chúng là một phần không thể thiếu của nó vì chúng cung cấp chức năng cốt lõi là tìm [các] phần tử chính mà khối khai báo của quy tắc sẽ được áp dụng. Trong bối cảnh này, các bộ chọn CSS luôn tập trung rất mạnh [và gần như độc quyền] vào web và các trang web
Mặc dù XPath vẫn [hầu hết] đúng với mục đích ban đầu của nó, đó là cung cấp ngôn ngữ truy vấn cho các cấu trúc tài liệu XML [bao gồm HTML], các bộ chọn CSS cuối cùng đã vượt qua mục đích chỉ sử dụng kiểu dáng của chúng và nổi lên như một công nghệ độc lập để truy vấn các tài liệu web
Như chúng tôi đã đề cập ngắn gọn, cả hai công nghệ gần như giống hệt nhau về những gì chúng muốn cung cấp và chúng cũng có những điểm tương đồng nhất định về cú pháp, tuy nhiên, vẫn còn khá nhiều điểm khác biệt giữa chúng, cũng như những ưu điểm và hạn chế. Đây là những gì chúng ta sẽ kiểm tra tiếp theo
Ưu điểm & Hạn chế của XPath
Nói chung, XPath là ngôn ngữ phức tạp hơn một chút [xin lỗi, CSS 🙏]. Nếu bạn có thể triển khai truy vấn bằng bộ chọn CSS, thì bạn cũng có thể thực hiện tương tự với XPath. Cách khác không phải lúc nào cũng có thể
Ví dụ, một trong những ưu điểm chính là khả năng hỗ trợ duyệt cây hai hướng. Bạn có thể tìm thấy một phần tử cụ thể và sau đó chọn cụ thể cha mẹ hoặc thậm chí tổ tiên của nó, sử dụng trục cha mẹ. Mặc dù vậy, các bộ chọn CSS cung cấp một phần bán tương đương với. có lớp giả, điều đó vẫn còn xa so với XPath, vì nó sẽ chỉ bao gồm một số trường hợp sử dụng hạn chế và hỗ trợ trình duyệt của nó vẫn còn khá yếu
Mặc dù hiệu suất thô thường không phải là mối quan tâm chính trong bối cảnh này, đôi khi bạn vẫn có thể trải nghiệm hiệu suất với XPath tốt hơn so với bộ chọn CSS. Điều này là do một số công cụ chọn CSS thực sự sử dụng XPath nội bộ và trước tiên chuyển đổi bộ chọn của chúng thành biểu thức XPath
Chắc chắn, một trong những nhược điểm của XPath là cú pháp dài dòng hơn của nó. Những thứ như các lớp HTML cần được chỉ định ở dạng thuộc tính thực tế của chúng, trong khi CSS hỗ trợ chúng như những công dân hạng nhất theo cú pháp của nó
Ưu & Nhược điểm
+ Hỗ trợ duyệt cây hai chiều [truy cập phần tử cha hoặc tổ tiên]
+ Hỗ trợ lựa chọn nhiều hơn chỉ các phần tử tài liệu [i. e. cũng như thuộc tính và nội dung]
+ Các chức năng tích hợp cho một số trường hợp sử dụng [e. g.
{
"title": "h1",
"subtitle": "#subtitle"
}
{
"title": "h1",
"subtitle": "#subtitle"
}
+ Hỗ trợ đường dẫn tìm kiếm tuyệt đối và tương đối
- Cú pháp dài dòng hơn
Ưu điểm & Hạn chế của Bộ chọn CSS
Một trong những ưu điểm chính của bộ chọn CSS là "tính nguyên gốc" của chúng trong ngữ cảnh web. Nếu bạn đã quen thuộc với việc phát triển web, bạn sẽ ngay lập tức biết cách sử dụng các bộ chọn CSS, bởi vì bạn đã sử dụng chúng từ lâu trong tất cả các kiểu dáng trang của mình
Trái ngược với các biểu thức XPath, các bộ chọn CSS hoàn toàn nhận thức được các lớp và ID HTML là gì và cung cấp các phần tử cú pháp gốc [i. e.
{
"title": "h1",
"subtitle": "#subtitle"
}
{
"title": "h1",
"subtitle": "#subtitle"
}
{
"title": "h1",
"subtitle": "#subtitle"
}
{
"title": "h1",
"subtitle": "#subtitle"
}
Về mặt hạn chế, bạn có một thực tế là bộ chọn CSS chỉ hoạt động ở cấp độ phần tử. Nghĩa là, nếu bạn muốn trích xuất liên kết của thẻ
{
"title": "h1",
"subtitle": "#subtitle"
}
{
"title": "h1",
"subtitle": "#subtitle"
}
{
"title": "h1",
"subtitle": "#subtitle"
}
{
"title": "h1",
"subtitle": "#subtitle"
}
Một hạn chế lớn khác là cách tiếp cận từ trên xuống, có nghĩa là bạn chỉ có thể duyệt qua cây DOM theo một hướng và không thể chọn các phần tử cha [như `. cho các hệ thống tập tin chẳng hạn]. Mặc dù đây có thể không phải là trường hợp sử dụng phổ biến nhất, nhưng vẫn có những lúc điều đó có thể hữu ích và với bộ chọn CSS, bạn có thể phải tìm một số giải pháp thay thế
Ưu & Nhược điểm
+ Các nhà phát triển web đã quen thuộc với cú pháp
+ ID và lớp HTML là công dân hạng nhất [cú pháp dấu thăng và dấu chấm]
- Chỉ có thể chọn phần tử [không có thuộc tính hoặc nội dung]
- Không hỗ trợ truyền tải lên [truy cập phần tử cha hoặc phần tử tổ tiên]
- Thêm
ví dụ
Chúng tôi muốn có được. Biểu thức XPathCSS selectorall{
"title": "h1",
"subtitle": "#subtitle"
}
{
"title": "h1",
"subtitle": "#subtitle"
}
{
"title": "h1",
"subtitle": "#subtitle"
}
{
"title": "h1",
"subtitle": "#subtitle"
}
{
"title": "h1",
"subtitle": "#subtitle"
}
{
"title": "h1",
"subtitle": "#subtitle"
}
{
"title": "h1",
"subtitle": "#subtitle"
}
{
"title": "h1",
"subtitle": "#subtitle"
}
{
"title": "h1",
"subtitle": "#subtitle"
}
{
"title": "h1",
"subtitle": "#subtitle"
}
{
"title": "h1",
"subtitle": "#subtitle"
}
{
"title": "h1",
"subtitle": "#subtitle"
}
{
"title": "h1",
"subtitle": "#subtitle"
}
{
"title": "h1",
"subtitle": "#subtitle"
}
[a] Ví dụ cho ngắn gọn, việc kiểm tra hoàn chỉnh sẽ phức tạp hơn.
[b]
{
"title": "h1",
"subtitle": "#subtitle"
}
[c] XPath không dựa trên 0, trong khi CSS dựa trên một
Khai thác dữ liệu với bộ chọn CSS và ScrapingBee
Chỉ trong trường hợp bạn chưa quen với dịch vụ trích xuất dữ liệu của ScrapingBee. đó là nền tảng quét SaaS với API REST nhẹ, gói SDK gốc cho các ngôn ngữ đã chọn và hỗ trợ tích hợp trình duyệt không đầu
Mặc dù XPath chắc chắn là tiên tiến hơn đối với một số trường hợp sử dụng, thế giới quét web được xác định rất nhiều bởi bộ chọn CSS và người dùng - đặc biệt là những người làm web - thường cảm thấy thoải mái hơn với chúng, đó là lý do tại sao ScrapingBee chọn hỗ trợ bộ chọn CSS làm chính
Chạy một công việc trích xuất dữ liệu khá đơn giản và bạn chỉ cần cung cấp một đối tượng JSON với các trường mà bạn muốn trích xuất từ trang như một phần của tham số
{
"title": "h1",
"subtitle": "#subtitle"
}
Ví dụ: đối tượng sau sẽ xác định hai mục trích xuất ["tiêu đề" và "phụ đề"] cùng với bộ chọn CSS tương ứng của chúng [_______118 cho tiêu đề và
{
"title": "h1",
"subtitle": "#subtitle"
}
{
"title": "h1",
"subtitle": "#subtitle"
}
Trong phản hồi, bạn sẽ nhận được một đối tượng JSON tương tự, chứa các trường có giá trị của chúng từ trang
Nếu bạn muốn biết thêm, vui lòng tìm tất cả các chi tiết trên trang tương ứng trong tài liệu
ℹ️ Dùng thử miễn phí
ScrapingBee cung cấp bản dùng thử hoàn toàn miễn phí với 1.000 yêu cầu API tại nhà - không ràng buộc. Xin vui lòng kiểm tra xem nó ra
Sử dụng bộ chọn XPath và CSS trong trình duyệt
Trong khi có rất nhiều công cụ [e. g. https. //cố gắng. jsoup. org] ngoài đó, sẽ giúp bạn quản lý các biểu thức bộ chọn XPath và CSS, bạn thực sự đã cài đặt một công cụ như vậy trên máy của mình, công cụ bạn đang sử dụng ngay bây giờ. trình duyệt của bạn
Các công cụ dành cho nhà phát triển trong cả Chrome và Firefox, không chỉ giúp bạn dễ dàng đánh giá và gỡ lỗi các biểu thức XPath và bộ chọn mà còn hỗ trợ bạn tìm đúng biểu thức ngay từ đầu. Chỉ cần nhấp chuột phải vào yếu tố được đề cập và chọn
{
"title": "h1",
"subtitle": "#subtitle"
}
Bây giờ bạn sẽ mở cây DOM của trang và có thể truy cập các phần tử riêng lẻ
Tìm đúng bộ chọn XPath và CSS bằng trình duyệt
Trong ví dụ của chúng tôi trên
{
"title": "h1",
"subtitle": "#subtitle"
}
{
"title": "h1",
"subtitle": "#subtitle"
}
Nếu chúng tôi chọn
{
"title": "h1",
"subtitle": "#subtitle"
}
{
"title": "h1",
"subtitle": "#subtitle"
}
Mặt khác, nếu chúng tôi chọn
{
"title": "h1",
"subtitle": "#subtitle"
}
{
"title": "h1",
"subtitle": "#subtitle"
}
{
"title": "h1",
"subtitle": "#subtitle"
}
💡 Sự khác biệt giữa hai tùy chọn là, tùy chọn sau [
77] sao chép biểu thức đường dẫn đầy đủ và tuyệt đối, trong khi tùy chọn trước có thể đã cố gắng tối ưu hóa biểu thức nếu có thể [e. g. dựa trên ID HTML]. Nhưng nhiều hơn về điều đó chỉ trong một giây{ "title": "h1", "subtitle": "#subtitle" }
Trong cả hai trường hợp, bây giờ bạn sẽ có một biểu thức trong khay nhớ tạm cho phần tử cụ thể đó. Mặc dù vậy, một điều cần lưu ý là, ngay cả Google và Mozilla cũng có thể không hoạt động kỳ diệu [chưa] và những biểu thức đó có thể chỉ áp dụng cho chính trang đó và thậm chí có thể tải trang. Thường thì có thể cần tinh chỉnh biểu thức
Tinh chỉnh biểu thức
Hai ví dụ trước của chúng tôi đều là các đường dẫn tuyệt đối và hoạt động tốt trong ngữ cảnh của chúng tôi, tuy nhiên, luôn có chỗ cho các tối ưu hóa. Ví dụ: cho rằng
{
"title": "h1",
"subtitle": "#subtitle"
}
{
"title": "h1",
"subtitle": "#subtitle"
}
Nhưng hãy lấy một ví dụ cụ thể hơn, như tweet ScrapingBee sau đây
Nếu chúng ta chỉ sao chép bộ chọn CSS trong trường hợp này, chúng ta sẽ nhận được một cái gì đó như thế
{
"title": "h1",
"subtitle": "#subtitle"
}
Thật không may, một mặt, điều đó không chỉ không dễ đọc mà còn có thể không hoạt động khi tải lại do thay đổi các lớp HTML
Mặt khác, may mắn thay, chúng ta có một phần tử HTML rất cụ thể trong trường hợp này, phần tử này sẽ đơn giản hóa toàn bộ một cách đáng kể ->
{
"title": "h1",
"subtitle": "#subtitle"
}
Chúng tôi chỉ cần sử dụng
{
"title": "h1",
"subtitle": "#subtitle"
}
{
"title": "h1",
"subtitle": "#subtitle"
}
{
"title": "h1",
"subtitle": "#subtitle"
}
Tuy nhiên, không chỉ các loại phần tử cụ thể mới có thể giúp chúng ta thu hẹp một biểu thức, chúng ta cũng nên tìm kiếm các ID, lớp, thuộc tính HTML và đôi khi là cả nội dung
- ID được coi là duy nhất, do đó, một
14 hoặc [{ "title": "h1", "subtitle": "#subtitle" }
15] nhanh chóng sẽ giúp bạn có được một phần tử theo cách nhanh hơn và ổn định hơn so với một đường dẫn tuyệt đối{ "title": "h1", "subtitle": "#subtitle" } - Mặc dù các lớp không nhất thiết phải là duy nhất, nhưng chúng vẫn có thể hoạt động kỳ diệu, đặc biệt nếu, ví dụ, nếu được đặt trong ngữ cảnh của hệ thống phân cấp tài liệu.
16{ "title": "h1", "subtitle": "#subtitle" }
Ngoài ra, vui lòng xem phần Tối ưu hóa Bộ chọn trong bài viết của chúng tôi về bộ chọn CSS, vì phần đó thảo luận chi tiết về ví dụ Twitter của chúng tôi và hiển thị thêm một ví dụ về cách chúng tôi có thể truy cập ngày, sử dụng nội dung
Đánh giá các biểu thức trong trình duyệt
Cuối cùng nhưng không kém phần quan trọng, devtools cũng cho phép chúng ta đánh giá các biểu thức XPath và bộ chọn CSS
Chỉ cần nhấn F12 một lần nữa, chọn tab
{
"title": "h1",
"subtitle": "#subtitle"
}
Tại đây, bây giờ bạn có thể thử các biểu thức XPath và bộ chọn CSS khác nhau và lặp lại các phần tử đã tìm thấy [tất nhiên là nếu có]
Khá tiện dụng để thử nhanh một biểu thức 👍
Tóm lược
Chúng tôi hy vọng bạn thích bài viết này và ban đầu bạn đã hiểu rõ hai ngôn ngữ này là gì và điểm mạnh cũng như sự khác biệt của chúng là gì
Khi chúng tôi cố gắng tập trung vào bài viết này về sự khác biệt chính giữa bộ chọn XPath và CSS, chúng tôi đã đi sâu vào các chi tiết kỹ thuật của các thành phần cú pháp của từng ngôn ngữ. Nhưng đừng lo lắng, chúng tôi đã đề cập đến bạn ở đây và muốn giới thiệu hai bài báo, chúng tôi đã đề cập trước đó
- XPath thực tế để quét web
- Sử dụng bộ chọn CSS để quét web
Các bài viết này bao gồm cả hai công nghệ một cách chi tiết và đi kèm với nhiều ví dụ khác nhau và giải thích chi tiết
Nếu bạn có thêm bất kỳ câu hỏi hoặc phản hồi nào về bài viết này hoặc cách sử dụng bộ chọn CSS trên ScrapingBee cho dự án trình thu thập dữ liệu web tiếp theo của bạn, vui lòng liên hệ với chúng tôi dù chỉ một giây. Chúng tôi rất sẵn lòng trả lời các câu hỏi của bạn và hỗ trợ bạn trong các công việc cạo của bạn