Scegliere il selettore giusto per lo scraping del web: CSS o XPath
Sapete qual è il selettore corretto da usare nel web scraping? Negli ultimi dieci anni il web scraping è diventato molto popolare per estrarre dati da Internet. Aiuta le aziende ad acquisire e analizzare i dati per prendere decisioni aziendali migliori. Grazie alle tecnologie automatizzate, lo scraping del web non è mai stato così facile come ora.
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.
Tuttavia, a prescindere dallo strumento o dal framework scelto, è necessario prendere una decisione cruciale per garantire che il vostro scraper effettui lo scrapping dei dati in modo educato. Si tratta di decidere se estrarre gli elementi del Web usando XPath o i selettori CSS, come si apprende in questo articolo.
Vediamo alcuni esempi esistenti.
Che cos'è un selettore XPath?
XPath è l'acronimo di XML Path Language. Tuttavia, utilizza una sintassi non XML per selezionare tag o gruppi di tag da un documento XML o HTML, come nel caso del web scraping. XPath consente di scrivere espressioni per accedere direttamente a un elemento HTML o XML senza attraversare l'intera struttura HTML.
Per capire come si può accedere a un elemento usando XPath, approfondiamo il discorso con un codice HTML. Presumo che conosciate già un po' di HTML di base.
<!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>
È possibile digitare il codice di cui sopra in un editor di propria scelta e salvarlo come products.html. Quindi è possibile visualizzarlo in un browser (preferibilmente Google Chrome, con il quale affronteremo questo esempio).
Quando il browser esegue questo codice, fraseggia l'HTML e crea una rappresentazione ad albero degli elementi. È noto come DOM (Document Object Model) nella forma seguente:
È possibile leggere ulteriori informazioni sul DOM al link indicato. Ora l'attenzione si concentra sull'XPath, su come navigare verso ciascuno di questi elementi senza attraversare l'intero albero. Cominciamo quindi con la terminologia di base dell'Xpath.
Cosa sono i nodi?
Con XPath, l'elemento fondamentale è un nodo. I nodi sono semplicemente i singoli elementi appena visti nell'albero DOM. Proseguendo in questo articolo, scoprirete che i nodi sono costituiti da elementi di tag, attributi, stringhe di valori assegnati e così via. In ogni pagina XML o HTML ce ne sono sette e analizziamo da vicino ogni tipo di nodo.
- 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.
Sebbene i tre punti sopra citati siano i più significativi, è fondamentale conoscere anche i quattro seguenti a titolo informativo.
- 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”>.
- Commenti: Sono i commenti di un documento HTML o XML che il compilatore o il parser non elaborano.
- 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.
Qual è la relazione tra i nodi?
- 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>.
Come trovare l'XPath di un elemento HTML?
Ci sono due modi per farlo. Innanzitutto, facciamo una dimostrazione o un esempio di codice. Come ho detto sopra, spero che l'abbiate salvato sul disco locale e che sia pronto per essere visualizzato nel browser.
Quando la pagina viene caricata, passare il mouse sull'elemento 1 e fare clic con il tasto destro del mouse su di esso. Selezionare quindi la voce Ispeziona dal menu che appare, come mostrato nella schermata seguente:
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:
Poi, dopo averla incollata in un file di testo o da qualche parte, si ottiene:
/html/body/ul/li[1]
Questo è noto come percorso assoluto. Di seguito spiegherò come è stato ricavato.
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]
Percorso assoluto
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:
Anche se il metodo precedente sembra lungo, vi aiuterà a capire come costruire l'XPath completo. Passiamo ora al metodo relativo.
Percorso relativo
//*[@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.
La differenza tra percorsi relativi e assoluti
Le differenze significative sono che l'XPath completo non è leggibile ed è difficile da mantenere. L'altra ovvia preoccupazione è che se ci sono modifiche a qualsiasi elemento a partire dall'elemento radice, l'XPath assoluto non sarà valido. È quindi opportuno utilizzare l'XPath relativo.
Tuttavia, prima di commentare ulteriormente, analizziamo i vantaggi e gli svantaggi.
Vantaggi e svantaggi di XPATH
Vantaggi
Con XPath, non ci si deve preoccupare se non si conosce il nome di un elemento, perché si può utilizzare la funzione contains per cercare le corrispondenze probabili. Pertanto, è possibile risalire il DOM quando si cerca un elemento da analizzare.
L'altro vantaggio significativo dei CSS è che funzionano con i browser più vecchi, come le versioni obsolete di Internet Explorer.
Svantaggi
Come si è appreso in precedenza, il suo svantaggio più significativo è la facilità di rottura quando si cambiano gli elementi nel percorso. Può essere difficile da comprendere rispetto ai selettori CSS che scopriremo di seguito.
Inoltre, quando si recuperano elementi da XPath, le sue prestazioni sono molto più lente di quelle dei CSS.
Che cos'è un selettore CSS?
Come già sapete, CSS è l'acronimo di Cascading Style Sheets (Fogli di stile a cascata), utilizzati per lo styling degli elementi HTML in una pagina web. Questi stili comprendono l'applicazione di colori ai caratteri, alle immagini di sfondo e ai colori, l'allineamento e il posizionamento degli elementi e l'aumento/diminuzione degli spazi tra i paragrafi.
Per impostare uno stile a un elemento HTML, è necessario specificarlo attraverso un selettore CSS. Cominciamo con un semplice esempio partendo dal markup della prossima sezione.
Come vengono creati i selettori CSS?
<h1 id="main-heading" class="header-styles" name="h1name">What are CSS Selectors?</h1>
Ecco quindi il selettore CSS per l'elemento di cui sopra:
- <h1>-selects by the element name <h1>
- #main-heading - #specifica l'id dell'elemento
- .header-styles - Il punto indica il nome della classe
- [name="h1name"] - È possibile specificare gli attributi tra parentesi quadre.
Si possono anche combinare:
h1.header-styles: questo selettore CSS seleziona gli elementi h1 con classe header-styles.
Selettori avanzati
L'operatore > viene utilizzato per selezionare i figli. Al contrario, l'operatore + sceglie il primo fratello e l'operatore ~ è usato per selezionare tutti i fratelli. Alcuni esempi sono i seguenti:
- 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.
Vantaggi e svantaggi dell'uso dei selettori CSS
Vantaggi
A differenza di XPath, che Beautiful Soup non supporta, i selettori CSS sono supportati dalle librerie di scraping più efficaci. Inoltre, a differenza di XPath, i selettori CSS sono più facili da imparare e da mantenere. Quasi tutti i browser li supportano, ad eccezione di quelli precedenti alla versione 8 di Internet Explorer. Tuttavia, al giorno d'oggi si usano raramente questi browser.
Svantaggi
Anche se si escludono le versioni più vecchie di Internet Explorer dall'equazione, potrebbero comunque esserci delle incongruenze nel modo in cui vengono visualizzate sui diversi browser.
Poiché esistono diverse versioni di CSS, esse possono creare confusione tra gli sviluppatori e i principianti.
Un altro fattore vitale dell'attuale tecnologia web è la sicurezza del CSS.
Quali sono le differenze tra i selettori CSS e XPath?
La differenza apparente tra XPath e CSS è che XPath è bidirezionale. Ciò significa che è possibile attraversare l'albero DOM in entrambe le direzioni. Con i CSS, invece, si può passare solo dal nodo genitore ai nodi figli, il cosiddetto flusso unidirezionale.
Come discusso nelle sezioni precedenti, XPath è più difficile da mantenere e non è un buon candidato per una leggibilità efficace. D'altra parte, sebbene XPath possa funzionare nei browser tradizionali, il modo in cui viene reso varia da un browser all'altro.
Pertanto, da questo punto di vista, il CSS è in vantaggio.
Cosa scegliere tra i due?
XPATH si distingue perché i CSS possono passare dai genitori ai figli solo in aree specifiche, come l'attraversamento dell'albero DOM. Per quanto riguarda la velocità, i CSS sono in vantaggio.
Tuttavia, la differenza di velocità tra XPath e CSS non conta molto quando si tratta di web scraping. Ci sono altri fattori da considerare, come la latenza di rete nello scraping del web.
I CSS sono la prima scelta quando si tratta di Beautiful Soup, poiché non supportano l'XPath.
Conclusione
Non esiste una risposta precisa su quali selettori utilizzare per il vostro progetto di web scraping. Come avete scoperto in questo articolo, XPath ha un vantaggio in alcune situazioni, mentre CSS si distingue in altre.
Per questo motivo, è necessario tenere conto di aspetti specifici e vitali come l'attraversamento, il supporto del browser e alcune delle capacità tecniche di cui abbiamo parlato. Ci auguriamo che mettiate in pratica ciò che avete imparato e restate sintonizzati per altri articoli.