Header Ads

What is DOM in Javascript

There are two types of DOM, javascript html DOM and browser BOM (Browser Object Modal). In this tutorial, we will learn javascript html DOM.

what is dom in javascript

HTML DOM stand for Document Object Modal. Document is html file, object is the html tags and model is the layout of objects. When an html web page is loaded in the browser, browser reads html elements as body, div, p etc, it create a javascript object. In this way, js objects are created against all html elements. Than DOM is constructed as a tree of objects where each object is a tree node. Each object has property and method. DOM and javascript provide API.

dom tree

Advantage of this object modal is that javascript can create, change and remove html elements, html attributes, html events and CSS styles dynamically using DOM methods.


HTML DOM Methods

DOM methods are actions to be performed on HTML elements and DOM properties are the values of html elements need to be changed using DOM methods.

Now we will use few methods to access html element’s properties.

 

HTML File

It contains two major elements, head and body under html element (root element). All web page interface elements are written inside body element.

Create an html file as index.html. Write html tag h1 with id as heading

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
              content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 id="heading"></h1>
</body>
</html>

Now create a javascript file as index.js. Include it in index.html just before the body tag closing as below.

<body>
    <h1 id="heading"></h1>
    <script src='index.js' ></script>
</body>

Now using DOM method getElementByID, access and set innerHTML property and CSS style as.

var h = document.getElementById('heading')
h.innerHTML = 'This is heading'
h.style.color = 'red'

Now double click index.html file to load it in browser. Or best way is to install VS Code extension live Server. Now right click in index.html and and click on Open with Live Server. Html file will be loaded in browser. Right click in browser and hit inspect. Google developer tool will be opened where you can view html elements as below.
js code live server

Advantage of this extension is that any change in html or javascript code will be refreshed in browser in real time as soon as you save the file.

Most common way to access html element is by element id and to change content of element is by property innerHTML.

DOM document

Document is the parent of all objects. It is used to access any html element. 

Now we remove h1 element and a paragraph element dynamically. Dom method createElement is used to create paragraph element. Append this paragraph element with html body as below.

var h = document.getElementById('heading')
h.remove()

var p = document.createElement('p')
p.textContent = 'This is my first paragraph'
document.querySelector('body').appendChild(p)

Save file and view change in browser.

You can access all occurrences of any element by calling querySelectorAll method. Below line get all paragraph elements in this page.

document.querySelectorAll('p')

HTML Events and Event Handlers

To handle html event, we make a button in html file as.

<body>
    <h1 id="heading"></h1>
    <button type="button" id="add">Add</button>
    <script src='index.js' ></script>
</body>

In javascript file, add click event handler. When user click on button, a paragraph should be added.

var btnClick = document.getElementById('add')

btnClick.addEventListener('click',() => {
 var p = document.createElement('p')
 p.textContent = 'This is my first paragraph'
 document.querySelector('body').appendChild(p)
})

DOM Nodes

According to W3C, entire html page is document node and every html element is element node. Text inside html element is text node. Nodes have parent, child and sibling relationships. 
  • Document is the only root node
  • Every node except root, must have a parent node.
  • A node can have many child or sibling nodes.

Navigation between Nodes

Using following node properties, you can navigate between nodes.
  • parentNode
  • firstNode
  • lastNode
  • previousSibling
  • nextSibling

What is Web API

API stand for Application Programming Interface. It provides very easy functionalities of complex task to developers. Browser contains many built in APIs to perform complex tasks like Geolocation API provides coordinates of browser's location. Below example call geolocation API and show latitude and longitude of browser.

navigator.geolocation.getCurrentPosition((position=> {
    var lat = position.coords.latitude
    var lng = position.coords.longitude
    console.log('Latitue: '+lat)
    console.log('Longitude'+lng)
})

Third Party API

Third party API is not built in the browser. First download API code from web then you can use it. Examples of third party APIs are youtube API, facebook API etc.




Post a Comment

Previous Post Next Post

In Article Ads

In Article Ads 2