Chọn bộ chọn phù hợp để quét web: CSS hoặc XPath
Bạn có biết bộ chọn nào là đúng để sử dụng trong web scraping 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, web scraping chưa bao giờ dễ dàng hơn bây giờ.
Bạn có biết bộ chọn nào là đúng để sử dụng trong web scraping 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, web scraping chưa bao giờ dễ dàng hơn bây giờ.
Tuy nhiên, bất kể bạn chọn công cụ hay khuôn khổ nào, bạn phải đưa ra quyết định quan trọng để đảm bảo trình thu thập dữ liệu của bạn thu thập dữ liệu một cách lịch sự. Đó là trích xuất các thành phần web bằng XPath hay bộ chọn CSS, mà bạn sẽ tìm hiểu trong bài viết này.
Chúng ta hãy cùng tìm hiểu 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, giống như với web scraping. XPath cho phép bạn viết biểu thức để truy cập trực tiếp vào phần tử HTML hoặc XML mà không cần duyệt toàn bộ cây HTML.
Để hiểu cách bạn có thể truy cập một phần tử bằng XPath, hãy đào 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 soạn thảo bạn chọn và lưu dưới dạng products.html. Sau đó, bạn có thể xem mã trên trong trình duyệt (tốt nhất là Google Chrome vì chúng ta sẽ xem ví dụ này bằng trình duyệt này).
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 (Mô hình đối tượng tài liệu) theo dạng sau:
Bạn có thể đọc thêm về DOM tại liên kết đã cho. Bây giờ chúng ta tập trung vào XPath về cách điều hướng đến từng phần tử này ngay lập tức mà không cần duyệt toàn bộ cây. Vậy hãy bắt đầu với thuật ngữ cơ bản của Xpath.
Node là gì?
Với XPath, phần tử cơ bản nhất là một nút. Vâng, 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 tiếp tục bài viết này, bạn 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, giá trị chuỗi được gán cho nó, v.v. Có bảy nút trong mỗi trang XML hoặc HTML và chúng ta 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.
Trong khi ba điều trên là quan trọng nhất, thì bốn điều sau cũng rất quan trọng để biết 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”>.
- Bình luận: Đây là phần bình luận 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 để thực hiện điều này. Đầu tiên, chúng ta hãy trình bày 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 để xem trên trình duyệt của bạn.
Khi trang tải xong, hãy di chuột qua mục 1 và nhấp chuột phải vào mục đó. Sau đó chọn Inspect từ các mục menu xuất hiện như 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 đó, dán nó vào một tệp văn bản hoặc nơi nào đó, bạn sẽ nhận được:
/html/thân/ul/li[1]
Đây được gọi là đường dẫn tuyệt đối. Tôi sẽ giải thích bên dưới cách bạn đã suy ra nó.
Bước 1 => li[1] //Ở đây 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]
Đường dẫn 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 dòng, 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.
Đường dẫn 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ó 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, sử dụng XPath tương đối là hợp lý.
Tuy nhiên, trước khi bình luận thêm về điều đó, chúng ta hãy cùng xem xét những ưu điểm và nhược điểm.
Ưu điểm và nhược điểm của XPATH
Thuận lợi
Với XPath, bạn không cần 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 contains để tìm kiếm các kết quả khớp có thể xảy ra. Do đó, bạn có thể đi lên DOM khi truy vấn các mục để thu thập.
Lợi ích quan trọng khác của CSS là nó hoạt động trên các trình duyệt cũ như các phiên bản Internet Explorer lỗi thời.
Nhược điểm
Như bạn đã học ở trên, nhược điểm đáng kể nhất của nó là dễ bị phá vỡ hơn khi bạn thay đổi các thành phần trong đường dẫn. Nó có thể khó hiểu hơn 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 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 phổ biến trong việc định kiểu các thành phần HTML trong trang web. Các kiểu này bao gồm áp dụng màu cho phông chữ, hình nền và màu sắc, căn chỉnh và định vị các thành phần, và tăng/giảm khoảng cách giữa các đoạn văn.
Để thiết lập kiểu cho một phần tử HTML, bạn cần chỉ định nó thông qua một CSS Selector. Hãy bắt đầu với một ví dụ đơn giản bắt đầu bằng đá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>
Sau đây là bộ chọn CSS cho phần tử trên:
- <h1>-selects by the element name <h1>
- #main-heading – #chỉ định 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 lớp header-styles.
Bộ chọn nâng cao
Toán tử > được sử dụng để chọn các phần tử con. Ngược lại, toán tử + chọn phần tử anh chị em đầu tiên và toán tử ~ được sử dụng để chọn tất cả các phần tử anh chị em. Một số 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
Thuận lợi
Không giống như XPath, mà Beautiful Soup không hỗ trợ, các bộ chọn CSS được hỗ trợ với các thư viện thu thập dữ liệu hiệu quả nhất. Ngoài ra, không giống như XPath, các 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.
Nhược điểm
Ngay cả khi bạn loại bỏ các phiên bản Internet Explorer cũ hơn, vẫn có thể có sự không nhất quán trong cách hiển thị của chúng trên các trình duyệt khác nhau.
Vì có nhiều phiên bản CSS khác nhau nên chúng có thể gây nhầm lẫn cho 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à tính bảo mật của CSS.
Sự khác biệt giữa CSS Selector và XPath là gì?
Sự khác biệt rõ ràng giữa XPath và CSS là XPath là song hướng. Điều này có nghĩa là bạn có thể duyệt theo cả hai hướng trong cây DOM. Tuy nhiên, bạn chỉ có thể duyệt từ nút cha đến nút con bằng CSS, được gọi là luồng một hướng.
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ũ, nhưng cách hiển thị của nó lại khác nhau giữa các trình duyệt.
Do đó, xét về mặt đó, CSS có lợi thế hơn.
Bạn nên chọn cái nào giữa hai cái này?
XPATH nổi bật vì CSS chỉ có thể duyệt từ phần tử cha đến phần tử con trong các khu vực cụ thể như duyệt lên cây DOM. Về tốc độ, CSS có lợi thế hơn.
Tuy nhiên, sự khác biệt về tốc độ giữa XPath và CSS không đáng kể khi nói đến việc thu thập dữ liệu 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 thu thập dữ liệu 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.
Phần kết luận
Không có câu trả lời chính xác về việc nên sử dụng bộ chọn nào cho dự án trích xuất dữ liệu 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ư duyệt, 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ì đã học và theo dõi thêm các bài viết khác.