XPath Axes

He encontrado este Cheat sheet que espero pueda ser útil: https://devhints.io/xpath

Azucar sintáctica: se refiere a los añadidos a la sintaxis de un lenguaje de programación diseñados para hacer algunas construcciones más fáciles de leer o expresar.
self::div -> se abrevia con . y se refiere al mismo nodo o div en este caso
child::div -> Trae los hijos del div
descendant::div -> Trae todos los nodos que están en niveles inferiores
descendant-or-self::div -> Trae la unión entre los descendientes y el mismo nodo div

RESUMEN: Xpath Axes

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

Un eje representa una relación entre el nodo actual. Es usado para localizar nodos relativos a el nodo en el DOM tree.

$x('/html/body/div/self::div')
$x('/html/body/div/descendant-or-self::div')

Para ver más: Axes

Antes de entrar a Platzi vi por mi cuenta el uso de BeautifulSoup para hacer web scrapping, luego de ver estos videos (que están muy buenos) se me vino a la mente cuál sería la ventaja de usar XPath, sobre BS, ya que XPath a mi parecer es un poco más complejo de usar.

Según pude averiguar en la web, varios programadores se inclinan hacía XPath por el tema de performance, es decir, ante volúmenes elevados de data puede tener un mejor desempeño que BS u otra librería para scrapping. Sin embargo, también indican que toma mucho menos tiempo programar un script en BeautifulSoup que en XPath, para un programador promedio.

Por lo visto, no hay un consenso general, o una métrica que considere diferentes dimensiones para elegir una u otra opción. Parece que muchas cosas en el mundo de la programación dependen de diferentes variables, y una herramienta puede resultar más útil que otra de acuerdo a casos específicos.

Si alguien tiene data, o ha podido indagar sobre esto, le agradecería que me deje un comentario ya que estoy por iniciar un proyecto personal referente a esto y quisiera iniciar de manera informada. Gracias y slds!

Les comparto este material para profundizar sobre las Xpath Axes

XPath Axes

Un eje representa una relación con el nodo de contexto (actual) y se utiliza para ubicar nodos en relación con ese nodo en el árbol.

![](

• ancestor: Selecciona todos los ancestros, como nodos padres, abuelos, etc.
• ancestor-or-self: Selecciona todos los ancestros, incluyendo el nodo mismo.
• attribute: Selecciona todos los atributos del nodo actual.
• child: Selecciona todos los hijos del nodo actual.
• descendant: Selecciona todos los descendientes, como hijos, nietos, etc. del nodo actual.
• descendant-or-self: Selecciona todos los descendientes, incluyendo el nodo mismo.
• following: Selecciona todo en el documento, que este después de la etiqueta de cierre del nodo.
• following-sibling: Selecciona todos los hermanos, después del nodo actual.
• namespace: Selecciona todos los nodos de nombre de espacio del nodo actual.
• parent: Selecciona todos los padres del nodo actual.
• preceding: Selecciona todos los nodos que aparecen antes del nodo actual del documento, excepto los ancestros, nodos de atributo y nodos de espacio de nombre.
• preceding-sibling: Selecciona todos los hermanos, antes del nodo actual.
• self: Selecciona el nodo actual.

Excelente curso, muy resumido y bien explicado los Xpath

$x('/html/body/div/descendant-or-self::div')

Cheatsheet

$x('/html/body/div/self::div') // referiendose al mismo nodo div actual

$x('/html/body/div/.') // sugar syntax del ejemplo anterior

$x('/html/body/div/child::div') // trae los hijos del nodo div


$x('/html/body/div/descendant::div') // trae todos los descendientes de este nodo

$x('/html/body/div/descendant-or-self::div') //  trae el nodo actual y todos sus descendientes

Soy el único al que le va medio lento los videos de este curso?? va como con lag 🤔

😉

Azucar Sintactica: Es una forma bonita que nos da un lenguaje para poder representar algo que es mucho mas largo.

Vaya, cada vez se complica mas, pero curiosamente se entiende

"Xpath Axes"
$x('/html/body/div/self::div')
$x('/html/body/div/child::div')
$x('/html/body/div/decendant::div')
$x('/html/body/div/decendant-or-self::div')```

Location Path Expression
A location path can be absolute or relative.

An absolute location path starts with a slash ( / ) and a relative location path does not. In both cases the location path consists of one or more steps, each separated by a slash:

An absolute location path:

/step/step/…

A relative location path:

step/step/…
Each step is evaluated against the nodes in the current node-set.

A step consists of:

an axis (defines the tree-relationship between the selected nodes and the current node)
a node-test (identifies a node within an axis)
zero or more predicates (to further refine the selected node-set)
The syntax for a location step is:

axisname::nodetest[predicate]
Examples
Example Result
child::book Selects all book nodes that are children of the current node
attribute::lang Selects the lang attribute of the current node
child:😗 Selects all element children of the current node
attribute:😗 Selects all attributes of the current node
child::text() Selects all text node children of the current node
child::node() Selects all children of the current node
descendant::book Selects all book descendants of the current node
ancestor::book Selects all book ancestors of the current node
ancestor-or-self::book Selects all book ancestors of the current node - and the current as well if it is a book node
child:😗/child::price Selects all price grandchildren of the current node

XPath Axes
An axis represents a relationship to the context (current) node, and is used to locate nodes relative to that node on the tree.

AxisName Result
ancestor Selects all ancestors (parent, grandparent, etc.) of the current node
ancestor-or-self Selects all ancestors (parent, grandparent, etc.) of the current node and the current node itself
attribute Selects all attributes of the current node
child Selects all children of the current node
descendant Selects all descendants (children, grandchildren, etc.) of the current node
descendant-or-self Selects all descendants (children, grandchildren, etc.) of the current node and the current node itself
following Selects everything in the document after the closing tag of the current node
following-sibling Selects all siblings after the current node
namespace Selects all namespace nodes of the current node
parent Selects the parent of the current node
preceding Selects all nodes that appear before the current node in the document, except ancestors, attribute nodes and namespace nodes
preceding-sibling Selects all siblings before the current node
self Selects the current node

$x('/html/body/div/self::div')
$x('/html/body/div/descendant-or-self::div'

Es posible hacer esto cuando en la página web hay montado un Powerbi?

https://chrome.google.com/webstore/detail/site-dom-tree/heflndjaabdpflafhdboiijhahgmffch?hl=es

Tengo una duda que espero me puedan resolver.
Facundo menciona que con la sintaxis punto punto me traer el nodo padre. En Xpath Axis para realizar eso es con parent , pero al momento de ralizar los mismo comandos parent::current_node no me trae el nodo padre.

![](

)

Por lo que entiendo esto solo funciona para nodos relacionados .

Para traer el nodo en si mismo se utiliza self, myself no existe…Nota mental para el examen.

Para los hijos es child, el children no existe…Nota mental para el examen.

HTML Tree Generator

Encontré esta extensión de Chrome que sirve para generar un arbol básico con los elementos del HTML

• Jerarquía

  

  • child

    para traer los hijos del nodo donde estamos

    $x('/html/body/div/child::div')
    
    entrega
    [div.row.header-box, div.row]
    

  • Descendant

    trae los nodos de los hijos y todos los de debajo

    $x('/html/body/div/descendant::div')
    
    entrega
    
    [<div class="row header-box">, <div class="col-md-8">, <div class="col-md-4">, <div class="row">, <div class="col-md-8">, <div class="quote">, <div class="tags">, <div class="quote">, <div class="tags">, <div class="quote">, …] (26) = $3
    

  • Descendant-or-self

    trae los nodos por debajo y al mismo nodo

    $x('/html/body/div/descendant-or-self::div')
    
    entrega 
    
    [<div class="container">, <div class="row header-box">, <div class="col-md-8">, <div class="col-md-4">, <div class="row">, <div class="col-md-8">, <div class="quote">, <div class="tags">, <div class="quote">, <div class="tags">, …] (27) = $4
    

Recursos:

Xpath cheatsheet

Las Path Axes son una forma de hacer un “Select” de los nodos que queremos obtener. Es como dar un click al nodo y luego arrastrar hasta donde queremos seleccionar los nodos que necesitamos ya sea hacia arriba o hacia abajo.

Self::div el equivalente a . (Sintactical Sugar)

child::div Hijos de un elemento

Axes
Traer los asendientes y desendientes de un nodo.
self::div
child::div
descendant::div
descendant-or-self::div

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

RESUMEN: XPath Axes

“termino de azúcar sintactica”: se refiere a los añadidos a la sintaxis de un lenguaje de programación diseñados para hacer algunas construcciones más fáciles de leer o expresar.

self::div ==> abreviado con . y se refiere al mismo nodo o div en tal caso
child::div ==> Trae los hijos del div
descendant::div :-> Trae todos los nodos que están en niveles inferiores
descendant-or-self::div ==> Trae la unión entre los descendientes y el mismo nodo div

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>XPath Axes</h1>

Para un nodo el su nodo padre es el que esta inmediatamente encima de el, sin embargo, todos sus antepasados son todos los nodos que estan por encima de el y que estan relacionados de manera directa. Por otro lado, los nodos hijos son aquellos nodos inmediatamente despues del nodo en el que nos encontramos. Sin embargo, todos los nodos descendientes son todos los nodos que se encuentran por debajo. Añado una imagen para que se haga mas facil entender todo lo que acabo de explicar:

<div align=“center”>
<img src=“https://static.platzi.com/media/user_upload/anchestors-cd09ebcf-160c-43dd-a7c5-e9c45b4140e2.jpg” width=“500”>
</div>

Por ejemplo supongamos que quiero traer el nodo en el cual me encuentro actualmente:

#asi es como lo habiamos hecho antes
$x('/HTML/body/div/.')

#sin embargo, la manera completa de hacerlo es:
$('/HTML/body/div/self::nombre del nodo en el que estomos')

#en XPath los dos puntos (::) significan lo mismo que el punto (.). A esto en XPath se le conoce como azucar sintactica, que es una manera mas bonita y corta de escribir algo mucho mas largo y enrrevesado


#si por ejemplo me quiero traer los nietos hago:

$x(''/HTML/body/div/child::nombre del nodo en el que estomos')


#Pero tambien me puedo traer a los nietos, es decir todos los nodos que estan en niveles inferiores:

$x('/HTML/body/div/descendant::nombre del nodo en el que estomos')

#Pero si me quiero traer a los descendientes del nodo y a el nodo en si mismo lo que hago es:

$x('/HTML/body/div/descendant-or-self::nombre del nodo en el que estomos')