The Document Object Model plays a dominant role for all the Web Developers out there, isn't it? Frequent manipulation of the DOM should be an art in the fingertips of the developers. But why is DOM manipulation becoming a key minister in the court of Web developers?
The browsers use the Object Model to structure the web pages logically, which in turn contribute to the elements of HTML on the screen. In simple words, DOM is a structural representation of the objects that are subjected to changes (both in content and structure) on the web. So DOM is nothing but the lord of the objects in your web pages.
Why JavaScript?
As a developer, you might be aware of the fact that jQuery is a reliable source for the selection of elements. Though an undeniable fact, how do we consider it as the answer for the changing elements or styling elements or even creating elements on the web page? JavaScript has the option for all the above modifications.
The browser while creating the representation of the documents of HTML and CSS known as the Document Object Model creates a provision that enables the JavaScript to seep in and make the required modifications and style of the website. So don't you think that JavaScript is quite capable to ease your work and lead you to a better result?
How do I manipulate DOM?
Manipulating DOM using JavaScript has a number of methods. But an efficient Programmer starts with finding out the element for manipulation.
- Finding an element isn't a herculean task if you can access the element with the following methods:
.querySelector(): This method stands in par with the first element matching either one or more CSS selectors.
Usage:
document.querySelector('#tagname')
The '#tagname' option picks the first '#tagname 'tag found in the HTML document
.getElementById(): If you require a single element by id then this method would be the right choice for your action.
Usage:
document.getElementById('#element')
Returns the first element that has the id of #element
.getElementsByClassName(): This methods aids in getting two or more objects resulting in an array of elements.
Usage:
document.getElementByClassName('element')
Returns the array
.querySelectorAll(): It is similar to the .querySelector() method. This methods selects all the tags desired by the programmer.
Usage:
document.querySelectorAll('elementtag')
Return all the element tags of the document
- Creating and deleting elements would be another efficient call which can be done through the following methods:
.createElement(): Taking a tag name as input, this method creates a new element.
Usage:
document.createElement(‘tagname’)
creates a new element which can be accessed with the tag name given here
.removeChild(): This method deletes the specific child element.
Usage:
ele.removeChild(childEle)- Appending a new child element to the previously existing element or a newly created element can be done by
.appendChild()
Usage:
ele.appendChild(childEle)
- If you are interested in styling, try out the following command:
document.getElementById(id).style.property = new style
- Replacing an element doesn't take much effort if the following method is executed.
x1.parentNode.replaceChild(x2, x1)
newDiv is the new child to be replaced while the div is the existing child that is to be replaced
- Handling events is also another provision given to JavaScript by DOM.
.addEventListener(): Assigning event listeners to your HTML elements can be done using this method.
Usage:
document.getElementById(“btn”).addEventListener(event,ele)
- HTML code can have its events defined by using the attributes on tags.
Example:
<h1 onclick=”this.innerHTML = ‘Good to see you!!’”>Hello!!</h1>
After clicking on the 'Hello!' button, you can comfort your user with the former message on the click of a mouseDOM manipulation has always been an interesting topic for all the developers, be it the students or the professional web developers. jQuery isn't a requirement for the DOM manipulation but is agreeably a good choice though JavaScript to can be considered for simplification of complex manipulation tasks.
Key Takeaways
Follow our community for more goodies, stickers,
t-shirts
Top comments (2)
This is a good explanation of adding nodes to the DOM. I had to learn this when I built my app for the #dohackathon. My app needed to expand the DOM (insert nodes) to display info when the user selects a choice in the dropdown boxes. It had to do it dynamically depending upon what the user chose so I needed this functionality. If you get a chance, check out my app and let me know what you think. Thanks for writing this one up.
I enjoyed reading the article. Thanks for sharing the knowledge.