Czy wiesz, który selektor jest odpowiedni do skrobania stron internetowych? Web scraping stał się dość popularny w ostatniej dekadzie w celu pozyskiwania danych z Internetu. Pomaga firmom pozyskiwać i analizować dane w celu podejmowania lepszych decyzji biznesowych. Dzięki zautomatyzowanym technologiom web scraping nigdy nie był łatwiejszy niż teraz.
Czy wiesz, który selektor jest odpowiedni do skrobania stron internetowych? Web scraping stał się dość popularny w ostatniej dekadzie w celu pozyskiwania danych z Internetu. Pomaga firmom pozyskiwać i analizować dane w celu podejmowania lepszych decyzji biznesowych. Dzięki zautomatyzowanym technologiom web scraping nigdy nie był łatwiejszy niż teraz.
Jednak niezależnie od wybranego narzędzia lub frameworka, musisz podjąć kluczową decyzję, aby zapewnić, że Twój scraper grzecznie zeskrobuje dane. Chodzi o to, czy wyodrębniać elementy internetowe za pomocą XPath lub selektorów CSS, które poznasz w tym artykule.
Przyjrzyjmy się kilku istniejącym przykładom.
XPath to skrót od XML Path Language. Używa on jednak składni innej niż XML do wybierania znaczników lub grup znaczników z dokumentu XML lub HTML, tak jak w przypadku skrobania stron internetowych. XPath umożliwia pisanie wyrażeń w celu uzyskania bezpośredniego dostępu do elementu HTML lub XML bez konieczności przechodzenia przez całe drzewo HTML.
Aby zrozumieć, w jaki sposób można uzyskać dostęp do elementu za pomocą XPath, zagłębmy się w kod HTML. Zakładam, że znasz już podstawy HTML.
<!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>
Możesz wpisać powyższy kod w wybranym edytorze i zapisać go jako products.html. Następnie możesz wyświetlić go w przeglądarce (najlepiej Google Chrome, ponieważ to właśnie z nią przejdziemy przez ten przykład).
Kiedy przeglądarka uruchamia ten kod, frazuje HTML i tworzy drzewiastą reprezentację elementów. Jest ono znane jako DOM (Document Object Model) w następującej formie:
Możesz przeczytać więcej o DOM pod podanym linkiem. Skupiamy się teraz na XPath, czyli na tym, jak od razu przejść do każdego z tych elementów bez przechodzenia przez całe drzewo. Zacznijmy więc od podstawowej terminologii Xpath.
W XPath najbardziej podstawowym elementem jest węzeł. Cóż, węzły to po prostu poszczególne elementy, które właśnie zobaczyłeś w drzewie DOM. W miarę postępów w tym artykule odkryjesz, że węzły składają się z elementów znaczników, atrybutów, przypisanych do nich wartości ciągów i tak dalej. Na każdej stronie XML lub HTML znajduje się ich siedem. Przyjrzyjmy się bliżej każdemu typowi węzła.
Podczas gdy powyższe trzy są najważniejsze, ważne jest również, aby znać następujące cztery tylko dla informacji.
Można to zrobić na dwa sposoby. Po pierwsze, zademonstrujmy to lub zakodujmy przykład. Jak wspomniałem powyżej, mam nadzieję, że zapisałeś go na dysku lokalnym i jest gotowy do wyświetlenia w przeglądarce.
Po załadowaniu strony najedź kursorem myszy na element 1 i kliknij go prawym przyciskiem myszy. Następnie wybierz Inspect z wyświetlonego menu, jak pokazano na poniższym zrzucie ekranu:
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:
Następnie, po wklejeniu go do pliku tekstowego lub innego miejsca, otrzymasz:
/html/body/ul/li[1]Jest to znane jako ścieżka bezwzględna . Poniżej wyjaśnię, jak ją uzyskać.
Krok 1 => li[1] //Tutaj jeden oznacza pierwszy element li
Krok 2 => /li[1]
Krok 3 => ul/li[1]
Krok 4 => /ul/li[1]
Krok 5 => body/ul/li[1]
Krok 6 => /body/ul/li[1]
Krok 7 => html/body/ul/li[1]
Krok 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:
Chociaż powyższa metoda wydaje się długa, pomoże ci zrozumieć, jak zbudować pełną ścieżkę XPath. Przejdźmy teraz do metody względnej.
//*[@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.
Istotne różnice polegają na tym, że pełny XPath nie jest czytelny i trudny w utrzymaniu. Inną oczywistą obawą jest to, że jeśli nastąpią zmiany w jakimkolwiek elemencie zaczynającym się od elementu głównego, bezwzględna ścieżka XPath nie będzie ważna. Dlatego sensowne jest użycie względnej ścieżki XPath.
Zanim jednak przejdziemy do dalszych komentarzy, przyjrzyjmy się najpierw zaletom i wadom.
Dzięki XPath nie musisz się martwić, jeśli nie znasz nazwy elementu, ponieważ możesz użyć funkcji contains, aby wyszukać prawdopodobne dopasowania. W związku z tym można przejść w górę DOM podczas odpytywania o elementy do zeskrobania.
Inną istotną zaletą CSS jest to, że działa on w starszych przeglądarkach, takich jak przestarzałe wersje Internet Explorera.
Jak dowiedziałeś się powyżej, jego najważniejszą wadą jest łatwiejsze do złamania podczas zmiany elementów na ścieżce. Może to być trudne do zrozumienia w porównaniu do selektorów CSS, które poznasz poniżej.
Ponadto, podczas pobierania elementów z XPath, jego wydajność jest znacznie wolniejsza niż CSS.
Jak już wiesz, CSS to skrót od Cascading Style Sheets (Kaskadowe Arkusze Stylów), który jest powszechnie używany do stylizacji elementów HTML na stronie internetowej. Style te obejmują stosowanie kolorów czcionek, obrazów tła i kolorów, wyrównywanie i pozycjonowanie elementów oraz zwiększanie/zmniejszanie odstępów między akapitami.
Aby ustawić styl dla elementu HTML, należy określić go za pomocą selektora CSS. Zacznijmy od prostego przykładu, zaczynając od znaczników w następnej sekcji.
<h1 id="main-heading" class="header-styles" name="h1name">What are CSS Selectors?</h1>Oto selektor CSS dla powyższego elementu:
Można je również łączyć:
h1.header-styles - tenselektor CSS wybiera elementy h1 z klasą header-styles.
Operator > służy do wybierania dzieci. Z kolei operator + wybiera pierwsze rodzeństwo, a operator ~ służy do wybierania całego rodzeństwa. Poniżej przedstawiono kilka przykładów:
W przeciwieństwie do XPath, którego Beautiful Soup nie obsługuje, selektory CSS są obsługiwane przez najskuteczniejsze biblioteki scrapingowe. Ponadto, w przeciwieństwie do XPath, selektory CSS są łatwiejsze do nauczenia i utrzymania. Prawie wszystkie przeglądarki je obsługują, z wyjątkiem starszych przeglądarek poniżej Internet Explorera w wersji 8. Jednak w dzisiejszych czasach ludzie rzadko korzystają z tych przeglądarek.
Nawet jeśli starsze wersje Internet Explorera zostaną usunięte z równania, nadal mogą występować niespójności w sposobie renderowania w różnych przeglądarkach.
Ponieważ istnieją różne wersje CSS, mogą one powodować zamieszanie zarówno wśród programistów, jak i początkujących.
Kolejnym istotnym czynnikiem w dzisiejszej technologii internetowej jest bezpieczeństwo CSS.
Widoczną różnicą między XPath i CSS jest to, że XPath jest dwukierunkowy. Oznacza to, że można przechodzić w drzewie DOM w obu kierunkach. Natomiast w CSS można przechodzić tylko od węzła nadrzędnego do węzłów podrzędnych, co znane jest jako przepływ jednokierunkowy.
Jak omówiono w poprzednich sekcjach, XPath jest trudniejszy w utrzymaniu i nie jest dobrym kandydatem do efektywnej czytelności. Z drugiej strony, chociaż XPath może działać w starszych przeglądarkach, sposób renderowania różni się w zależności od przeglądarki.
Dlatego pod tym względem CSS ma przewagę.
XPATH wyróżnia się, ponieważ CSS może przechodzić od rodziców do dzieci tylko w określonych obszarach, takich jak przechodzenie w górę drzewa DOM. Jeśli chodzi o szybkość, CSS ma przewagę.
Jednak różnica w szybkości między XPath i CSS nie ma większego znaczenia, jeśli chodzi o skrobanie stron internetowych. Istnieją inne czynniki, które należy wziąć pod uwagę, takie jak opóźnienia sieciowe w skrobaniu stron internetowych.
CSS byłby pierwszym wyborem, jeśli chodzi o Beautiful Soup, ponieważ nie obsługuje XPath.
Nie ma dokładnej odpowiedzi na pytanie, których selektorów użyć w projekcie skrobania stron internetowych. Jak odkryłeś w tym artykule, XPath ma przewagę w niektórych sytuacjach, podczas gdy CSS wyróżnia się w innych.
W związku z tym należy wziąć pod uwagę konkretne istotne punkty, takie jak przechodzenie, obsługa przeglądarki i niektóre z omówionych przez nas możliwości technicznych. Mamy nadzieję, że przećwiczysz to, czego się nauczyłeś i będziesz na bieżąco z kolejnymi artykułami.