JQuery DOM

JQUERY: DOM

Lesson Goals

Lesson

Goals

Video Lecture

Video

Lecture

Sample Code

Sample

Code

Lecture Slides

Lecture

Slides

Practice Problems

Practice

Problems

Files & Links

Files &

Links

Problems of the Past

Both Netscape and Microsoft recognized the need for creating layers that could be altered while the page was being viewed. However, as is often the case, the companies implemented this concept differently forcing designers to ‘browser sniff’ and create multiple versions of their sites to be compatible with each browser. In recent years, the W3C has been working to create a set of commands that allow programmers to design interactive pages that are cross-browser compatible without the need for browser sniffing.

The W3C and the DOM

Starting with Netscape Navigator 6 and Internet Explorer 5, both browser companies have become compliant with a standard way of accessing elements in a web page. This implementation was designed by the W3C and is based on the basic structure of the page. This structure is called the DOM, Document Object Model, and is a tree representation of an HTML document.The tree structure is based on parents, children and siblings. This allows javascript to enter, access and modify an HTML document on the fly. Look at the following HTML code and the "tree" view that Javascript forms.

In the DOM, each element on the tree is called a node. These nodes take on a family style relationship. A node above an element on the same path of the tree is called a parent. Nodes below an element on the same path are called children. To elements at the same level with the same parent are called siblings.

The parent of all elements is the html tag. Its children are the header and the body. Since they are at the same level, the head and body tags are called siblings. They each have a child: title is the child of head and p is the child of body. And, each of those children have children. By navigating our way through the dom, we can alter text, style properties, and add, deleter or modify nodes.

Accessing the DOM

We have seen how to access the DOM using JQuery already. We use the standard JQuery selector symbol ($) followed by a selection in the document :id('#id), class('.class'), tag('tag'), document(document) and self reference (this). Once we have entered the DOM, we often find ourselves needing to navigate our way through it, especially once we have added nodes or want to delete nodes. Below, you will find some methods and attributes that help in this process:

children() returns a reference to all of the children of the selected element. This method can also take an optional filter parameter to only select child nodes with a certain value (class, id, tag, etc).
siblings() returns a reference to all of the siblings of the selected element. This method can also take an optional filter paramter.
parent() returns a refrence to the current nodes direct parent.
find(selector) finds all decendants of the current element that match a given selector
first() returns the first occurance of the selected elements
last() returns the last occurance of the selected elements
next() returns the next sibling of the seleted element
prev() returns the previous sibling of the selected element

Accessing the DOM

Once we have navigated our way through the DOM to a certain node, we can use javascript to alter the structure of our HTML document. This includes the ability to create and add new elements, replace existing elements, remove elements, alter attributes, etc. We have previously seen how to alter the innerHTML, css and attribute values using JQuery. Here we focus on the addition/deletion of elements within the DOM. With the exception of removing an element, we need to first learn how to create an HTML element that we can use as a node. The following example shows how to create an H1 element that is centered and displays the text "this is a header."

Method 1 - HTML

var node1 = "<h1 style='text-align:center'>this is a header</h1>";

Method 2 - JQuery

var node2 = $("<h1></h1>").text("this is a header.");
node2.css('text-align', 'center');

At this point, the new node is now ready to be inserted, appended or replaced into the current document structure. To do so, we use one of the following methods:

append(node) - adds the node to the end of the selected elements content (eg. finds innerHTML of element and adds to end)
prepend(node) - adds the node to the beginning of the selected elements content
after(node) - adds the node after the selected element
before(node) - adds the node before the selected element
remove() - removes the selected element(s). Takes an optional paramter to filter the nodes to be removed
empty() - removes all child elements of the selected node.