Master SEO vocabulary with all essential terms and meanings here.

What is DOM? Definition, Properties, and How It Works

Last updated: Sep 20, 2022

https://cmlabs.co/en-au/seo-terms/dom-in-javascript

Link copied!

What is DOM in Javascript?

Document Object Model or DOM in Javascript is an interface that allows developers to change the content, appearance, and structure of a website.

The basic structure of a website is composed of static HTML and CSS code. In order for the website to appear more dynamic, the Javascript programming language is needed. Dynamic JavaScript differs from static HTML and CSS which make them unable to communicate with each other.

As a result, the DOM was created as a link to connect Javascript with HTML and CSS. The role of the DOM is to allow Javascript to access and modify all static elements on a web page.

The Importance of Using DOM

DOM in Javascript is very important to use in making a website. As explained earlier, Javascript can not understand HTML documents directly. Therefore, DOM plays a role in representing the same HTML document but with different formats using objects.

As an example, Javascript can not understand the <h1>H1</h1> tag format in HTML files, but it can understand H1 objects in the DOM.

DOM Properties

After understanding what DOM is and the importance of using DOM in creating a website, then you also need to know what DOM properties are.

The properties in the DOM are used to access and modify HTML documents. To give you a better understanding, here are the properties in the DOM:

Window Object - the object in the browser that is at the top of the hierarchy. This object is automatically created by the browser and is used to access all properties in the browser.
Document Object - an HTML document that has been loaded into the window. This object has several properties related to other objects. With this object, the content on the website can be accessed as well as modified. If you want to access an element in HTML, the property you have to access is the document object.
Link Object - a DOM property that represents the link tags in an HTML document.
Anchor Object - a DOM property that represents a href tag in an HTML document.
Form Object - a DOM property that represents form tags in HTML documents.
Form Control Elements - DOM properties used to set elements on a form such as text fields, buttons, checkboxes, and so on.

How DOM Works

The way DOM in Javascript works is by manipulating web pages so that they are more dynamic by retrieving, changing, adding, or removing HTML elements. In addition to performing manipulation, DOM can also collect data, functions, and attributes belonging to the elements that are accessed.

The following are some examples of using the DOM in accessing and manipulating HTML documents on a website:

How to Fetch HTML Elements

There are several ways to get HTML elements with the DOM:

document.getElementByID(): The Javascript DOM fetches elements by ID.
document.getElementByTagName(): The Javascript DOM fetches elements by tag name, which means the DOM will fetch all elements that have that tag.
document.getElementByClassName(): The Javascript DOM fetches elements by class name, which means the DOM will retrieve all elements under that class.

How to Change HTML Elements

You can change the content, structure, and appearance of HTML elements by using the DOM in Javascript. Here is the method to do it:

element.innerHTML: Used to change the content of the HTML element.
element.attribute: Used to change the value of an attribute in an HTML element.
element.style.property: Used to change the style of HTML or CSS elements.

How to Add or Remove HTML Elements

document.createElement(element): Used to create a new HTML element.
document.removeChild(element): Used to remove HTML elements.
document.appendChild(element): Used to add HTML elements.
document.replaceChild(new, old): Used to replace the old HTML elements with the new ones.
document.write(text): writes and combines HTML and Javascript code into one line of code. This is one of the advantages of DOM in Javascript.