jQuery 3 - Modifying DOM Objects
Written by Ian Elliot   
Monday, 03 October 2016
Article Index
jQuery 3 - Modifying DOM Objects
jQuery Functions for Attributes and Properties
Working with Content

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
Canada            Amazon.ca

UK                Amazon.co.uk
France            Amazon.fr
Germany           Amazon.de
Spain             Amazon.es
Italy             Amazon.it
India             Amazon.in
Japan             Amazon.jp

The Core UI

  1. Understanding jQuery (Book Only)
  2. The DOM And Selectors
  3. CSS Selectors
  4. The jQuery Object (Book Only)
  5. Filters
  6. Advanced Filters - Traversing The DOM
  7. Modifying DOM Objects
  8. Creating And Modifying The DOM
  9. jQuery Data
  10. Forms
  11. Function Queues
  12. Animation
  13. jQuery UI
  14. jQuery UI Custom Control - Widget Factory
  15. jQuery - Easy Plugins
  16. Getting Started With QUnit Testing

Now Available as a Print Book:


jquery2coverYou can buy it from:

USA and World   Amazon.com
Canada          Amazon.ca
UK              Amazon.co.uk
France          Amazon.fr
Germany         Amazon.de
Spain           Amazon.es
Italy           Amazon.it
India           Amazon.in


Events, Async & AJAX

  1. Events, Async & Ajax (Book Only)
  2. Reinventing Events
  3. Working With Events
  4. Asynchronous Code
  5. Consuming Promises
  6. Using Promises 
  7. WebWorkers
  8. Ajax the Basics - get
  9. Ajax the Basics -  post
  10. Ajax - Advanced Ajax To The Server
  11. Ajax - Advanced Ajax To The Client
  12. Ajax - Advanced Ajax Transports And JSONP
  13. Ajax - Advanced Ajax The jsXHR Object
  14. 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

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++) {

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.

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.






Last Updated ( Tuesday, 04 October 2016 )