If you want to access the immediate direct children of
a soup object or an HTML element, you can use the .children property.
The .children property returns the direct children of any
tag in the form of an iterator object.
Here is a list iterator that you can then iterate over using a for loop.
I'm iterating over all of the header tag's children and
printing out the child to screen here.
The direct child of the header tag is the title tag, as well as two new lines.
The entire HTML content of our web page is present in this html tag.
I access the direct children using .children,
and this returns a list iterator, which I can then iterate over using a for loop.
Here I'm using the for loop to print out the name of each child.
The header and the body tag are both children of the
top-level html tag along with a few new lines.
The .name property of the new line elements just return None,
and that's what you see here on screen.
The .children property on any Beautiful Soup element
returns just the direct children.
Let's see this.
I'm going to iterate over the children of the body tag,
and I'm going to print out the name of the immediate parent,
as well as the name of the child.
So child.parent .name and child.name.
The result here proves to me that the .children property only
gives me the direct children for any tag.
The direct children of the body tag in our HTML are a
few paragraph tags and an image tag.
But for any elements, the direct children may contain children of their own.
And they're the descendants of an element.
If you want to access all of the descendant elements,
you need to use the .descendants property.
The descendants of the header tag is just the title tag.
Here the header tag happens to have just one direct child.
But let's take a look at the descendants of the html tag.
So long as the child name is not equal to None,
I'm going to print out the child name to screen,
and you can see that the nested children are also available here.
Only head and body tags are the direct children of the html tag,
but observe that the nested descendants are also printed out here,
the children of the header tag, as well as the children of the body tag.
The .descendants property prints out the immediate children,
as well as the children of those children,
the children of those children,
all the way down to the leaf nodes of this HTML parse tree.
This becomes much clearer when you print out the name of the child,
as well as the name of the immediate parent.
So I'm going to iterate over all of the descendants of the html tag,
not just the direct children.
Observe that the immediate parent for many of these descendants is different.
For the header tag, the immediate parent is the html tag.
For the title tag, the immediate parent is the header tag.
For the body tag, the immediate parent is the html tag.
For this first paragraph element, the immediate parent is the body tag.
For the second b tag, the immediate parent is the paragraph tag.
In this way,
the .descendants property allows you to iterate over all of your
descendants nested within other children as well.
All of the Beautiful Soup tags support the .descendants property.
Here are the descendants of the body tag here,
and observe that the immediate parents are once again different.
You have the immediate children of the body tag,
you have children of the children, and so on.
Let's take a look at the html_tag variable.
This contains all of the HTML contents of our document.
We've spoken about the .string property earlier.
The .string only extracts the string contents of a
tag if there is exactly one string.
The html tag contains many nested elements within it.
There is no single string, which is why the .string property returns None.
If you want all of the strings that exist within the html tag,
you can use the .strings property,
and that will return a generator object that you can then iterate over.
Here is a for loop that I run to iterate over all of the
string contents that lie under my html tag.
All of the string contents nested within the outer
html tag are printed out to screen.
When you access the strings content of all of the nested
HTML elements using the .strings property,
the strings might contain unnecessary spaces.
If you want to access the strings stripped of all of their spaces,
you can use the stripped_strings property.
The .stripped_strings property returns a generator object,
which you can then use to iterate.
I'm going to iterate over all of the strings in stripped_strings.
This gives me every string under the top-level HTML object
but without the unnecessary white spaces.
If you want to navigate up the HTML parse tree,
you can use the .parent property.
Here is a header tag, and within that we have a title tag.
The parent of the title tag is the same header tag.
So you can access the .parent property to access the immediate parent of a tag.
The title tag has a single string element within it,
which you can access using .string.
The parent of that string is the title tag itself.
Remember that the .string property returns a NavigableString,
which supports all of the properties and functions
required to navigate this HTML parse tree.
The html_tag variable that we had set up contains
the HTML root of this document.
The parent of the html_tag is the BeautifulSoup object itself.
You can try and access the parent of the soup object, and it'll be None.
The BeautifulSoup object contains no parent.
I'm now going to use the soup.a property to access the
first anchor link within my HTML page, and I store it in the link_tag variable.
Now this anchor link is nested within other HTML elements in my page,
and if I want to access all of the parents of this anchor link,
that is, I want to navigate up the tree,
I can use the .parents property.
The .parents property for any tag moves up the HTML parse tree,
right up to the root of the document.
You can see that the immediate parent of the link is a p tag,
then comes the body tag, the parent of that is the html tag,
and, finally, we have the soup object that is the document.