DEV Community

loading...

JavaScript HTML DOM

nss_sakib profile image Nazmus Sakib Updated on ・1 min read

HTML DOM

DOM Intro

Browser creates a Document Object Model when a web page be loaded. Using HTML DOM Javascript can access HTML elements.
HTML DOM Property is value of a HTML element & HTML DOM Method is addition or deletion of a HTML element.

Find HTML element using DOM

There are several ways to find a HTML element.
Find an element by element id - document.getElementById(id)
Find elements by tag name - document.getElementsByTagName(name)
Find elements by class name - document.getElementsByClassName(name)

HTML DOM Property

HTML DOM Property can be accessed like this.
Change the inner HTML of an element - element.innerHTML = 'new html content'
Change the attribute value of an HTML element - element.attribute = 'new value'
Change the style of an HTML element - element.style.property = 'new style'
Change the attribute value of an HTML element - element.setAttribute(attribute, value)

HTML DOM Method

There are several DOM Method, like-
Create an HTML element - document.createElement(element)
Remove an HTML element - document.removeChild(element)
Add an HTML element - document.appendChild(element)
Replace an HTML element - document.replaceChild(new, old)

HTML DOM Event

Event can be accessed both using & without using event listener.
Without using event listener - document.getElementById("myBtn").onclick = javascript;
Using event listener - document.getElementById("myBtn").addEventListener("click", javascript);

Discussion (0)

Forem Open with the Forem app