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);
Top comments (0)