Chọn bộ chọn phù hợp để quét web: CSS hoặc XPath
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ờ.
Do you know which is the correct selector to use in web scraping? Web scraping has been quite popular in the recent decade to extract data from the internet. It helps businesses acquire and analyze data to make better business decisions. Thanks to automated technologies, web scraping has never been easier than it is now.
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ó.
Bộ chọn XPath là gì?
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.
Node là gì?
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.
- Element node – These are the major tags in an HTML document. For instance, in our example, the elements nodes are <title>,<meta>,<body>,<h1>,<p>,<ul>,and <li>.
- Attribute node – You can provide elements nodes with properties to give them unique names or apply CSS styles. In this example, we have provided the <ul> element with attributes “id” and “class”. More on ids and classes later.
- Atomic values – these are the values that are inside the node elements. Over here, the atomic values are the text inside the <title>, <h1>,<p> and each of the three <li> elements.
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.
- Namespace: Since XPath also deals with XML documents, it is a standard that specifies how you can use elements and attributes. It is identified by URI (Uniform Resource Identifier). For the latest HTML 5 version, you can set the namespace like this: <html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>.
- Chú thích: Đây là phần nhận xét của tài liệu HTML hoặc XML mà trình biên dịch hoặc trình phân tích cú pháp không xử lý.
- Process instruction: As with the case of HTML documents, they are the nodes that link external files such as CSS and JavaScript files. For example, the<link> node to include CSS files and the <src> node to include JavaScript files.
- Root node: As you guessed it right, this is the topmost element of an HTML document: the <html> node.
Mối quan hệ giữa các nút là gì?
- Parent: These are the root elements of the DOM tree that are precisely one level up. Each element has exactly one parent. According to our example, the parent of <li> element is <ul>.
- Children: Children nodes are exactly one level down in the DOM tree. As per our example <h1>,<p> and <ul> elements are children of the <body> element.
- Siblings: These are the elements that share the same parent. In our example, both the <li> elements are siblings of the <ul> parent. Also <h1>,<p> and <ul> are siblngs as they belong to the same parent <body>.
- Descendants: Any elements that are one level down are descendants. For instance, the <title> element is a descendant of the <head> element.
- Ancestor: Any element level up in the DOM tree is called an ancestor. In our example <li> element’s ancestors are <ul>,<body> and <html>.
Làm thế nào để tìm XPath của một phần tử HTML?
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ó.
Step 1 => li[1] //Here one denotes the first li element
Step 2 => /li[1]
Step 3 => ul/li[1]
Step 4 => /ul/li[1]
Step 5 => body/ul/li[1]
Step 6 => /body/ul/li[1]
Step 7 => html/body/ul/li[1]
Step 8 => /html/body/ul/li[1]
Con đường tuyệt đối
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.
Con đường 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 giữa đường dẫn tương đối và tuyệt đối
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.
Ưu điểm và nhược điểm của XPATH
Lợi thế
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.
Khó khăn
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.
Bộ chọn CSS là gì?
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.
Bộ chọn CSS được tạo ra như thế nào?
<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:
- <h1>-selects by the element name <h1>
- #main-heading – #specifies id của phần tử
- .header-styles – Dấu chấm biểu thị tên lớp
- [name = "h1name"] - Bạn có thể chỉ định các thuộc tính trong dấu ngoặc vuông.
Bạn cũng có thể kết hợp chúng:
h1.header-styles-Bộ chọn CSS này chọn các phần tử h1 với kiểu tiêu đề lớp.
Bộ chọn nâng cao
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:
- ul#product-list > li – selects <li> elements which are children of <ul> with id of product-list.
- ul#product-list li – selects <li> elements which are descendent of <ul> with id of product-list.
- ul#product-list + li – selects first <li> element after <ul> with id of product-list.
- ul#product-list ~ li – Selects all <li> elements after the <ul> with id of product-list.
Ưu điểm và nhược điểm của việc sử dụng bộ chọn CSS
Lợi thế
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.
Khó khăn
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 giữa CSS Selectors và XPath là gì?
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ế.
Bạn nên chọn gì giữa hai?
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.
Kết thúc
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.