In this blog, we’ll cover some of the theoretical concepts behind the DOM.
What is the DOM?
DOM stands for Document Object Model, it is a programming interface for web documents, this interface represents the page in a tree-like data structure. We can tap into this interface to change the document structure, style and content.
Understanding the tree data structure is one of the core pre-requisites to truly understanding the DOM.
Trees come up a lot in computer science. In addition to representing recursive structures such as HTML documents or programs, they are often used to maintain sorted sets of data because elements can usually be found or inserted more efficiently in a tree than in a flat array.
Typically trees can have different types of nodes. This is especially true for the DOM. Nodes for elements, which represent HTML tags, determine the structure of the document. These can have child nodes. An example of such a node is
document.body. Some of these children can be leaf nodes, such as pieces of text or comment nodes.
Each DOM node object has a
nodeType property, which contains a code (number) that identifies the type of node. Elements have code 1, which is also defined as the constant property
Node.ELEMENT_NODE. Text nodes, representing a section of text in the document, get code 3 (
Node.TEXT_NODE). Comments have code 8 (
Let’s examine the following basic client-server request scenario:
- When a user tries to access https://google.com.
- The client tries to resolve the domain name to an IP address by doing a DNS query.
- Once/If it gets a IP address, the client makes the request to the machine at the provided IP.
- The server will then return a simple HTML document.
The document returned is a written in a markup language, how does the browser know how to style and format the document as intended? This is where we make use of the DOM.
Imagine if the server returns the following HTML document to the client:
The browser won’t know how to render the different elements and enable user interactions to those elements. Hence HTML documents are represented in a tree like structure via the DOM interface. We can use this to create, change or remove elements from the DOM hence making our page more dynamic via events.
Each node in Document Object Model can be an HTML element, HTML attribute, plain texts, comments, new line characters and much more. As we saw in the diagram above:
- DOM tree starts from document node.
- All HTML elements have their separate nodes known as element nodes.
- Any text or tab character on a single line forms one text node. new line character is also a text node.
- HTML attribute is also a node knows as attribute node.
Functionality provided by the DOM interface:
- Ability to create, read, update or delete content from an HTML element.
- Enables us to dynamically inject elements into our HTML (create HTML elements).
- Delete HTML elements (or DOM nodes).
- Change CSS style of an HTML elements or their content.
- Respond to user interaction on HTML elements.
The DOM is organised like a tree, in which elements are arranged hierarchically according to the structure of the document. The objects representing elements have properties such as
childNodes, which can be used to navigate through this tree.
The way a document is displayed can be influenced by styling, both by attaching styles to nodes directly and defining rules that match certain nodes. There are many different style properties, such as
DOM manipulation is tough. There are lots of methods and techniques you need to master and it is not obvious which methods are best for each scenario.
WDS Dom Manipulation Exercises: https://www.youtube.com/watch?v=y17RuWkWdn8