Page 1 of 3
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.
Now Available as a Print Book:
You can buy it from:
USA and World Amazon.com
I The Core UI
- Understanding jQuery (Book Only)
- The DOM And Selectors
- CSS Selectors
- The jQuery Object (Book Only)
- Advanced Filters - Traversing The DOM
- Modifying DOM Objects
- Creating And Modifying The DOM
- jQuery Data
- Function Queues
- jQuery UI
- jQuery UI Custom Control - Widget Factory
- jQuery - Easy Plugins
- Getting Started With QUnit Testing
The companion volume will be available as a book very soon:
Just jQuery: Events, Async & Ajax
- Reinventing Events
- Working With Events (coming soon)
- Asynchronous Code (coming soon)
- Consuming Promises
- Using Promises (coming soon)
- Ajax the Basics - get
- Ajax the Basics - post
- Ajax - Advanced Ajax To The Server
- Ajax - Advanced Ajax To The Client
- Ajax - Advanced Ajax Transports And JSONP
- Ajax - Advanced Ajax The jsXHR Object
- Ajax - Advanced Ajax Character Coding And Encoding
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
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:
for (i = 0; i <attribs.length; i++)
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:
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.
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 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.