Home » Tutorials » Learn Javascript » JavaScript HTML DOM Methods and Properties List

Learn Javascript

 Prev

JavaScript HTML DOM Methods and Properties List

The Document Object Model in HTML has a series of methods and properties given below which enable us to utilize the DOM to it’s full potential using JavaScript.

Note: We will not list all the methods and properties made available by the DOM for now, but just the most important and popular ones.

DOM methods and properties can be categorized into the type of actions they perform on the DOM. We have categorized them as follows:

  1. Find and Select elements.
  2. Change or Update elements.
  3. Add and Delete elements.
  4. Add and Change CSS styles of elements.
  5. Events and Event Listeners.
  6. DOM Traversal.

Learn basics of HTML DOM interaction in our 👉 JavaScript HTML Basic DOM Interaction lesson

Find and Select elements 🔎

These JavaScript DOM methods allow us to find and select specific HTML elements in the webpage. Some of the most used methods are as follows:

  • getElementById()
  • getElementsByName()
  • getElementsByClassName()
  • getElementsByTagName()
  • querySelector()
  • querySelectorAll()

Change or Update Elements ✏

These JavaScript DOM methods and properties allow us to change or update the HTML element itself or the content of that HTML element in the webpage. Some of the most used methods and properties are as follows:

  • innerHTML property.
  • innerText property.
  • element.attributes property.
  • element.getAttribute() method.
  • element.setAttribute() method.
  • element.removeAttribute() method.

Add and Delete Elements ✅

These JavaScript DOM methods allow us to add and delete HTML elements from the webpage. Some of the most used methods are as follows:

  • createElement()
  • element.appendChild()
  • element.remove()
  • element.removeChild()
  • document.write()

Add and Change CSS styles of elements 💅

These JavaScript DOM properties allow us to add and change CSS styles of the selected HTML elements from the webpage. Some of the most used properties are as follows:

  • style.property property.
  • className property.
  • classList property.

Events and Event Listeners 🎬

Events and Event Listeners are one of the most important and fascinating feature of the JavaScript DOM allowing us to make our webpage even more interactive. In our Events and Event Listeners lesson, we will discuss it further. We will:

  • List some of the most important and frequently used events.
  • Learn ways to create Event Listeners.

DOM Traversal 🗺

These JavaScript DOM properties allow us to travel through the DOM in an easier way. Some of the most used methods are as follows:

  • parentNode property.
  • firstChild property.
  • lastChild property.
  • childNodes property.
  • nextElementSibling property.
  • previousElementSibling property.

We have explained these further in our upcoming lessons. Hope to see you there.

Next