|jQuery 3 - Modifying DOM Objects|
|Written by Ian Elliot|
|Monday, 03 October 2016|
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.
Available as a Book:
buy from Amazon
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
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:
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:
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:
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 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 )|