Table of Contents
Overview
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. |
Next
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
I like it
nice post