Using jQuery you can easily traverse down the DOM tree to find the descendants of an element.
The descendant is a child, grandchild, great-grandchild, and so on.
Traversing Down the DOM Tree:
Different methods are provided by jQuery to traverse down in the DOM tree either single or multiple levels to easily get the child or other descendants of an element in the hierarchy.
Following jQuery methods are used to traverse down the DOM tree:
- children()
- find()
jQuery children() Method:
The children() method of jQuery is used to get the direct children of the selected element. This children() method traverses only a single level down the DOM tree.
In the following example, the direct children of the <ul> element which is <li> will be highlighted by adding the class .highlight-child on document ready.
jQuery find() Method:
The find() method of jQuery is used to get the descendant elements of the selected element.
The find() and children() methods are similar the only difference is that the find() method search through multiple levels down the DOM tree to the last descendant, whereas the children() method only searches a single level down the DOM tree.
In the following example, a border will be added around all the <li> elements that are descendants of the <div> element.
If you want to get all the descendant elements then you can use the universal selector.