The Document Object Model (DOM)

Hey there! Since you are reading an article on the Document Object Model, I will be assuming you have a basic understanding of HTML, CSS and JS. Whether or not you do, I’ll be talking about those briefly. HTML, CSS and JS are the building blocks of the web. HyperText Markup Language HTML defines the structure of the webpage, Cascading Style Sheet dictates how the content of the webpage will appear and Javascript adds interactivity to the web page.

Think of HTML as a house, CSS is the interior decoration of the house and javascript is the lighting and plumbing of the house.

As earlier stated, javascript adds functionality to the webpage. Adding interactivity to a web page can be by changing content, manipulating style and so on. But how does javascript do this? This is where the DOM comes into play. Javascript needs a way to assess the contents of the web page as defined by HTML, the DOM provides this way.

The DOM creates a tree structure of the elements contained in the page and makes it available for use by Javascript. The dom is hierarchical.

The DOM can be navigated with different programming languages but of all js is the most common. Most browsers come with a built-in DOM viewer, in google chrome it is the element tab of the dev tools

The DOM is the main object of the web browser that represents all the web page content(tag) that was defined in the page.The html tag is the root object of most html document.

There are several uses of the DOM, they include:

Change content: : Update text, add new elements, or remove existing ones.

Style manipulation: Change the font size, color, background, and other visual aspects of the webpage.

Respond to user interaction: Add functionalities like buttons that trigger certain actions when clicked.

Structure of the DOM

The DOM represents a webpage as a tree, this is why it is commonly referred to as the DOM Tree. Every element in the webpage is represented as an object in the DOM. These objects have properties and methods that allow you to access and manipulate the content of the webpage.

NODE OBJECT

Every element in the DOM is a node. The tree has a root node which is the entire document itself, and branches with various elements like headings, paragraphs, images and the likes. Each of these elements is a node in the tree. Nodes are not necessarily elements; they can be attributes, text or anything at all.

The node object comes with different properties that can be used to access elements in the DOM. They include:

node.childNodes - returns a nodelist containing all the child nodes of the selected node

node.firstChild - returns the first child of the selected node

node.lastChild - returns the last child of the selected node

node.parentNode - returns the parent node of the specified node

node.nextSibling - returns the node that comes directly after the specified node in their parent nodelist

node.previousSibling - returns the node that comes directly before the specified node in their parent nodelist

node.hasChildNodes - a method. Returns true or false indicating whether the selected node has any child nodes