Ir para o conteúdo

Como selecionar elementos por classe em XPath: o guia definitivo

Se você deseja extrair dados de sites, é provável que precise selecionar elementos específicos com base em suas classes. As classes são uma forma fundamental de categorizar e estilizar elementos em HTML. Felizmente, o XPath oferece maneiras poderosas de selecionar elementos por seu atributo de classe.

Neste guia detalhado, veremos exatamente como selecionar elementos por classe usando XPath. Quer você seja um iniciante ou um web scraper experiente, ao final deste artigo você estará navegando habilmente em documentos HTML e direcionando com precisão os elementos necessários. Vamos começar!

Uma rápida recapitulação sobre XPath

Antes de nos aprofundarmos nos seletores de classe, vamos revisar brevemente o que é XPath e como funciona. XPath é uma linguagem de consulta usada para navegar e selecionar nós em um documento XML ou HTML. Ele permite que você escreva expressões que identificam elementos específicos com base no nome da tag, atributos, posição e muito mais.

Aqui estão algumas coisas importantes que você deve saber sobre XPath:

  • XPath trata o documento como uma estrutura em árvore, com um nó raiz e nós filhos ramificando-se dele
  • As expressões são avaliadas da esquerda para a direita
  • Barras (/) são usadas para navegar entre nós
  • Os elementos podem ser selecionados com base em seus nomes (por exemplo //div seleciona tudo <div> elementos)
  • Predicados entre colchetes permitem uma seleção mais precisa (por exemplo //div[@id=‘main‘] seleciona <div> elementos com um id de "principal")

Com essa base definida, vamos voltar nossa atenção para as classes e como aproveitá-las em expressões XPath.

Compreendendo as classes HTML

Classes são um atributo HTML que permite atribuir um ou mais nomes de classe aos elementos. Eles são usados ​​​​principalmente para fins de estilo com CSS, mas também são muito úteis para direcionar elementos específicos durante web scraping.

Aqui está um exemplo de um elemento de parágrafo com duas classes:

<p class="highlight text-center">This is some text.</p>

Neste caso, o <p> O elemento possui duas classes aplicadas a ele: "destaque" e "centro de texto". Um elemento pode ter qualquer número de classes, que são separadas por espaços no valor do atributo de classe.

Uma coisa a ter em mente é que os nomes das classes diferenciam maiúsculas de minúsculas. Então class="highlight" e class="Highlight" seriam consideradas duas classes diferentes.

Agora que entendemos o que são classes HTML, vamos ver como podemos selecionar elementos com base em suas classes usando XPath.

Selecionando Elementos por Classe em XPath

XPath fornece duas maneiras principais de selecionar elementos por seu atributo de classe:

  1. Usando a função contém()
  2. Correspondência exata do nome da classe

Vamos explorar cada uma dessas abordagens com mais profundidade.

Abordagem 1: Usando a função contains()

A contains() função permite selecionar elementos cujo atributo de classe contém um nome de classe específico. Aqui está a sintaxe básica:

//element[contains(@class,‘classname‘)]

Por exemplo, para selecionar todos <div> elementos que possuem uma classe de "container", você usaria:

//div[contains(@class,‘container‘)]  

A contains() função tem algumas características principais:

  • Faz distinção entre maiúsculas e minúsculas (portanto, "contêiner" e "contêiner" seriam tratados como diferentes)
  • O nome da classe pode aparecer em qualquer lugar no valor do atributo de classe
  • O elemento também pode ter outras classes aplicadas, desde que contenha a especificada

So contains(@class,‘container‘) corresponderia a elementos como:

<div class="container"></div>
<div class="wrapper container card"></div>
<div class="container highlighted"></div>

Mas seria não partida:

<div class="containery"></div>
<div class="wrapper"></div>

A contains() abordagem é versátil e pode ser uma boa escolha quando você deseja combinar elementos que possuem uma determinada classe como parte de um conjunto de aulas. Mas se precisar ser mais preciso, a próxima abordagem pode ser preferível.

Abordagem 2: correspondência exata do nome da classe

Para selecionar elementos que possuem um atributo de classe que exatamente corresponde a um valor específico, você pode usar esta sintaxe:

//element[@class=‘classname‘]

Por exemplo, para selecionar <p> elementos onde a classe está exatamente "destacada", você usaria:

//p[@class=‘highlight‘]

Esta expressão corresponderia a:

<p class="highlight"></p>  

Mas não:

<p class="highlight text-center"></p>
<p class="highlights"></p>
<p class="Highlight"></p>

Como você pode ver, a abordagem de correspondência exata é mais rigorosa. O atributo de classe deve conter o nome da classe especificado para corresponder. Nenhuma outra classe pode estar presente e o caso deve corresponder exatamente.

Essa abordagem é útil quando você precisa ser muito preciso na seleção de elementos e deseja evitar a correspondência acidental de elementos que contenham a classe como parte de um conjunto maior.

XPath e classes – principais considerações

Ao usar XPath para selecionar elementos por classe, há algumas coisas importantes a serem lembradas:

  • Os nomes das classes diferenciam maiúsculas de minúsculas. Conforme mencionado anteriormente, "destaque" e "destaque" são tratados como nomes de classes distintos. Certifique-se de que suas expressões XPath correspondam exatamente ao caso.

  • Os elementos podem ter várias classes. É muito comum que os elementos tenham mais de uma classe aplicada, separadas por espaços. O contains() abordagem irá corresponder aos elementos, desde que eles contenham a classe especificada algum lugar em seu atributo de classe.

  • A correspondência exata é mais precisa, mas menos flexível. Se você usar [@class=‘classname‘], o atributo de classe deve contém essa classe. Se houver outras classes aplicadas, o elemento não será correspondido. Em contraste, contains(@class,‘classname‘) corresponderá desde que a classe apareça em algum lugar no valor do atributo.

  • XPath é compatível com a maioria das ferramentas e bibliotecas de web scraping. Esteja você usando Python com BeautifulSoup ou Scrapy, JavaScript com Puppeteer ou Cheerio ou outra linguagem/framework, você provavelmente conseguirá usar expressões XPath para extrair dados. A sintaxe para seleção de classe permanece a mesma.

  • O desempenho é importante para raspagem em grande escala. Embora o XPath seja muito poderoso, ele também pode ser mais lento que outros métodos, como seletores CSS, especialmente para expressões mais complexas. Se você estiver coletando um grande número de páginas, vale a pena comparar diferentes abordagens para ver qual produz o melhor desempenho.

Melhores práticas e dicas do seletor de classe

Para aproveitar ao máximo os seletores de classe XPath, considere estas práticas recomendadas e dicas:

  • Use a expressão mais simples que dá conta do recado. Às vezes, um simples //element[@class=‘classname‘] é tudo o que você precisa. Evite complexidade desnecessária.

  • Combine seletores de classe com outros critérios quando necessário. Você pode usar predicados para selecionar elementos com base em múltiplos atributos (por exemplo //button[@class=‘primary‘ and @type=‘submit‘]) ou combine seletores de classe com seletores posicionais (por exemplo (//div[@class=‘row‘])[2] para selecionar a segunda linha).

  • Esteja atento às alterações no HTML do site. As classes são frequentemente usadas para fins de estilo, o que significa que podem mudar com mais frequência do que outros atributos, como IDs. Se o seu raspador quebrar, verifique se as classes que você está almejando ainda estão presentes na página.

  • Use XPaths relativos para evitar a repetição de expressões longas. Se você já selecionou um elemento pai, você pode usar um ponto (.) para selecionar filhos relativos a esse elemento, como //div[@class=‘container‘]/./p.

  • Considere outros métodos como seletores CSS ou regex para casos de uso específicos. Embora o XPath seja versátil, pode haver momentos em que outra abordagem seja mais simples ou mais rápida. Os seletores CSS têm bom desempenho e são adequados para tarefas básicas de seleção. Expressões regulares podem ser úteis para correspondência de padrões ou extração de dados de conteúdo de texto.

Exemplos de seleção de classe

Vamos examinar alguns exemplos de seleção de classes em ação usando Python e o lxml biblioteca.

Suponha que temos este HTML:

<html>
    <body>
        <div class="container">
            <p class="highlight">Paragraph 1</p>
            <p>Paragraph 2</p>
            <p class="highlight">Paragraph 3</p>
        </div>
    </body>  
</html>

Para selecionar tudo <p> elementos com uma classe de "destaque", podemos usar contains():

from lxml import html

tree = html.fromstring(html_string)
highlighted_paragraphs = tree.xpath(‘//p[contains(@class,"highlight")]‘)

for paragraph in highlighted_paragraphs:
    print(paragraph.text)

# Output: 
# Paragraph 1
# Paragraph 3

Se quiséssemos selecionar apenas o <p> elementos onde a classe está exatamente "destacar", usaríamos:

exact_match_paragraphs = tree.xpath(‘//p[@class="highlight"]‘)

Para selecionar o <div> elemento e então encontre <p> elementos com a classe "destaque" dentro dele, podemos usar um XPath relativo:

div = tree.xpath(‘//div[@class="container"]‘)[0]
highlighted_paragraphs = div.xpath(‘./p[contains(@class,"highlight")]‘)

Juntando tudo

Neste guia, examinamos detalhadamente como selecionar elementos por classe usando XPath. Abordamos as duas abordagens principais – usando a função contains() e a correspondência exata do nome da classe – bem como as principais considerações, práticas recomendadas e exemplos.

Para resumir:

  • XPath é uma linguagem de consulta poderosa para selecionar elementos em documentos HTML/XML
  • As classes são uma forma de atribuir categorias aos elementos, muitas vezes para fins de estilo ou seleção.
  • A contains(@class,‘classname‘) abordagem seleciona elementos que contêm a classe especificada como parte de seu valor de atributo de classe
  • A [@class=‘classname‘] abordagem seleciona elementos onde o atributo de classe corresponde exatamente à classe especificada
  • Os seletores de classe XPath diferenciam maiúsculas de minúsculas e podem ser combinados com outros critérios ou seletores relativos
  • É importante escolher a expressão mais simples que atenda ao seu objetivo e estar atento às alterações no HTML do site ao longo do tempo

Armado com esse conhecimento, você estará bem equipado para enfrentar uma ampla variedade de desafios de web scraping usando XPath e seletores de classe. Quer você seja um iniciante ou um profissional experiente, entender como direcionar com precisão os elementos necessários é uma habilidade essencial.

Ao colocar essas técnicas em prática, lembre-se de sempre respeitar os proprietários de sites e cumprir todos os termos de serviço aplicáveis ​​ou arquivos robots.txt. Boa raspagem!

Junte-se à conversa

O seu endereço de e-mail não será publicado. Os campos obrigatórios são marcados com *