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. 

 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

We already know that jQuery returns an augmented array of DOM objects as its results. In general. after finding the DOM objects you have been looking for you want to make some changes that result in the HTML page being modified.

You can do this by extracting the DOM objects from the array and working with DOM supplied methods or you can 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

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. 

In other words, for a DOM object you are safe to assume that it has all of the basic Element properties, but not any additional properties. 

As well as DOM Elements, there are also DOM Attribute objects. An Attribute Object is associated with a DOM Element and is 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. 

Some attributes are so commonly used that the DOM also 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 i.e. it 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 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. 

So to summarise:

• 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 think that this is confusing perhaps 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 then your code you simply set each of the properties to the same values as the corresponding attributes to reset the page. 

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.