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
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.
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
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