Javascript HTML DOM

Javascript HTML DOM

With the help of Javascript you can add, delete or modify any HTML element, attributes, values and their contents easily.


DOM stands for Document Object Model it represents the complete HTML document that is displayed in the browser window.

Get HTML Elements

You can get HTML element through following ways


  • document.getElementById() it is used to find an element by its id

  • document.getElementsByTagName() it is used to find elements by tag name

  • document.getElementsByClassName() it is used to find elements by class name


Example of Get HTML Elements


document.getElementById("demo");



Change HTML Elements

You can change HTML element through following ways


  • element.innerHTML= it is used to change the inner HTML of an element

  • element.attribute= it is used to change the attribute of an HTML element

  • element.setAttribute(attribute,value) it is used to change the attribute of an HTML element


Example of Change HTML Elements


document.getElementById("demo").innerHTML="Hello Javascript";
document.getElementById("img1").src="demo.jpg";



Add or Delete HTML Elements

You can add or delete HTML element through following ways


  • document.createElement() it is used to create an HTML element.

  • document.removeChild() it is used to remove an HTML element.

  • document.appendChild() it is used to add an HTML element.

  • document.replaceChild() it is used to replace an HTML element.

  • document.write(text) it is used to write into the HTML output stream.

PreviousNext

Join Us With Our 21000+ Subscribers And Get Our Latest Tutorials Update Via Email