No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Expresiones en XPath

9/21
Recursos

Aportes 52

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Para escribir expresiones se usara lo siguiente $x(''). Entre las comillas se van a escribir las expresiones, las expresiones tienen diferentes s铆mbolos que tienen una utilidad.

Se describe la utilidad de cada expresi贸n.

  • / hace referencia a la ra铆z, o tambien significa un salto entre nodos. e.g /html/bodyMuestra todo lo que hay dentro del body de html
  • // Sirve para acceder a todos los nodos con la etiqueta seleccionada. e.g [*//span](//span) muestra todas las etiquetas span*
  • .. Sirve para acceder a los nodos padre de la etiqueta tag. e.g //span/.. accede a todos los nodos padre de span
  • . Hace referencia al nodo actual. e.g. //span/. es equivalent a //span
  • @ Sirve para traer los atributos. e.g //div/@class Nos da las clases de todos los divs

Cuando deban hacer una b煤squeda a gran escala, una herramienta que les puede ayudar es la extensi贸n en chrome de xPath Finder. OJO, esta extensi贸n les va a decir el xpath de lo que est谩n buscando, pero no es un reemplazo total a lo que aprendemos ac谩. Por eso aclaro que 煤senla cuando deban buscar muchos paths, de lo contrario h谩ganlo manual.

Quien quiera agregar la extensi贸n a su navegador ac谩 dejo el link:

https://chrome.google.com/webstore/detail/xpath-finder/ihnknokegkbpmofmafnkoadfjkhlogph

Si desean ver directamente el elemento en la p谩gina y verificar su expresi贸n. Se puede usar en la pesta帽a de Elements el comando Ctrl + F y poniendo directamente la expresi贸n, el navegador de muestra el elemento en concreto. Por ejemplo: //h1/a/text()

RESUMEN: Expresiones en Xpath
鈻犫枲鈻犫枲鈻犫枲鈻犫枲鈻犫枲鈻犫枲鈻犫枲鈻犫枲鈻犫枲鈻犫枲鈻犫枲鈻犫枲鈻犫枲鈻犫枲鈻犫枲鈻犫枲鈻犫枲鈻犫枲鈻犫枲鈻犫枲鈻

  • / : Significa la raiz o root de todo el documento, tambien significa un salto entre nodos. Puedo navegar entre niveles

  • // : Puedo ir por varios niveles en el esquema que construimos.

Ejemplo:

# Fuente de trabajo Quotes to Scrape:

url ="http://quotes.toscrape.com/"

#Quiero extraer el texto de mi nodo h1.

$x('//h1/a/text()').map(x => x.wholeText)
# Devuelve en consola: ["Quotes to Scrape"]
#La funci贸n map pertenece a Js y la estoy usando para que me muestre todo el texto de la 
selecci贸n de Xpath.

Existen otras expresiones

  • /鈥 : Acceder a todos los nodos padre de x nodo.
  • /@atribute_name : Me permite extraer atributos
#Estoy trayendo todos los atributos class de los nodos span.
$x('//span/@class')

Para ser espec铆ficos con los datos a extraer se usan predicados.

COPIA Y PEGA EL XPATH:

Fui a jugar un rato en Amazon con lo aprendido en esta clase y descubri que es posible obtener el Xpath completo, para tan solo copiar y pegar, chequen:

Me costo trabajo pero lo logre.
Extraje de wikipedia los links del menu de contenido:

for(i=1; i<=5; i++)
{
     console.log(i + '.-  ' + $x('//*[@id="p-navigation"]/div/ul/li/a')[i].href)
}

y los imprimi en consola.

haciendo click derecho en copiar en la seccion elements del inspector podemos copiar el elemento en formato xpath para ese elemento

// = {Espacion en blanco} ( Brinca directamente a la etiqueta )
/ = > ( Selecciona el nodo siquiente )

CSS no tiene una forma nativa pata acceder a los elementos padre o al valor de un atributo (Pero si puede buscar segun un atributo e inclusive un atributo con un valor especifico) sin embargo cada lenguaje implementa metodos para poder acceder a estos.

# Navegar entre la jerarquia
$$('html > body > div > div')

# Ir directamente al nodo ( Retorna todos los nodos concidentes )
$$('h1')

# Brinca hasta la primera concidencia sin necesidad de seguir la jerarquia de nodos directamente
$$('html > body span')

# Acceder a los padres en JS ( map() solo es para aplicar el metodo a cada elemento de la lista )
$$('span').map(x => x.parentElement)

# Buscar los elementos que tengan el atributo class
$$('span[class]')

# Obtener el valor del atributo
$$('span[class]').map( x => x.getAttribute('class') )
$$('span[class]').map( x => x.attributes['class'].value )

*( CSS brinca hasta el nodo donde encuentre la concidencia )
**( Las funciones para obtener los valores de los atributos varian segun el lenguaje de programacion )

Para usar los selectores de CSS se usa $(鈥欌) o $$(鈥欌)
La pricipal diferencia es que usando un solo $ solo devuelve la primer concidencia y con $$ devuelve todas las concidencias
https://developers.google.com/web/tools/chrome-devtools/console/utilities#queryselectorall
https://developers.google.com/web/tools/chrome-devtools/console/utilities#queryselector

Me parece mejor usar

$x('//h1/a/text()').map(x => x.data)

en lugar de

$x('//h1/a/text()').map(x => x.wholeText)

Es posible usar Xpath desde la consola usando JavaScript, para esto debemos valernos de las siguientes expresiones:
.

  • $x(鈥欌) = entre las comillas es que debo escribir mis expresiones de Xpath.
    .
  • /: el slash hace referencia al root/ra铆z del documento HTML. $x(鈥/鈥) esto devuelve el objeto document. El slash tambi茅n se usa para salta de un nodo a otro, respetando una jerarqu铆a, $x(鈥/html/body/div/h1鈥).
    .
  • //: El doble Slash sirve para saltar directamente a un nodo, $x(鈥//h1鈥), esto de devuelve el o los h1 disponibles en el documento HTML.
    .
  • text() = este m茅todo me devuelve el texto del o los nodos que estoy seleccionando $x(鈥//h1/a/text()鈥), esto me devolver铆a un objeto text, el cual tiene tas las propiedades de un nodo tipo texto y entre estas propiedades est谩 el nodoValue el cual contiene el texto del h1.
    .
  • Usando el m茅todo map() = $x(鈥//h1/a/text()鈥).map(x => x.wholeText), esto me devuelve el texto del o los nodos seleccionados. Ojo, este m茅todo es de JavaScript y por tanto funciona en la consola, pero no lo har谩 al trabajar en Python.
    .
  • /鈥 = Me permite ir directo a un nodo, pero me devuelva el padre directo de cada uno. $x(鈥//span/鈥︹) es similar a navegar desde la consola de comandos.
    .
  • @ = Se usa para acceder a los atributos de uno o varios nodos, por ejemplo: $x(鈥//span/@class鈥), esto me devuelve tas las clases de todos los span, pero al igual que text() me devuelve un objeto y dentro de este puedo ver el nombre de la clase en el atributo value.

Saber manejar la consola me ayudo mucho a entender esta clase!

Para los que les interesa saber que hace la funcion map() esta en palabras simples solo aplica una funcion a cada elemento de ua lista ( Esta lista son los resultados de la busqueda )

$x('//h1/a/text()')
	[text]
		0: text
			assignedSlot: null
			....
			previousSibling: null
			textContent: "Quotes to Scrape"
			wholeText: "Quotes to Scrape"
		length: 1
		__proto__: Array(0)

$x('//h1/a/text()').map(x => x.wholeText)
	["Quotes to Scrape"]

La funcion solo accede a la propiedad wholeText del resultado, esto para cada elemento de la lista


Usando CSS seria algo asi
Resultado de la busqueda:

$$('h1 a')
	[a]
		0: a
			accessKey: ""
			....
			text: "Quotes to Scrape"
			textContent: "Quotes to Scrape"
	length: 1
	__proto__: Array(0)

Para acceder al texto es hacer lo mismo

$$('h1 a').map(x => x.text)
["Quotes to Scrape"]

$x(''): Para utilizar las expresiones de XPath.

Algunos ejemplos de expresiones en XPath:

  • Siempre deben ir dentro de comillas y par茅ntesis as铆: $x(' expresi贸n ')

En definitiva este curso tiene mucho potencial, el XPath permite interactuar de manera muy din谩mica con los nodos del HTML.

Les comparto las diferentes expresiones usadas:

$x('/')
$x('/html')
$x('/header')
$x('//h1')
$x('//h1/a/text()')
$x('//h1/a/text()').map(x => x.wholeText)
$x('//span/.')
$x('//span/..')
$x('//span/@class')

Clase maravillosa y que te hace sacarle el miedo a la consola, como tantas otras, adem谩s de poder ir a las entra帽as de cada web. Ya sacaremos adelante estas pr谩cticas.

# Ir a la ra铆z. O agregar despues para seleccionar un nodo
$x('/')

# Salto entre nodos
$x('//')

# Ir directo al nodo
$x('//h1')

# Extraer directo del nodo en Python
$x('//h1/text()')

# Extraer directo del nodo en JS
$x('//h1/a/text()').map(x => x.wholeText)

# Accede al nodo padre
$x('//span/..')

# Acceder a todos los padres del nodo 
$x('//span').map(x => x.parentElement)

# Extrae los span con atributo class
$x('//span/@class')

Que buena onda le pone Facundo!! muy bueno!

He hecho un resumen de las expresiones disponibles en XPath que aprendimos en esta clase, en la siguiente imagen:

Tambi茅n muestra el texto:
$x(鈥//h1/text()鈥)[0].wholeText

$x('//span/small[@class="author"]/text()').map(x=>x.wholeText)```

$x('//'): Doble slash para ir directamente a un nodo.

Nos saltamos
el a : $x(鈥//h1//font/text()鈥).map(x=>x.wholeText)

Otras notaciones comunes en XPath incluyen:

/: Esta notaci贸n se utiliza para seleccionar un nodo espec铆fico en el nivel inmediatamente inferior al nodo actual. Por ejemplo, /libreria/libro/titulo seleccionar铆a el elemento <titulo> de todos los elementos <libro> en el documento XML.

.: Esta notaci贸n se utiliza para seleccionar el nodo actual. Por ejemplo, ./titulo seleccionar铆a el elemento <titulo> del nodo actual.

..: Esta notaci贸n se utiliza para seleccionar el nodo padre del nodo actual. Por ejemplo, ../autor seleccionar铆a el elemento <autor> que es un nodo hermano del nodo actual.

*: Esta notaci贸n se utiliza para seleccionar todos los nodos que cumplen con una determinada condici贸n. Por ejemplo, *[@tipo='novela'] seleccionar铆a todos los elementos que tienen un atributo tipo con el valor 'novela'.

@: Esta notaci贸n se utiliza para seleccionar un atributo espec铆fico de un elemento. Por ejemplo, @isbn seleccionar铆a el valor del atributo isbn de un elemento XML.

Xpath Lenguaje que nos permite movernos entre nodos del HTML de una pagina web para extraer la informaci贸n de las etiquetas. Esto es lo que he entendido hasta el momento de xpath.

Estructura b谩sica:

$x('')

Resumen de las expresiones de la clase:

Expresion ejemplo descripci贸n
/ /html/body/div root
// //h1 Anywhere
text() //h1/a/text() Texto de la etiqueta
//span/鈥 nodos padre
@ //span/@class atributo

este lenguaje tiene muchas similitudes con HTML, y podemos usar la misma t茅cnica para extraer informaci贸n de paginas web, las expresiones de Xpath se escriben dentro de 鈥 鈥

  1. / es una expresi贸n que indica el root, tambi茅n significa un salto entre nodos
$x('/') 
  1. // Significa salto entre nodos, iras tipo de nodoseleccionado
$x('//h1') 
  1. /text para poder ver el texto
$x('//h1/atext()').map(x=>x.wholeText) 
  1. /鈥 si quiero acceder a los nodos de tipo padre
$x('//span/..') 
  1. para extraer atributos es con @
$x('//span/@class') 

$x(鈥/html鈥)

Muy buena clase.

Resumen:
.
$x(鈥/鈥)
Ra铆z del documento
.
$x(鈥/html鈥)
$x(鈥//鈥)
Salto entre nodos
.
$x(鈥//h1鈥)
$x(鈥//h1/text()鈥)
Texto del h1
.
$x(鈥//h1/a/text()鈥).map(x => x.wholeText)
$x(鈥//span/@class鈥)
Atributos tipo class

Para obtener el texto sin usar funci贸n map

$x('//h1/a/text()').pop().data

Primera tendencia en twitter:

$x('//*[@id="react-root"]/div/div/div[2]/main/div/div/div/div/div/div[2]/div/div/section/div/div/div[3]/div/div/div/div[2]/span/span/text()').map(x => x.wholeText)

Mi expresion en XPath:

for(i=1; i<=5; i++)
{
     console.log(i + '.-  ' + $x('//*[@id="p-navigation"]/div/ul/li/a')[i].href)
}

Que clase tan bien explicada!

Les comparto esta extenci贸n de chrome que uso desde hace tiempo, sirve para CSS y Xpath.

excelente

$x('/')
Es una expresi贸n para la ra铆z del documento
$x('/html')
$x('//')
Salto entre nodos
$x('//h1')
$x('//h1/text()')
Me trae el texto del h1
$x('//h1/a/text()').map(x => x.wholeText)

$x('//span/@class')
Me trae los atributos tipo class

/ Expresa relacion entre nodos padres e hijos
// Ingresa directamente a la etiqueta
. Nodo actual
鈥 Nodo padre del nodo actual
@ Atributo

que excelente clase, explicado a detalle y profundidad. muchas gracias

Expresiones
$x(鈥 ')
/ = ra铆z del documento, salto entre nodos.
// = Saltro grande entre nodos que llega al 煤ltimo
text() = Textro entre los nodos
/鈥 = Todos los divs padres
@ = Acceder a los atritutos

Hola a todos, os dejo mis apuntes de esta clase, sin embargo, he creado un respositorio en github donde estan todos los apuntes de este curso: https://github.com/fer2002743/web-scraping

<h1>Expresiones en XPath</h1>

La primera expresion que vamos a utilizar es:

$x('/')
#en este caso en  concreto selecciono a todo el documento

$x('/html')
#En este caso solo selecciono el documento HTML

Con esta expresion podemos movernos de un sitio a otro de la pagina web. Pero que pasa cuando queremos acceder a un nodo en particular pero queremos evitar poner toda la ruta hasta alli??. Pues muy facil, escribimos dobre eslash y ponemos la ruta directamente:

$x('//h1')
#en este caso estoy seleccionando todos los nodos con la etiqueta h1

#ahora supongamos que quiero seleccionar el texto de ese nodo, para ello escribo:

$x('//h1/text()')

#por otro lado, si queremos seleccionar el nodo actual lo que hacemos es:

$x('//span/.')

#esto que acabamos de hacer es lo mismo que lo que habiamos hecho antes:

$x('//span')

#pero si queremos seleccionar a todos los nodos por encima del que nos encontramos escribimos:

$x('//span/..')

Finalmente, vamos a aprender a extraer atributos, lo cual hacemos con la siguiente expresion:

$x('//span/@class')

#con esta expresion extraemos todos los atributos de tipo class que hay en span. Cuando escribimos @ despues de un slash significa que vamos a extraer un atributo, y despues escribimos el 

Hola, aqui os dejo una expresion que hice para conseguir todas las quotes

<$x('//span/text()').map(x => x.wholeText)>

usando xpath en Javascript

$x('expresion de xpath')

/**
 * Ejemplos realizados en la pagina
 * https://quotes.toscrape.com/
*/

$x('/') // el documento principal meta, style, html ,script

$x('/html') // el documento html

$x('//') //salto entre nodos

$x('//h1/a/text()') // accediendo el texto del h1

$x('//h1/a/text()').map(x => x.wholeText) // opteniendo el texto en javascript

$x('//span')  // seleccionar todos los elementos span

$x('//span/.')  // '/.' es el nodo actual siendo esto igual a hacer '//span'

$x('//span/..') // accediendo a todos los elementos padres de un span

// accediendo a atributos
$x('//span/@class') // extrae todo el contenido de todos los elementos class que esten en un elemento span

/ Expresa relacion entre nodos padres e hijos
// Ingresa directamente a la etiqueta

Para obtener el texto del title, tambien se puede utilizar:

$x(鈥//h1/a/text()鈥)[0].data

$x('//h1/a/text()').map(x=> x.wholeText)```

interesante esta clase

Interesante

Bueno para acceder yo hice de la siguiente forma $x(鈥//h1鈥)[0].innerText , pero como dice el profesor utilizando map tambien funciona para cuando es uno o m谩s elementos h1 y <a href> dado que en resumen map funciona como un ciclo que recorre el arreglo.