jQuery provides you with methods for working with the DOM in ways powerful enough to allow you to create custom controls that extend what you can incorporate into an HTML page.  But first we must look at how you can modify existing DOM objects.

This is an extract from my book Just jQuery The Core UI.

 Available as a Book:

buy from Amazon

1. Understanding jQuery
2. Basic jQuery CSS Selectors
      Extract: The DOM
3. More Selectors
      Extract: Basic Selectors
4. The JQuery Object
5. Filters 
6. DOM Traversal Filters 
7. Modifying DOM Objects
      Extract: Modifying The DOM 
8. Creating Objects & Modifying The DOM Hierarchy
   
9. Working With Data
      Extract: Data ***NEW!!!
10. Forms 
11. Function Queues
12. Animation 
13. jQuery UI
14. jQuery UI Custom Control
15. Easy Plugins 
16. Testing With QUnit
17. Epilog A Bonus Function

Also Available:

buy from Amazon

Finding a DOM object using selectors and filters is usually just the first step. Once you have found what you are looking for, you generally want to modify it. In this chapter we look at the tools that jQuery gives you to change the DOM objects that you retrieve and in the next one we look at how to make changes to the DOM hierarchy by adding, removing and moving objects.

We already know that jQuery returns an array of DOM objects as its results and working directly with these via native DOM functions is one possible way to make changes to the objects. A better alternative is to use methods provided by jQuery to do the same job. In practice the jQuery methods are nearly always easier to use.

Before we start examining what jQuery provides we need to look at the way the DOM objects are derived from and relate to the HTML you might be more familiar with.

DOM Objects – Properties and Attributes

As explained in Chapter 2, when a browser renders an HTML page it also constructs the DOM (Document Object Model) which consists of JavaScript objects which represent all of the elements that make up the page organized into a hierarchy which corresponds to the way the tags are nested in the HTML page.

Thus the DOM is a hierarchy of DOM Element objects or, more accurately, objects derived from the Element object. 

The basic DOM Element object has all of the basic properties shared by all DOM objects. A specific DOM object derived from Element will, in general, have additional properties specific to it.

For example, the DOM object corresponding to a div has just the basic Element object properties, but the Button DOM object has some properties specific only to it, type, for example, gets and sets its input type. 

As well as DOM Elements, there are also DOM Attribute objects which are associated with DOM Elements and form part of the list or map of Attributes.

When you use a tag like:

<div id="myDIV" class="myClass">

then when the browser renders it, a new DOM div object is created and two attribute objects are added to the div object's attributes property for id and class. The attributes property forms a name value array of the attributes defined in the HTML tag. So in this case the div object has an attributes property which is a list of two elements:

For example:

var attribs=$("div")[0].attributes;
for (i = 0; i <attribs.length; i++) { 
 console.log(attribs[i].name);
 console.log(attribs[i].value);
}

This uses jQuery to find the div object in question, extract it from the results as a DOM object and stores its attributes array in attribs. It then scans through the attributes array displaying the name and value of each one. In this case you would see:

id 
myDIV
class 
myClass 

Notice that only the attributes that you define in the tag are added to the attributes map – unused attributes aren't represented in the map. In other words, the attributes map doesn’t contain entries for all of the possible attributes that can be defined on a tag.

Some attributes are so commonly used that the browser creates properties that correspond to them and uses the corresponding attribute to initialize them. For example, there is an id property as well as an id attribute. The id property simply has the same value as the id attribute and is set to the attribute when the page is loaded. If you write to the id property using JavaScript then this also changes the attribute and vice versa, but this connection is not always the case. The situation with respect to attributes and properties is complicated and confusing.

The attributes that are stored in the attributes array do not change because of anything the user does – they reflect what was specified in the tag before the DOM object was created. However, some attributes correspond to values that can change as the user interacts with the page. 

For example, if you have:

<input id="myInput" type="text" value="Name:">

then id and type generally don't change, but value changes according to what the user types in.

To allow for this possibility the DOM creates a value property that stores the current data as opposed to the initial value. Now changing the value property in JavaScript has no effect on the value attribute – the two are logically different things. The value attribute is what the programmer specified within the tag and the value property is the current data that the user has entered. 

To add to the confusion in this case, there is also a defaultValue property which is a true reflection of the value attribute. 

To summarize:

• If you read the value attribute you get the value set in the tag.

• If you read the value property you get the current value entered by the user.

• If you read the defaultValue property you get the value attribute. 

If you find this confusing it might help to think of the attributes as representing the default values for the properties that the user can modify. Suppose, for example, there is a reset button on the page then to implement this in your code you simply set each of the properties to the same values as the corresponding attributes. 

Notice that you can change attributes and properties in code, but the user can only change properties. Also notice that writing to a property doesn't always change the corresponding attribute. The distinction seems to be based on whether or not the attribute can usefully be regarded as a default value for the property beyond its first initialization. Finally, some properties have restrictions on what you can set them to. For example the type property can only be set to one of the valid types e.g. button, checkbox, color etc.