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
Responsive Typography
Responsive web design helps your site maintain its design integrity on a variety of screen sizes, but how does it affect your typography? With this practical book, graphic designers, web designers, and front-end developers alike will learn the nuts and bolts of how to get the best appearance from type without sacrificing performance on any device.
$ Check price
(3+ reviews) Aching back from coding all day?
Prism Glasses
Ever feel achy from sitting crunched up on your computer table? Try lying down with these optical glasses that allow you to work on your laptop while lying flat on your back. This is the perfect solution with those with limited mobility or those who wish to prevent neck cramps and back strains.
$ Check price
(128+ reviews) Ad