01. The Document Object Model
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.
What can you do with the DOM?
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.
HTML DOM Tree
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.
Node Types of a DOM Tree
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.
1) Document node
The document node is the root, and is the starting point of all elements. All other nodes start at the document node.
2) Element nodes
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 (<>).
3) Attribute nodes
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.
4) Text nodes
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.
Document properties and models
Here are a list of document properties. In order to call these, use the dot notation with the document object (eg. document.title).
title- Title of the document.
lastModified- Date at which document was last modified.
URL- URL of current document.
domain- The domain of the current document.
write()- Write text to the document.
getElementById()- Obtain the element by the id attribute.
querySelectAll()- List all elements that match a CSS selector query.
createElement()- Create a new element.
createTextNode()- Create a new text node.
Build modern and responsive webpages
The Modern Web
The 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 price
(30+ reviews) Aching back from coding all day?
Acupressure Mat & Pillow
Relieve your stress, back, neck and sciatic pain through 1,782 acupuncture points for immediate neck pain relief. Made for lower, upper and mid chronic back pain treatment, and improves circulation, sleep, digestion and quality of life.
$$ Check price(1,890+ reviews) Ad