If you write this path down, you get:
Posted: Sun Jan 19, 2025 10:16 am
As you can see, the code is a tree structure in which each element is marked in a certain way; our task is to indicate to the parser the path to the element we need.
We will consider further actions using the example of our database catalog at this address.
For further work we will need the developer tool cyprus telegram database built into the browser, in Chrome - context menu - view code, in Firefox - context menu - explore.
So, let's find the path to the product card name:
Right-click on the product name - a context menu will open, select - "view code" - found the desired element in the code. How can you determine the path to it? As in the case of the explorer, go down from the top category to the "desired folder". The top directory is "html", then "body", then several blocks "div", "ul", if at some level there are several blocks with the same name, then in square brackets we write which element in order we need:
This path can be checked in the same developer tool by pressing Ctrl+F and writing down the path:
You can check the path in the iDatica extension by clicking on the search icon:
If you click on the play icon in the extension, the program will show all the elements it found on the page along this path - in our case, these are all the names. If you click on the parsing button and save the result, you will parse all the names, congratulations - you have collected your first data!
What to do with other elements on the page? Same thing – write the path and get the data. You can get this path right in the developer tool – right-click on the desired element in the code, select – copy and select xpath:
You can get this path directly in the extension by clicking on the link icon and clicking on the desired element on the page.
Working with such long paths is not convenient and not all sites can get the path to all elements at once, in some cases it will have to be modified by studying the features of the site structure. But creating a path to data is much easier and faster. Here we need to get acquainted with the syntax of XPath.
Xpath Syntax
Relative path
Double slash // – means a relative path and allows you to find all variants of what you are looking for on the page. Thus – since we were looking for the final h2 element, the entry “//h2” will give the same result as the long path we wrote at the beginning:
We will consider further actions using the example of our database catalog at this address.
For further work we will need the developer tool cyprus telegram database built into the browser, in Chrome - context menu - view code, in Firefox - context menu - explore.
So, let's find the path to the product card name:
Right-click on the product name - a context menu will open, select - "view code" - found the desired element in the code. How can you determine the path to it? As in the case of the explorer, go down from the top category to the "desired folder". The top directory is "html", then "body", then several blocks "div", "ul", if at some level there are several blocks with the same name, then in square brackets we write which element in order we need:
This path can be checked in the same developer tool by pressing Ctrl+F and writing down the path:
You can check the path in the iDatica extension by clicking on the search icon:
If you click on the play icon in the extension, the program will show all the elements it found on the page along this path - in our case, these are all the names. If you click on the parsing button and save the result, you will parse all the names, congratulations - you have collected your first data!
What to do with other elements on the page? Same thing – write the path and get the data. You can get this path right in the developer tool – right-click on the desired element in the code, select – copy and select xpath:
You can get this path directly in the extension by clicking on the link icon and clicking on the desired element on the page.
Working with such long paths is not convenient and not all sites can get the path to all elements at once, in some cases it will have to be modified by studying the features of the site structure. But creating a path to data is much easier and faster. Here we need to get acquainted with the syntax of XPath.
Xpath Syntax
Relative path
Double slash // – means a relative path and allows you to find all variants of what you are looking for on the page. Thus – since we were looking for the final h2 element, the entry “//h2” will give the same result as the long path we wrote at the beginning: