XPathology
1. XPath Navigation
Welcome to Chapter 2! In this first lesson, we will start delving deeper into XPath notation to navigate HTML.2. Slashes and Brackets
As we briefly saw before, XPath directs us down one generation with a single forward slash, and down all future generations with a double forward slash. We also saw that using square brackets in the XPath expression helps narrow in on which element or elements we want, but it turns out these brackets aren't always necessary nor desired.3. To Bracket or not to Bracket
For example, the first XPath expression without brackets and the second with brackets lead us to the same element the body element since there is only one html element at the root level, and one body element which is a child of that html element.4. A Body of P
As another example, the XPath string here leads us to the single paragraph element which is one generation below the body element. Do you understand why there is only this one element selected? It's because there is only one paragraph element which is a child of the body element!5. The Birds and the Ps
On the other hand, if we consider the XPath string here, this directs us to both paragraph children of the div element. We haven't clarified a specific one. We could, of course, add in brackets to help narrow in on which element we want; in this case, we will be selecting the second paragraph child of the div element.6. Double Slashing the Brackets
Using a double forward-slash, we could have selected all paragraph elements which are within the HTML document. Adding the bracketed number 1, it turns out we select two elements! Let's take this opportunity to be very careful in describing exactly what adding the brackets filled with a number does. When we add the brackets filled with the number N, say, to the end of an XPath expression, each of the elements that are selected before adding the brackets asks: "Am I the Nth of my selected siblings?"; if the answer is "Yes!", then that element is selected. Here, with the brackets filled with the number 1, the top paragraph element is selected because it asks "Am I the first element of my selected siblings?" and answers "Yes!". The bottom paragraph element is also selected since its sibling is the div element, which was not not originally selected, and so when the bottom paragraph element asks "Am I the first element of my selected siblings?" the answer is again "Yes!". Honestly, I don't often mix double forward-slashes and brackets filled with numbers. We'll see in later slides there are other, more interesting ways to use brackets to select elements.7. The Wildcard
One final piece of notation we will cover in this lesson is the "wildcard" character, the asterisks. The asterisks indicates we want to ignore tag type. For example, in this expression, we are directed to both children of the body element, regardless that one is a div element and one is a paragraph element.8. Xposé
To summarize, we have learned the basics of XPath notation, including the meaning of single and double forward slashes, as well as some uses for the square brackets; and finally you saw the asterisks as the "wildcard" character. You will become more familiar with these ideas in the exercises!Create Your Free Account
or
By continuing, you accept our Terms of Use, our Privacy Policy and that your data is stored in the USA.