Xpath và css là gì?
|
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 Show
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 CSSVâ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 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 Đó 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
Điều đó dễ dàng hơn rất nhiều, phải không?
Lịch sử của bộ chọn XPath và CSSCả 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 XPathNó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 tốt hơn với XPath 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 phần tử tổ tiên) + 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 CSSMộ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. 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ẻ 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 - Chỉ có thể chọn các phần tử (không có thuộc tính hoặc nội dung) ví dụChúng tôi muốn có được. Biểu thức XPathCSS selectoralla phần tử//a54_______tất cả các phần tử a với lớp HTML "external"acon[a] Ví dụ cho ngắn gọn, việc kiểm tra hoàn chỉnh sẽ phức tạp hơn [c] XPath dựa trên số không, trong khi CSS dựa trên một Khai thác dữ liệu với bộ chọn CSS và ScrapingBeeChỉ 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 Thực hiện 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ố 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 (_______11_______8 cho tiêu đề và 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
Sử dụng bộ chọn XPath và CSS trong trình duyệtTrong 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
 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ệtTrong ví dụ của chúng tôi trên
Nếu chúng tôi chọn Mặt khác, nếu chúng tôi chọn
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ứcHai 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 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ế 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ể -> Chúng tôi chỉ cần sử dụng 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
Ngoài ra, vui lòng xem phầ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ệtCuố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
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ượcChúng tôi hy vọng bạn thích bài viết này và bạn đã hiểu rõ, bước đầu hiểu được hai ngôn ngữ là gì và đâu là điểm mạnh cũng như sự khác biệt của chúng 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 đó
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 XPath hay CSS cái nào tốt hơn?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. Chúng ngắn hơn nhiều và dễ đọc và dễ hiểu hơn. Tuy nhiên, có một số trường hợp bạn cần sử dụng XPath thay vì CSS, chẳng hạn như khi tìm kiếm phần tử cha hoặc tìm kiếm phần tử theo văn bản của nó.
Tại sao chúng tôi sử dụng XPath thay vì CSS?XPath cho phép bạn điều hướng lên DOM khi tìm kiếm các phần tử để kiểm tra hoặc cạo. Nó tương thích với các trình duyệt cũ (hoặc tại thời điểm xuất bản—kể cả các phiên bản Internet Explorer cũ hơn mà một số công ty vẫn sử dụng). Tạo trong XPath linh hoạt hơn trong CSS Selector
Khi nào sử dụng đường dẫn XPath và CSS trong Selenium?Chúng ta có thể duyệt cả tiến và lùi trong DOM, tôi. e chúng ta có thể di chuyển từ phần tử cha sang phần tử con và cả từ phần tử con sang phần tử cha với xpath. Tuy nhiên đối với css, chúng ta chỉ có thể duyệt từ cha sang con chứ không thể ngược lại. Về hiệu suất, css tốt hơn và nhanh hơn, trong khi xpath chậm hơn
CSS trong Selenium là gì?Bộ chọn CSS là gì? . Giống như XPath trong Selenium, bộ chọn CSS có thể định vị các phần tử web mà không cần ID, lớp hoặc Tên. The CSS Selector combines an element selector and a selector value that can identify particular elements on a web page. Like XPath in Selenium, CSS selectors can locate web elements without ID, class, or Name. |
