In this tutorial:

• DOM Manipulation
• DOM Traversing

DOM Manipulation

Everything in a document is represented by a node in the DOM (Document Object Model). One of the benefits of jQuery is being able to change the DOM. DOM manipulation allows to:

• Create elements
• Insert elements or insert element content
• Remove elements
• Change elements properties and attributes
• Change styles and dimensions

There are several ways we can manipulate the DOM with jQuery. The main types are:

• Inside - Manipulate inside the element (see DOM Insertion, Inside)
• Outside - Manipulate outside the element (see DOM Insertion, Outside)
• Around - Manipulate around the element (see DOM Insertion, Around)
• Removal - Remove elements (see DOM Removal)
• Replacement - Replace elements (see DOM Replacement)

For the full list see DOM Manipulation.

DOM Traversing

Another way we can use jQuery with the DOM is through DOM traversal, or moving through the DOM. We have several different categories of traversal methods:

• Tree traversal - Up, sideways, down
• Filtering - Filter elements to manipulate
• Miscellaneous traversal

There are many methods. See jQuery documentation for details. In the following demos some of the methods are demonstrated.