JQuery DOM
Objectives
Practice
More Info.
Files

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:

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: