Search within TutorialsPark

Jquery DOM Navigation


Learn to use jQuery select a start point and then move elsewhere in the DOM.


jQuery DOM : Navigating the DOM

jQuery can be used to begin at a point in the DOM and then navigate to other nodes in the DOM, i.e using a selection as starting node and then creating another.

jQuery provides a set of methods which can be used to navigate Down the Hierarchy , Up the Hierarchy , Parents , Ancestors etc.


jQuery DOM : Navigating Down the Hierarchy

jQuery can be used to navigate down the DOM hierarchy, you can select childrens and descendants of the element contained within jQuery object.

Table : is() Method Argument Types

Selector Description
children() To select the children of all the elements in the jQuery Object.
children(selector) To select all of the elements that match the selector and that are children of the elements in the jQuery object
contents() To return true if the jQuery object contains at least one of the elements in the argument object.
find() To select the elements that match the selector and that are descendants of the elements in the jQuery Object.
find(selector) To Select the elements that match the selector and that are descendants of the elements in the jQuery object.
find(jQuery)
find(HTMLElement)
find(HTMLElement[])
To select the intersection between the children of the elements in the jQuery object and the argument object.

jQuery DOM : DOM Method children()

The jQuery Method children() is used to get children of each element in the set of matched elements, optionally filtered by a selector.

The children() method will select only elements that are immediate descendants of each element in the jQuery object.

Example: Navigating DOM using method children()

Give it a TRY! » Note: The method children() only searches the immediate level of elements.


DOM navigation using jQuery method contents()

The jQuery method contents() is used to check whether one or more elements in a jQuery object satisfies the test condition.

Example: DOM navigation using jQuery Method contents()

Give it a TRY! » Note:The content method is usually used with the element iframe.


Navigating the DOM using Method find()

The jQuery method find() can be used to select all descendant elements not just the immediate ones, filtered by a selector.

Example: Jquery navigating the DOM using find() Method

Give it a TRY! » Note:Using find() is expensive, because it searches every level of DOM to find a match.