DOM Manipulation with JavaScript

Photo by Christopher Gower on Unsplash

Have you heard that our JavaScript has an ability to access and change all the elements of a HTML document or the data inside a web page can be updated with no refreshing. Or else if you are finding a way to implement logic into your HTML and render a dynamic content, you are in the right place.

I am going to go through one by one and DOM is the person who is going to support me.

Get to know about Web Browser

Let’s have an overview of a web browser before going to DOM.

Image by the author
  • The Navigator represents the state and the identity of the browser and is represented by the Navigator object in JavaScript. It consists information about operating system, software vendor and software information.

What is the DOM?

According to W3C (World Wide Web Consortium) standard, Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.

The W3C DOM standard has the following different parts according to their consortium:

  • Core DOM — standard model for all document types

What is the HTML DOM?

The HTML DOM is a standard object model and object-oriented HTML document representation in a logical tree structure where each node contains an object representing a part of a document. It contains:

  • HTML elements as objects

The HTML DOM is a standard for how to get, change, add, or delete HTML elements. When a web page is loaded, the browser creates the web page’s Document Object Model.

The HTML DOM model is built as a tree of Objects as follows:

Image by the author

Let’s move to understand some few fundamentals about DOM.

  1. Document — It is the entire page where the document is loaded into the web browser.
<div id="parag">
<p id="para1">Here is myparagraph.</p>
<p id="para2">Here is my second paragraph.</p>
</div>

<script>
var para = document.createElement("p");
var node = document.createTextNode("Here is my new one.");
para.appendChild(node);

var element = document.getElementById("parag");
element.appendChild(para);
</script>

3. HTML DOM Methods — HTML DOM methods are actions you can perform on HTML Elements like add or delete HTML elements. A property is a value that you can get or set like changing the content of an HTML element.

<p id="parag"></p>
<script>
document.getElementById("parag").innerHTML = "Heyyy DOM!";
</script>

Here, getElementById is a method, whereas innerHTML is a property.

4. HTMLCollectionHTMLCollection object is returned by Method getElementsByTagName() . An HTMLCollection object is an array-like list (collection) of HTML elements..

<p>Hello DOM!</p>
<p id="parag"></p>
<script>
var myCollection = document.getElementsByTagName("p");
document.getElementById("parag").innerHTML =
"The innerHTML of the paragraph is: " +
mydomCollection[0].innerHTML;
</script>

The code above selects all of the <p> elements in the document and can be accessed via an index number for those elements in the collection.

Common DOM Manipulation Methods

Now I am going to show you how to use the document object to access and manipulate HTML.

Finding HTML Elements

  • document.getElementByID(id)Find an element by element id

Adding and Deleting Elements

  • document.createElement(element)Create an HTML element

Adding Events Handlers

  • document.getElementById(id).onclick=function(){code} Adding event handler code to an onclick event

To wrap up

The Document Object Model (DOM) is a platform that allows programs and scripts to access and update a document’s content, structure, and style dynamically. The Document Object Model is a specification for the portability of JavaScript scripts and Java programs between web browsers. So, lets meet again with another interesting topic in the time to come.

Until then Stay safe!

References:

https://www.w3.org/TR/WD-DOM/introduction.html

Undergraduate at University of Moratuwa

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store