The Document Object Model (DOM) is a model that represents the HTML elements on a page. JavaScript can access these elements on the web page to manipulate and edit them.
The HTML DOM holds all elements as objects which you may call through properties, methods and events. With this, developers are able to change HTML attributes, elements, create HTML events, inject CSS styles, and more through JavaScript.
Additionally, the DOM and JavaScript, allows you to ask the browser about specific features on elements of the page, and tell it how to respond.
A good way to visualize the HTML DOM is through an inverted tree of elements, attributes, texts and other node types. At the root we have the document itself, which then branches off to the head and body elements.
Each part of this tree can be considered as an object. These objects contain methods that update, add, and change its various properties. Thus, we may think of the DOM as an Application Programming Interface (API) to our webpage.
As you can see from the tree above, nodes make up our tree. There are four main types of nodes - document, element, attribute and text nodes.
The document node is the root, and is the starting point of all elements. All other nodes start at the document node.
Element nodes are the HTML tags that act as the backbone to the page. When viewing a page's HTML source, this includes all HTML tags embedded within brackets (<>
).
HTML elements can have attributes. For example, in the <a href="http://google.com">Google</a>
element, the attribute is the href
value. Other common attributes include class
and id
, which can be changed to trigger new rules.
One important aspect of attribute nodes is that they are not children of the elements that contain them. If you look back at the diagram, notice that the attribute nodes are on the side of their elements, not below.
Text nodes are children of elements that contain text. Text nodes do not include other elements, so if there exists an element within another, it becomes a child of the parent element.
Here are a list of document properties. In order to call these, use the dot notation with the document object (eg. document.title
).
title
lastModified
URL
domain
write()
getElementById()
querySelectAll()
createElement()
createTextNode()
Stretch out your back and relieve your back muscles with inversion therapy. This device counteracts the forces of gravity on the body by decompressing and elongating the spine. By using this product just ten minutes a day, you can be well on your way to improved circulation and posture while relieving muscle aches, back pain and stress.
$$ Check priceThe Modern Web will guide you through the most important tools of device-agnostic web development, including HTML5, CSS3, and JavaScript. The plain-english explanations and practical examples emphasize the techniques, principles, and practices that you'll need to easily transcend individual browser quirks and stay relevant as these technologies are updated.
$ Check priceAd