XPath vs. seletores CSS
Mihai Maxim em 25 de abril de 2023
XPath vs CSS
Como entusiasta da recolha de dados da Web, provavelmente já se deparou com os termos XPath e selectores CSS. Estas são duas formas populares de navegar e extrair elementos de um documento HTML ou XML, mas o que são exatamente e quais são as suas diferenças? Neste artigo, farei uma comparação lado a lado dos selectores XPath e CSS, discutindo as suas caraterísticas e casos de utilização.
Começaremos com uma breve descrição geral dos selectores XPath e CSS e utilizaremos exemplos para mostrar como podem ser utilizados para navegar e extrair elementos de um documento HTML. Exploraremos as diferenças de sintaxe e capacidades e analisaremos as várias funções incorporadas que o XPath oferece e como obter os mesmos resultados utilizando CSS e JavaScript. Também discutiremos os prós e os contras de cada método e como decidir qual deles utilizar no seu projeto.
Por isso, pegue num caderno, afie o lápis e prepare-se para mergulhar no mundo do XPath e dos selectores CSS!
Visão geral dos selectores
XPath, abreviatura de XML Path Language, é uma linguagem de consulta utilizada para navegar através de um documento XML. Foi introduzida pela primeira vez em 1999 como forma de fornecer uma forma normalizada de aceder a elementos num documento XML. A linguagem é construída em torno do conceito de "caminho", que é utilizado para selecionar elementos específicos com base na sua posição no documento.
Uma das principais caraterísticas do XPath é a utilização da notação de caminho. Esta notação permite-lhe selecionar elementos com base na sua localização na árvore do documento. Por exemplo, num documento HTML, o caminho "html/body/p" seleccionaria todos os elementos p que são filhos diretos do elemento body, que por sua vez é um filho direto do elemento html.
A sintaxe do XPath é bastante simples:
//tagname[@attribute='value']
Em que "tagname" é o tipo de elemento HTML que procura (por exemplo, div, a, p), "attribute" é uma propriedade do elemento HTML pretendido através da qual o nosso localizador efectua a pesquisa (por exemplo, class) e "value" é o valor específico que pretende fazer corresponder
Os selectores CSS, abreviatura de Cascading Style Sheets, são utilizados para selecionar elementos com base nas suas propriedades, tais como classe, id e atributos. São mais fáceis de ler e compreender do que o XPath, mas são limitados na sua capacidade de navegar pelo documento. Os selectores CSS são utilizados principalmente para a criação de estilos e esquemas, mas também podem ser utilizados para extrair informações de uma página Web:
<html> <body> <p class="highlight">Hello, world!</p> </body> </html>
|
Para selecionar o texto "Hello, world!" utilizando selectores CSS, temos de utilizar Javascript:
let p_tag = document.querySelector("p.highlight")
let p_text = p_tag.innerTextO XPath, por outro lado, foi especificamente concebido para fornecer uma linguagem de consulta para documentos XML e inclui uma vasta gama de funções incorporadas. Estas funções podem ser utilizadas para efetuar cálculos e extrair informações específicas dos elementos. Por exemplo, com a função text() do XPath, pode selecionar diretamente o valor de texto de um elemento:
<html> <body> <p>Hello, world!</p> </body> </html>
Para selecionar o texto "Hello, world!" utilizando a função text() em XPath, a expressão seria:
/html/body/p/text()
Recursos adicionais
Se pretende aprofundar o mundo dos selectores XPath e CSS, temos alguns artigos que o podem ajudar. Este primeiro artigo aborda os conceitos básicos dos selectores XPath, incluindo a sintaxe, as funções e a forma de navegar na árvore DOM. Este segundo artigo aborda os conceitos básicos dos seletores CSS, incluindo os diferentes tipos de seletores.
Criar um exemplo
Para ilustrar claramente as principais diferenças entre os selectores XPath e CSS, vamos analisar uma estrutura HTML simulada:
<!doctype html>
<html>
<head>
<title>Top News</title>
<meta charset="utf-8" />
</head>
<body>
<h1>Top News Stories</h1>
<div class="container">
<div class="news-story">
<h2> <a href="https://edition.cnn.com/2022/12/28/weather/buffalo-winter-storm-new-york-blizzard-wednesday/index.html">Winter Storm</a> </h2>
<p>Winter storm death toll rises to 37 in Buffalo as criticism arises over handling of storm and cleanup</p>
</div>
<div class="news-story">
<h2> <a href="https://www.nbcnews.com/politics/politics-news/spacex-leader-reassured-nasa-chief-elson-musk-rcna61189">SpaceX</a> </h2>
<p>NASA chief: SpaceX leader says Elon Musk’s Twitter drama is ‘nothing to worry about’.</p>
</div>
</div>
</body>
</html>
Testar os selectores nas Ferramentas de Desenvolvimento
Testar seletores XPath e CSS nas ferramentas de desenvolvimento é uma forma rápida e fácil de verificar se os seletores estão a funcionar corretamente. O processo é semelhante na maioria dos browsers modernos, mas para efeitos deste exemplo, vamos utilizar o Google Chrome.
Para começar, abra a página Web em que pretende testar os selectores no Google Chrome. Em seguida, clique com o botão direito do rato num elemento que pretende selecionar e escolha "Inspecionar" no menu de contexto. Isto abrirá a janela das ferramentas de desenvolvimento:
Na janela de ferramentas do programador, verá o código fonte HTML da página Web no lado esquerdo e a página Web renderizada correspondente no lado direito.
Para encontrar o XPath completo e o seletor CSS de um elemento, clique com o botão direito do rato no elemento no HTML e selecione "Copiar > Copiar XPath completo" ou "Copiar > Copiar seletor". Este procedimento copia o caminho completo para o elemento, incluindo todos os elementos pais, para a área de transferência. Pode então colar este caminho no seu código ou na barra de pesquisa das ferramentas de desenvolvimento (ctrl+f) para aceder ao elemento.
Por exemplo, se quiser selecionar todas as etiquetas h2 do exemplo de html fornecido acima, deve escrever "//h2" na barra de pesquisa e premir enter.
As principais conclusões
Uma das principais diferenças entre XPath e CSS é que XPath pode selecionar elementos com base na sua posição no documento. Os selectores CSS limitam-se a selecionar elementos com base nas suas propriedades.
Por exemplo, em XPath, podemos selecionar o segundo elemento div com a classe news-story utilizando a expressão //div[@class='news-story'][2]. Com seletores CSS, só podemos selecioná-lo usando div.news-story:nth-child(2).
div.news-story:nth-child(2) selecionará o segundo elemento div entre todos os elementos div que têm a classe "news-story" e são filhos do mesmo elemento contentor.
//div[@class='news-story'][2] permite-lhe selecionar o elemento com base na sua posição em todo o documento. O elemento não tem de ser filho de um elemento contentor específico:
<html>
<body>
<div class="container">
<div class="news-story">
<h2>News Story 1</h2>
</div>
</div>
<div class="container">
<div class="news-story">
<h2>News Story 2</h2>
</div>
</div>
</body>
</html>
Para este exemplo específico, div[@class='news-story'][2] seleciona a segunda história.
div.news-story:nth-child(2) não seleciona nada, uma vez que cada elemento contentor tem apenas um filho direto.
Maior flexibilidade
O XPath permite uma maior flexibilidade na navegação na árvore DOM. Inclui a capacidade de deslocação para cima e para baixo na árvore. Os selectores CSS apenas permitem a navegação para baixo. Isto torna o XPath mais poderoso e versátil, mas também mais complexo.
Com o XPath, é possível utilizar eixos como os eixos pai e antepassado para aceder ao pai ou antepassado de um elemento, o que não é possível com os selectores CSS.
Por exemplo, a expressão XPath //div[@class='news-story'][1]/parent::*//h2 seleciona o primeiro elemento div com a classe "news-story". Em seguida, navega para o seu elemento pai utilizando o operador parent::* e, em seguida, seleciona o elemento h2 dentro desse elemento pai.
Em alternativa, pode utilizar parênteses rectos para selecionar o elemento pai do primeiro elemento div com a classe "news-story" e, em seguida, selecionar o elemento h2 dentro desse elemento pai utilizando //div[@class='news-story'][1]/..//h2.
Funções incorporadas
Outra diferença importante entre o XPath e os selectores CSS é que o XPath tem uma vasta gama de funções incorporadas, tais como count(), sum(), string(), substring() e contains(). Estas funções podem ser utilizadas para manipular elementos e extrair dados.
count() pode ser utilizado para contar o número de elementos que correspondem a determinados critérios. Por exemplo, para contar o número de elementos div com a classe news-story, podemos utilizar a expressão XPath count(//div[@class='news-story']).
O equivalente em CSS e JavaScript seria:
document.querySelectorAll('div.news-story').lengthsum() pode ser utilizada para calcular a soma de um determinado valor para um conjunto de elementos que correspondem a determinados critérios. Por exemplo, para calcular o número total de caracteres no conteúdo de texto de todos os elementos p, podemos utilizar a expressão XPath sum(//p/text()/string-length()).
As contrapartes CSS e JavaScript seriam:
var sum = 0;
var elements = document.querySelectorAll('p');
elements.forEach(function(element) {
sum += element.innerText.length;
});
console.log(sum);
substring() pode ser utilizada para extrair uma substring de uma cadeia de caracteres. Por exemplo, para extrair o segundo ao quinto carácter do conteúdo de texto de um determinado elemento, podemos utilizar a expressão XPath substring(//p/text(), 2, 5).
As contrapartes CSS e JavaScript:
document.querySelector('p').innerText.substring(2, 5)contains() pode ser utilizada para verificar se uma cadeia de caracteres contém uma determinada substring. Por exemplo, para verificar se o conteúdo de texto de um determinado elemento p contém a palavra "Winter", podemos utilizar a expressão XPath //p[contains(text(), "Winter")]
Vantagens dos selectores CSS
Os selectores CSS têm várias vantagens em relação ao XPath que os tornam uma excelente escolha para determinados projectos. Uma das principais vantagens dos selectores CSS é a sua simplicidade e legibilidade. Ao contrário do XPath, que pode ser complexo e difícil de ler, os selectores CSS são fáceis de compreender e utilizar.
Outra vantagem dos selectores CSS é o seu desempenho. Uma vez que os selectores CSS apenas navegam para baixo na árvore DOM, são geralmente mais rápidos do que o XPath, que pode navegar para cima e para baixo na árvore.
Por último, os selectores CSS são também mais utilizados no desenvolvimento Web. Isto significa que é mais provável que os programadores Web estejam familiarizados com eles e que estejam mais dispostos a ajudá-lo nos seus projectos.
Concluir
Em resumo, os selectores XPath e CSS são ferramentas poderosas que permitem navegar e extrair elementos de um documento HTML. O XPath é poderoso e flexível, mas pode ser difícil de ler, enquanto os selectores CSS são mais fáceis de ler, mas são limitados na sua capacidade de navegar pelo documento.
Ao escolher entre seletores XPath e CSS, considere a estrutura do documento e as informações que pretende extrair. Se pretender extrair dados com base na posição dos elementos, o XPath é a melhor escolha. No entanto, se pretender extrair dados com base em propriedades como classe ou id, os selectores CSS são uma melhor opção.
Se estiver interessado em saber mais sobre como o web scraping pode ajudar a sua empresa, convido-o a contactar-nos na WebScrapingAPI. Teremos todo o gosto em responder a todas as suas questões!
Notícias e actualizações
Mantenha-se atualizado com os mais recentes guias e notícias sobre raspagem da Web, subscrevendo a nossa newsletter.
We care about the protection of your data. Read our <l>Privacy Policy</l>.Privacy Policy.
Artigos relacionados
Explore o poder transformador da recolha de dados da Web no sector financeiro. Desde dados de produtos a análises de sentimentos, este guia oferece informações sobre os vários tipos de dados da Web disponíveis para decisões de investimento.
Mergulhe no papel transformador dos dados financeiros na tomada de decisões empresariais. Compreender os dados financeiros tradicionais e a importância emergente dos dados alternativos.
Descubra como extrair e organizar eficientemente dados para raspagem da Web e análise de dados através de análise de dados, bibliotecas de análise de HTML e metadados schema.org.