|Just jQuery The Core UI - The DOM|
|Written by Ian Elliot|
|Thursday, 05 May 2022|
Page 1 of 3
This is an extract from my book Just jQuery The Core UI.
Available as a Book:
buy from Amazon
buy from Amazon
In general there is a one-to-one correspondence between the HTML tags and DOM. That is, for each tag like <Button> or <div> there is a DOM object. Also each DOM object has properties corresponding to the attributes of the tags and some additional properties that only make sense in a programming environment.
The association between the DOM and the UI displayed to the user is live. That is, if you change DOM objects then the UI will change in response.
As the tags or elements on the page are nested one inside another the DOM naturally has a tree-like structure and often trying to find a DOM object is a matter of moving through the tree from one object to another. jQuery makes this easy. Often, however, the real solution is to make the UI objects easier to find by modifying the HTML in the first place.
Don't get carried away by what jQuery can do when there are simpler solutions.
Nodes and Elements
Now we need to look at the DOM in a little more detail. So far we have only considered how the HTML tags are represented but a web page also consists of text and comments. The DOM is a hierarchy of nodes that represents how the page is structured.
Each node is one of:
There is also the document node which is the root or starting point of the DOM hierarchy.
Each element node is an object that includes all of the basic properties and methods of the Element object plus any properties and methods that are needed to make it work. For example, a Button object has a type property which is either submit, button or reset.
That is there are a common set of properties and methods that all node element objects support and there are additional ones for particular types of node.
The nodes in the DOM are organized in the same way as the HTML elements are nested on the page. For example, consider the following simple HTML:
<html> <head> <title>TODO supply a title</title> </head> <body> <div>TODO write content</div> </body> </html>
The DOM that corresponds to it would be:
You can see that document is the top of the hierarchy and it has one element below it – the html element – which in turn has two elements below it – the head and body elements.
It is helpful to know some jargon used in describing the DOM hierarchy. The top-most node, i.e. document, is called the root. All of the nodes below or contained in a node are child nodes and the node that contains them is the parent node. In the diagram below, html is the parent node and head, body, title and div are the child nodes. The text nodes have been removed for simplicity.
|Last Updated ( Friday, 27 May 2022 )|