Bạn có biết đâu là bộ chọn chính xác để sử dụng trong quét web không? Web scraping đã khá phổ biến trong thập kỷ gần đây để trích xuất dữ liệu từ internet. Nó giúp các doanh nghiệp thu thập và phân tích dữ liệu để đưa ra quyết định kinh doanh tốt hơn. Nhờ các công nghệ tự động, việc quét web chưa bao giờ dễ dàng hơn bây giờ.
Bạn có biết đâu là bộ chọn chính xác để sử dụng trong quét web không? Web scraping đã khá phổ biến trong thập kỷ gần đây để trích xuất dữ liệu từ internet. Nó giúp các doanh nghiệp thu thập và phân tích dữ liệu để đưa ra quyết định kinh doanh tốt hơn. Nhờ các công nghệ tự động, việc quét web chưa bao giờ dễ dàng hơn bây giờ.
Tuy nhiên, bất kể công cụ hoặc khuôn khổ bạn chọn là gì, bạn phải đưa ra quyết định quan trọng để đảm bảo rằng trình cạo dữ liệu của bạn một cách lịch sự. Đó là liệu có nên trích xuất các phần tử web bằng XPath hoặc bộ chọn CSS hay không, mà bạn sẽ tìm hiểu trong bài viết này.
Hãy đi sâu vào với một số ví dụ hiện có.
XPath là viết tắt của XML Path Language. Tuy nhiên, nó sử dụng cú pháp không phải XML để chọn thẻ hoặc nhóm thẻ từ tài liệu XML hoặc HTML, như với quét web. XPath cho phép bạn viết các biểu thức để truy cập trực tiếp vào một phần tử HTML hoặc XML mà không cần đi qua toàn bộ cây HTML.
Để hiểu làm thế nào bạn có thể truy cập một phần tử bằng XPath, hãy tìm hiểu sâu hơn với mã HTML. Tôi cho rằng bạn đã biết một số HTML cơ bản.
<!doctype html>
<html xmlns=”http://www.w3.org/1999/xhtml” lang="en" xml:lang="en">
<head>
<meta charset="utf-8">
<title>Awesome Products at your Fingertips</title>
</head>
<body>
<h1>Description of product features</h1>
<p>These products are great. So let's just look at the features !</p>
<ul id="product-list" class=”basic-list”>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>
Bạn có thể nhập mã trên vào trình chỉnh sửa bạn chọn và lưu nó dưới dạng products.html. Sau đó, bạn có thể xem nó trong trình duyệt (tốt nhất là Google Chrome vì chúng tôi sẽ xem qua ví dụ này với nó).
Khi trình duyệt chạy mã này, nó sẽ diễn đạt HTML và tạo ra một biểu diễn cây của các phần tử. Nó được gọi là DOM (Document Object Model) ở dạng sau:
Bạn có thể đọc thêm về DOM tại liên kết đã cho. Bây giờ trọng tâm của chúng tôi ở đây là XPath về cách điều hướng đến từng yếu tố này ngay lập tức mà không cần đi qua toàn bộ cây. Vì vậy, hãy bắt đầu với thuật ngữ cơ bản của Xpath.
Với XPath, yếu tố cơ bản nhất là một nút. Chà, các nút chỉ đơn giản là các phần tử riêng lẻ mà bạn vừa thấy trong cây DOM. Khi chúng ta đi cùng trong bài viết này, bạn thậm chí sẽ khám phá thêm rằng các nút bao gồm các phần tử thẻ, thuộc tính, chuỗi, giá trị được gán cho nó, v.v. Có bảy trong mỗi trang XML hoặc HTML và hãy xem xét kỹ từng loại nút.
Mặc dù ba điều trên là những điều quan trọng nhất, nhưng điều quan trọng là phải biết bốn điều sau đây chỉ vì lợi ích của thông tin.
Có hai cách để làm điều này. Đầu tiên, Hãy chứng minh nó hoặc mã hóa một ví dụ. Như tôi đã đề cập ở trên, tôi hy vọng bạn đã lưu nó trên đĩa cục bộ của mình và sẵn sàng để được xem trong trình duyệt của bạn.
Khi trang tải, di chuột qua mục 1 và nhấp chuột phải vào nó. Sau đó chọn Kiểm tra từ các mục menu xuất hiện như thể hiện trong ảnh chụp màn hình bên dưới:
Then you would be able to find the full XPath by clicking on the <li> element in the console and selecting “copy” from the drop-down menu, and then specifying “Copy full XPath as shown below:
Sau đó, sau khi dán nó vào một tệp văn bản hoặc ở đâu đó, bạn sẽ nhận được:
/html/body/ul/li[1]Đây được gọi là con đường tuyệt đối. Tôi sẽ giải thích bên dưới làm thế nào bạn đã bắt nguồn nó.
Bước 1 => li[1] //Ở đây người ta biểu thị phần tử li đầu tiên
Bước 2 => /li[1]
Bước 3 => ul/li[1]
Bước 4 => /ul/li[1]
Bước 5 => body/ul/li[1]
Bước 6 => /body/ul/li[1]
Bước 7 => html/body/ul/li[1]
Bước 8 => /html/body/ul/li[1]
With this method, you need to work your way backward, starting from the target element all the way back to the root element. You add a forward slash before the element you have just added as you write each element. So let’s look at how you could work out the XPath for the first <li> element manually:
Mặc dù phương pháp trên có vẻ dài, nhưng nó sẽ giúp bạn hiểu cách xây dựng XPath đầy đủ. Bây giờ chuyển sang phương pháp tương đối.
//*[@id="product-list"]/li[1]As you can see, it is pretty short, and the path is relative to the parent <ul> element. Since the <li> element does not have an id attribute, its relative path is relative to the <ul> element.
Sự khác biệt đáng kể là XPath đầy đủ không thể đọc được và khó bảo trì. Mối quan tâm rõ ràng khác là nếu có những thay đổi đối với bất kỳ phần tử nào bắt đầu từ phần tử gốc, XPath tuyệt đối sẽ không hợp lệ. Vì vậy, nó có ý nghĩa để sử dụng XPath tương đối.
Tuy nhiên, trước khi bình luận thêm về điều đó, trước tiên chúng ta hãy xem xét những ưu điểm và nhược điểm.
Với XPath, bạn không phải lo lắng nếu bạn không biết tên của một phần tử vì bạn có thể sử dụng hàm chứa để tìm kiếm các kết quả phù hợp có thể xảy ra. Do đó, bạn có thể đi lên DOM khi truy vấn các mục cần cạo.
Lợi ích đáng kể khác của CSS là nó hoạt động trong các trình duyệt cũ hơn như các phiên bản Internet Explorer lỗi thời.
Như bạn đã học ở trên, nhược điểm đáng kể nhất của nó là dễ phá vỡ hơn khi bạn thay đổi các yếu tố trong đường dẫn. Nó có thể khó hiểu so với các bộ chọn CSS mà bạn sẽ tìm hiểu bên dưới.
Ngoài ra, khi truy xuất các phần tử từ XPath, hiệu suất của nó chậm hơn khá nhiều so với CSS.
Như bạn đã biết, CSS là viết tắt của Cascading Style Sheets được sử dụng nổi bật trong việc tạo kiểu cho các phần tử HTML trong một trang web. Những kiểu này bao gồm áp dụng màu sắc cho phông chữ, hình nền và màu sắc của bạn, căn chỉnh và định vị các yếu tố và tăng / giảm khoảng trắng giữa các đoạn văn.
Để đặt kiểu cho một phần tử HTML, bạn cần chỉ định nó thông qua Bộ chọn CSS. Hãy bắt đầu với một ví dụ đơn giản bắt đầu với đánh dấu trong phần tiếp theo.
<h1 id="main-heading" class="header-styles" name="h1name">What are CSS Selectors?</h1>Vì vậy, đây là bộ chọn CSS cho phần tử trên:
Bạn cũng có thể kết hợp chúng:
H1.Kiểu tiêu đề-Bộ chọn CSS này chọn các phần tử h1 với kiểu tiêu đề lớp.
Toán tử > được sử dụng để chọn trẻ em. Ngược lại, toán tử + chọn anh chị em đầu tiên và toán tử ~ được sử dụng để chọn tất cả anh chị em. Một vài trường hợp như sau:
Không giống như XPath, mà Beautiful Soup không hỗ trợ, bộ chọn CSS được hỗ trợ với các thư viện cạo hiệu quả nhất. Ngoài ra, không giống như XPath, bộ chọn CSS dễ học và bảo trì hơn. Hầu như tất cả các trình duyệt đều hỗ trợ nó, ngoại trừ các trình duyệt cũ dưới Internet Explorer phiên bản 8. Tuy nhiên, mọi người hiếm khi sử dụng các trình duyệt đó trong thời đại ngày nay.
Mặc dù bạn lấy các phiên bản Internet Explorer cũ hơn ra khỏi phương trình, vẫn có thể có sự không nhất quán với cách chúng hiển thị trên các trình duyệt khác nhau.
Vì có nhiều phiên bản CSS khác nhau, chúng có thể tạo ra sự nhầm lẫn giữa các nhà phát triển và người mới bắt đầu.
Một yếu tố quan trọng khác trong công nghệ web ngày nay là bảo mật của CSS.
Sự khác biệt rõ ràng giữa XPath và CSS là XPath là hai chiều. Điều này có nghĩa là bạn có thể đi qua cả hai hướng trong cây DOM. Tuy nhiên, bạn chỉ có thể chuyển từ nút mẹ sang nút con bằng CSS, được gọi là luồng một chiều.
Như đã thảo luận trong các phần trước, XPath khó bảo trì hơn và không phải là ứng cử viên tốt cho khả năng đọc hiệu quả. Mặt khác, mặc dù XPath có thể hoạt động trong các trình duyệt cũ, cách nó hiển thị khác nhau từ trình duyệt này sang trình duyệt khác.
Do đó, về mặt đó, CSS có lợi thế.
XPATH nổi bật vì CSS chỉ có thể đi từ cha mẹ sang trẻ trong các khu vực cụ thể như đi qua cây DOM. Về tốc độ, CSS có lợi thế.
Tuy nhiên, sự khác biệt về tốc độ giữa XPath và CSS không được tính nhiều khi nói đến việc quét web. Có những yếu tố khác cần xem xét, chẳng hạn như độ trễ mạng trong việc loại bỏ web.
CSS sẽ là lựa chọn đầu tiên của bạn khi nói đến Beautiful Soup vì nó không hỗ trợ XPath.
Không có câu trả lời chính xác về việc sử dụng bộ chọn nào cho dự án quét web của bạn. Như bạn đã khám phá trong bài viết này, XPath có lợi thế trong một số tình huống nhất định, trong khi CSS nổi bật trong những tình huống khác.
Do đó, bạn cần tính đến các điểm quan trọng cụ thể như đi qua, hỗ trợ trình duyệt và một số khả năng kỹ thuật mà chúng ta đã thảo luận. Chúng tôi hy vọng bạn sẽ thực hành những gì bạn đã học và theo dõi để biết thêm bài viết.