jQuery works with the DOM, Document Object Model, to target elements and selectors in the HTML for your web site for manipulation.


What is the DOM?

The DOM tree - used by jQuery

The Document Object Model, or DOM, is a model that jQuery uses to interact with HTML, XML and XHTML documents.

The structure of an HTML document is made up of a hierarchy of nested tags, <body>, <div>, <h1>, <p>, etc. The DOM is the way that jQuery accesses those tags. Each of these tags is a node and has an associated node type that can be used for targeting manipulation. These nodes may have one or more child nodes. 


Node Types

The top level is the <html> node, which is the ancestor to every node in the document. The <body> tag is a node, as is any <div>, <h1>, <p>, <img>, etc. tag.Each of these nodes will return an integer when node.nodeType is used. Among the variety of nodes are:

  • document node
  • element node
  • text node
  • comment node


Using jQuery to select DOM objects

When you want to target a particular object or you want to target all objects of a certain type, you must use the jQuery syntax for locating your object(s). This is a dollar sign, followed by sert of parentheses. The object designator is placed inside of quotation marks and placed inside the parentheses. You can place the DOM object name in the parentheses, use a class name, an id, or a combination to be as specific as you wish.

$("p") //this will select all <p> tags in the entire document

$("h1#site-title") //this will select ONLY the <h1 id="site-title"> element

$(".quotebox") //this will select all elements with the class="quotebox" designation