Some commonly used DOM methods and properties


The Document Object Model is essentially a collection of nodes arranged in a tree. You can compare this with the family tree. HTML page is a hierarchy. The Document Object Model (DOM) is a representation of the structure of your HTML page that you can interact with programmatically.

In this post, my intention is not to show you what you can do or how you may code in javascript. I just want to note down a few commonly used DOM Methods and properties.


DOM Methods

Selecting DOM Elements
getElementById Gets an individual element by its id
getElementsByClassName Gets all the elements that have the specified CSS class 
getElementsByTagName Gets all the elements that have the specified tag name or element name
querySelector Gets the first child element found that matches the provided CSS selector criteria
querySelectorAll Gets all the child elements that match the provided CSS selector criteriaAdding DOM Elements
Add new DOM Elements
createElement To create a new HTML element.
appendChild To add a new HTML element to the collection of child elements belonging to the calling container
insertBefore This method takes two parameters: the new element itself, and the node before which you want to append the new element.
Altering DOM Elements
replaceNode Replaces the current element with the specified element
replaceChild replaces a child node with a new node
Deleting DOM Elements
removeChild Removes a child node from the calling containerremoveNode, which takes one Boolean parameter. Setting the parameter as true tells the method to do a deep removal, which means that all children are also removed
remove To remove the node itself


Properties available on a DOM element

Property Description
childNodes A collection of all child nodes of the parent element
firstChild A reference to the very first child node in the list of child nodes of the parent node
lastChild A reference to the very last child node in the list of the child nodes of the parent node
hasChildNodes A useful property that returns true if the parent element has any child nodes at all. A good practice is to check this property before accessing other properties, such as firstChild or lastChild.


I believe every web developer should be familiar with the above methods and properteis; but thats not all To get the full list you can check w3school The HTML DOM Element Object You should play with these methods to understand behaviors and pitfalls of DOM methods and properties



2 thoughts on “Some commonly used DOM methods and properties”

I would like to hear your thoughts