XPath frente a CSS
Como aficionado al web scraping, probablemente te hayas encontrado con los términos «XPath» y «selectores CSS». Se trata de dos métodos muy utilizados para navegar y extraer elementos de un documento HTML o XML, pero ¿qué son exactamente y en qué se diferencian? En este artículo, te ofreceré una comparación detallada entre los selectores XPath y CSS, analizando sus características y sus casos de uso.
Comenzaremos con una breve introducción a los selectores XPath y CSS, y utilizaremos ejemplos para mostrar cómo se pueden emplear para navegar y extraer elementos de un documento HTML. Analizaremos las diferencias en cuanto a sintaxis y funcionalidades, y veremos las diversas funciones integradas que ofrece XPath, así como la forma de obtener los mismos resultados utilizando CSS y JavaScript. También comentaremos las ventajas y desventajas de cada método y cómo decidir cuál utilizar en tu proyecto.
¡Así que coge un cuaderno, afila el lápiz y prepárate para sumergirte en el mundo de los selectores XPath y CSS!
Descripción general de los selectores
XPath, abreviatura de XML Path Language, es un lenguaje de consulta que se utiliza para navegar por un documento XML. Se introdujo por primera vez en 1999 con el fin de ofrecer un método estándar para acceder a los elementos de un documento XML. El lenguaje se basa en el concepto de «ruta», que se utiliza para seleccionar elementos específicos en función de su posición dentro del documento.
Una de las características principales de XPath es el uso de la notación de ruta. Esta notación permite seleccionar elementos en función de su ubicación en el árbol del documento. Por ejemplo, en un documento HTML, la ruta «html/body/p» seleccionaría todos los elementos p que sean hijos directos del elemento body, el cual, a su vez, es hijo directo del elemento html.
La sintaxis de XPath es bastante sencilla:
//tagname[@attribute='value']Donde «tagname» es el tipo de elemento HTML que estás buscando (por ejemplo, div, a, p), «attribute» es una propiedad del elemento HTML deseado mediante la cual nuestro localizador realiza la búsqueda (por ejemplo, class) y «value» es el valor específico que deseas encontrar
Los selectores CSS, abreviatura de «Cascading Style Sheets» (hojas de estilo en cascada), se utilizan para seleccionar elementos en función de sus propiedades, como la clase, el identificador y los atributos. Son más fáciles de leer y comprender que XPath, pero tienen una capacidad limitada para navegar por el documento. Los selectores CSS se utilizan principalmente para aplicar estilos y definir el diseño, pero también se pueden usar para extraer información de una página web:
<html> <body> <p class="highlight">Hello, world!</p> </body> </html>|
Para seleccionar el texto «¡Hola, mundo!» utilizando selectores CSS, tendremos que usar JavaScript:
let p_tag = document.querySelector("p.highlight")
let p_text = p_tag.innerTextPor otro lado, XPath se diseñó específicamente para ofrecer un lenguaje de consulta para documentos XML y cuenta con una amplia gama de funciones integradas. Estas funciones se pueden utilizar para realizar cálculos y extraer información específica de los elementos. Por ejemplo, con la función text() de XPath, se puede seleccionar directamente el valor de texto de un elemento:
<html> <body> <p>Hello, world!</p> </body> </html>Para seleccionar el texto «¡Hola, mundo!» utilizando la función text() en XPath, la expresión sería:
/html/body/p/text()Recursos adicionales
Si quieres profundizar en el mundo de los selectores XPath y CSS, tenemos un par de artículos que te pueden ayudar. El primer artículo aborda los conceptos básicos de los selectores XPath, incluyendo la sintaxis, las funciones y cómo navegar por el árbol DOM. El segundo artículo profundiza en los conceptos básicos de los selectores CSS, incluyendo los diferentes tipos de selectores.
Configuración de un ejemplo
Para ilustrar claramente las principales diferencias entre los selectores XPath y CSS, analicemos una estructura HTML de ejemplo:
<!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>Probar los selectores en las Herramientas de desarrollo
Probar los selectores XPath y CSS en las herramientas de desarrollo es una forma rápida y sencilla de comprobar que tus selectores funcionan correctamente. El proceso es similar en la mayoría de los navegadores modernos, pero para este ejemplo utilizaremos Google Chrome.
Para empezar, abre en Google Chrome la página web en la que quieras probar tus selectores. A continuación, haz clic con el botón derecho del ratón sobre el elemento que quieras seleccionar y elige «Inspeccionar» en el menú contextual. Se abrirá la ventana de herramientas de desarrollo:
En la ventana de herramientas de desarrollo, verás el código fuente HTML de la página web a la izquierda y la página web renderizada correspondiente a la derecha.
Para obtener el selector XPath y CSS completo de un elemento, haz clic con el botón derecho del ratón sobre el elemento en el código HTML y selecciona «Copiar > Copiar XPath completo» o «Copiar > Copiar selector». De este modo, se copiará en el portapapeles la ruta completa hasta el elemento, incluidos todos los elementos principales. A continuación, puedes pegar esta ruta en tu código o en la barra de búsqueda de las herramientas de desarrollador (Ctrl+F) para acceder al elemento.
Por ejemplo, si quisieras seleccionar todas las etiquetas h2 del código HTML de ejemplo que se muestra arriba, escribirías «//h2» en la barra de búsqueda y pulsarías Intro.
Conclusiones principales
Una de las principales diferencias entre XPath y CSS es que XPath puede seleccionar elementos en función de su posición en el documento. Los selectores CSS se limitan a seleccionar elementos en función de sus propiedades.
Por ejemplo, en XPath, podemos seleccionar el segundo elemento div con la clase «news-story» utilizando la expresión //div[@class='news-story'][2]. Con los selectores CSS, solo podemos seleccionarlo utilizando div.news-story:nth-child(2).
div.news-story:nth-child(2) seleccionará el segundo elemento div de entre todos los elementos div que tengan la clase «news-story» y sean hijos del mismo elemento contenedor.
//div[@class='news-story'][2] te permite seleccionar el elemento en función de su posición dentro del documento completo. No es necesario que el elemento sea hijo de un elemento contenedor 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>En este ejemplo concreto, div[@class='news-story'][2] selecciona la segunda noticia.
div.news-story:nth-child(2) no selecciona nada, ya que cada elemento contenedor tiene un solo elemento hijo directo.
Mayor flexibilidad
XPath ofrece una mayor flexibilidad a la hora de navegar por el árbol DOM. Permite desplazarse tanto hacia arriba como hacia abajo en el árbol. Los selectores CSS solo permiten la navegación hacia abajo. Esto hace que XPath sea más potente y versátil, pero también más complejo.
Con XPath, puedes utilizar ejes como el de padres y el de antepasados para acceder al padre o al antepasado de un elemento, algo que no es posible con los selectores CSS.
Por ejemplo, la expresión XPath //div[@class='news-story'][1]/parent::*//h2 selecciona el primer elemento div con la clase «news-story». A continuación, navega hasta su elemento padre mediante el operador parent::* y, después, selecciona el elemento h2 dentro de ese elemento padre.
Como alternativa, puedes utilizar corchetes para seleccionar el elemento padre del primer elemento div con la clase «news-story» y, a continuación, seleccionar el elemento h2 dentro de ese elemento padre utilizando //div[@class='news-story'][1]/..//h2.
Funciones integradas
Otra diferencia importante entre los selectores XPath y CSS es que XPath cuenta con una amplia gama de funciones integradas, como count(), sum(), string(), substring() y contains(). Estas funciones se pueden utilizar para manipular elementos y extraer datos.
La función count() se puede utilizar para contar el número de elementos que cumplen determinados criterios. Por ejemplo, para contar el número de elementos div con la clase «news-story», podemos utilizar la expresión XPath count(//div[@class='news-story']).
El código equivalente en CSS y JavaScript sería:
document.querySelectorAll('div.news-story').lengthsum() se puede utilizar para calcular la suma de un valor determinado para un conjunto de elementos que cumplan ciertos criterios. Por ejemplo, para calcular el número total de caracteres del contenido de texto de todos los elementos p, podemos utilizar la expresión XPath sum(//p/text()/string-length()).
El código CSS y JavaScript correspondiente sería:
var sum = 0;
var elements = document.querySelectorAll('p');
elements.forEach(function(element) {
sum += element.innerText.length;
});
console.log(sum);La función `substring()` se puede utilizar para extraer una subcadena de una cadena. Por ejemplo, para extraer los caracteres del segundo al quinto del contenido de texto de un elemento determinado, podemos utilizar la expresión XPath `substring(//p/text(), 2, 5)`.
Las contrapartes en CSS y JavaScript:
document.querySelector('p').innerText.substring(2, 5)La función `contains()` se puede utilizar para comprobar si una cadena contiene una subcadena determinada. Por ejemplo, para comprobar si el contenido de texto de un elemento `p` concreto contiene la palabra «Winter», podemos utilizar la expresión XPath `//p[contains(text(),"Winter")]`.
Ventajas de los selectores CSS
Los selectores CSS presentan varias ventajas con respecto a XPath que los convierten en una excelente opción para determinados proyectos. Una de las principales ventajas de los selectores CSS es su sencillez y legibilidad. A diferencia de XPath, que puede resultar complejo y difícil de leer, los selectores CSS son fáciles de entender y utilizar.
Otra ventaja de los selectores CSS es su rendimiento. Dado que los selectores CSS solo se desplazan hacia abajo por el árbol DOM, suelen ser más rápidos que XPath, que puede desplazarse tanto hacia arriba como hacia abajo por el árbol.
Por último, los selectores CSS también se utilizan más ampliamente en el desarrollo web. Esto significa que es más probable que los desarrolladores web estén familiarizados con ellos y que estén más dispuestos a ayudarte con tus proyectos.
Conclusión
En resumen, tanto los selectores XPath como los CSS son herramientas potentes que permiten navegar por un documento HTML y extraer elementos del mismo. XPath es potente y flexible, pero puede resultar difícil de leer, mientras que los selectores CSS son más fáciles de leer, pero tienen una capacidad limitada para navegar por el documento.
A la hora de elegir entre selectores XPath y CSS, ten en cuenta la estructura del documento y la información que deseas extraer. Si quieres extraer datos basándote en la posición de los elementos, XPath es la mejor opción. Sin embargo, si quieres extraer datos basándote en propiedades como la clase o el identificador, los selectores CSS son la mejor opción.
Si te interesa saber más sobre cómo el web scraping puede ayudar a tu empresa, te invito a que te pongas en contacto con nosotros en WebScrapingAPI. ¡Estaremos encantados de responder a todas tus preguntas!
