The Document Object Model (DOM) is a programming interface provided by the web browsers that allows scripts to update the content, structure, and style of a document. Manipulating the DOM is a crucial skill for any web developer since it allows for dynamic and interactive web applications. In this article, we will dive into the essentials of DOM manipulation using vanilla JavaScript, explore its methods, and discuss best practices with practical examples.<\/p>\n
The DOM represents the document as a tree structure where each node is an object representing a part of the document. A node can be an element, an attribute, or even text. For instance, an HTML document is represented as a hierarchy of nodes, where the document itself is the root node.<\/p>\n
Here’s a simple structure of a DOM:<\/p>\n
\ndocument\n \u2514\u2500\u2500 html\n \u251c\u2500\u2500 head\n \u2502 \u2514\u2500\u2500 title\n \u2514\u2500\u2500 body\n \u251c\u2500\u2500 h1\n \u251c\u2500\u2500 p\n \u2514\u2500\u2500 div\n<\/pre>\nAccessing DOM Elements<\/h2>\n
Before we can manipulate the DOM, we need to access its elements. There are several methods available in JavaScript to do this:<\/p>\n
1. getElementById<\/h3>\n
This method is used to select an element by its unique ID.<\/p>\n
\nconst header = document.getElementById('header');\n<\/pre>\n2. getElementsByClassName<\/h3>\n
This method returns a collection of elements with the specified class name.<\/p>\n
\nconst items = document.getElementsByClassName('item');\n<\/pre>\n3. getElementsByTagName<\/h3>\n
This method retrieves a live HTMLCollection of elements with the specified tag name.<\/p>\n
\nconst paragraphs = document.getElementsByTagName('p');\n<\/pre>\n4. querySelector<\/h3>\n
The
querySelector<\/code> method returns the first element that matches a specified CSS selector.<\/p>\n\nconst firstItem = document.querySelector('.item');\n<\/pre>\n5. querySelectorAll<\/h3>\n
This method returns all elements that match the specified CSS selector, in the form of a static NodeList.<\/p>\n
\nconst allItems = document.querySelectorAll('.item');\n<\/pre>\nModifying DOM Elements<\/h2>\n
Once you’ve successfully accessed an element, you can modify its attributes, styles, and content.<\/p>\n
Changing Text Content<\/h3>\n
The
textContent<\/code> property allows you to change the text within an element.<\/p>\n\nconst header = document.getElementById('header');\nheader.textContent = 'Welcome to My Website';\n<\/pre>\nChanging HTML Content<\/h3>\n
If you need to set HTML content inside an element, you can use the
innerHTML<\/code> property.<\/p>\n\nconst description = document.getElementById('description');\ndescription.innerHTML = 'This text is bold!<\/strong>';\n<\/pre>\nModifying Attributes<\/h3>\n
To manipulate an element’s attributes, such as
src<\/code> for images orhref<\/code> for links, use thesetAttribute<\/code> method.<\/p>\n\nconst image = document.getElementById('myImage');\nimage.setAttribute('src', 'newImage.jpg');\n<\/pre>\nChanging Styles<\/h3>\n
You can modify an element’s CSS styles directly through the
style<\/code> property.<\/p>\n\nconst button = document.getElementById('myButton');\nbutton.style.backgroundColor = 'blue';\nbutton.style.color = 'white';\n<\/pre>\nCreating and Removing DOM Elements<\/h2>\n
Dynamically creating new elements and removing existing ones is also a significant part of DOM manipulation.<\/p>\n
Creating Elements<\/h3>\n
The
createElement<\/code> method creates a new element, whileappendChild<\/code> adds it to the desired parent.<\/p>\n\nconst newDiv = document.createElement('div');\nnewDiv.textContent = 'This is a new div!';\ndocument.body.appendChild(newDiv);\n<\/pre>\nRemoving Elements<\/h3>\n
To remove an element, use the
removeChild<\/code> method on its parent node.<\/p>\n\nconst elementToRemove = document.getElementById('elementToRemove');\nelementToRemove.parentNode.removeChild(elementToRemove);\n<\/pre>\nEvent Handling<\/h2>\n
Event handling is another essential part of DOM manipulation, allowing you to respond to user interactions such as clicks, key presses, and form submissions.<\/p>\n
Adding Event Listeners<\/h3>\n
Use the
addEventListener<\/code> method to register an event listener for an element.<\/p>\n\nconst button = document.getElementById('myButton');\nbutton.addEventListener('click', function() {\n alert('Button clicked!');\n});\n<\/pre>\nRemoving Event Listeners<\/h3>\n
To prevent memory leaks, you can also remove event listeners using the
removeEventListener<\/code> method.<\/p>\n\nconst handleClick = function() {\n alert('Button clicked!');\n};\nbutton.addEventListener('click', handleClick);\n\/\/ Later on...\nbutton.removeEventListener('click', handleClick);\n<\/pre>\nBest Practices for DOM Manipulation<\/h2>\n
When manipulating the DOM, following best practices can lead to better performance and cleaner code.<\/p>\n
Minimize DOM Access<\/h3>\n
Accessing and manipulating the DOM can be slow, so cache your DOM queries instead of querying the same elements multiple times.<\/p>\n
\nconst list = document.getElementById('list');\n\/\/ Modify the list items\nfor (let i = 0; i < list.children.length; i++) {\n list.children[i].style.color = 'red';\n}\n<\/pre>\nBatch DOM Changes<\/h3>\n
Whenever possible, batch your changes to minimize layout thrashing. Hide the element, make all changes, then show it again.<\/p>\n
\nconst list = document.getElementById('list');\nlist.style.display = 'none';\n\/\/ Make changes\nlist.innerHTML = 'New Item<\/li>';\nlist.style.display = 'block';\n<\/pre>\n Use Document Fragments<\/h3>\n
When adding multiple elements, make use of a
DocumentFragment<\/code> for better performance.<\/p>\n\nconst fragment = document.createDocumentFragment();\nfor (let i = 0; i < 10; i++) {\n const newItem = document.createElement('li');\n newItem.textContent = `Item ${i + 1}`;\n fragment.appendChild(newItem);\n}\ndocument.getElementById('list').appendChild(fragment);\n<\/pre>\nConclusion<\/h2>\n
Mastering DOM manipulation with vanilla JavaScript empowers you to create dynamic, interactive web applications. Understanding various ways to access, modify, create, and remove DOM elements is crucial for web development. By applying the best practices mentioned in this article, you can optimize your code performance and enhance user experience.<\/p>\n
As you continue your journey into web development, let this article serve as a reference for your DOM manipulation needs. Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"
DOM Manipulation in Vanilla JavaScript The Document Object Model (DOM) is a programming interface provided by the web browsers that allows scripts to update the content, structure, and style of a document. Manipulating the DOM is a crucial skill for any web developer since it allows for dynamic and interactive web applications. In this article,<\/p>\n","protected":false},"author":77,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[172],"tags":[330],"class_list":["post-5746","post","type-post","status-publish","format-standard","category-javascript","tag-javascript"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/5746","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/users\/77"}],"replies":[{"embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/comments?post=5746"}],"version-history":[{"count":1,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/5746\/revisions"}],"predecessor-version":[{"id":5747,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/5746\/revisions\/5747"}],"wp:attachment":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/media?parent=5746"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/categories?post=5746"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/tags?post=5746"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}