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.
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.
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.
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