{"id":28805,"date":"2024-04-13T09:59:54","date_gmt":"2024-04-13T08:59:54","guid":{"rendered":"https:\/\/nelkodev.com\/blog\/domina-la-manipulacion-del-dom-con-javascript-puro\/"},"modified":"2024-06-03T17:42:38","modified_gmt":"2024-06-03T16:42:38","slug":"domina-la-manipulacion-del-dom-con-javascript-puro","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/blog\/master-dom-manipulation-with-pure-javascript\/","title":{"rendered":"Master DOM Manipulation with Pure JavaScript"},"content":{"rendered":"<p>The Document Object Model or DOM is a platform and language-neutral programming interface that allows dynamic programs and scripts to access and update the content, structure and style of documents. JavaScript, being one of the pillars of the modern web, provides a robust collection of tools to interact with the DOM effectively. This article is designed to explore both basic and advanced DOM manipulation techniques with pure JavaScript, offering a practical and educational approach suitable for developers of all levels.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #ffffff;color:#ffffff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #ffffff;color:#ffffff\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-dom-manipulation-with-pure-javascript\/#Conceptos_Basicos_de_DOM_en_JavaScript\" >DOM Basics in JavaScript<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-dom-manipulation-with-pure-javascript\/#%C2%BFQue_es_el_DOM\" >What is the DOM?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-dom-manipulation-with-pure-javascript\/#Seleccionar_Elementos\" >Select Elements<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-dom-manipulation-with-pure-javascript\/#Modificar_Elementos\" >Modify Elements<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-dom-manipulation-with-pure-javascript\/#Crear_y_Eliminar_Elementos\" >Create and Delete Elements<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-dom-manipulation-with-pure-javascript\/#Tecnicas_Avanzadas_de_Manipulacion_del_DOM\" >Advanced DOM Manipulation Techniques<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-dom-manipulation-with-pure-javascript\/#Manipulacion_Eficiente_del_DOM\" >Efficient DOM Manipulation<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-dom-manipulation-with-pure-javascript\/#Eventos_y_Gestion_de_Eventos\" >Events and Event Management<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-dom-manipulation-with-pure-javascript\/#Trabajando_con_AJAX_y_Fetch_API\" >Working with AJAX and Fetch API<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-dom-manipulation-with-pure-javascript\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Conceptos_Basicos_de_DOM_en_JavaScript\"><\/span>DOM Basics in JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Before delving into advanced techniques, it is crucial to have a good understanding of the fundamentals of DOM manipulation with JavaScript.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFQue_es_el_DOM\"><\/span>What is the DOM?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The DOM is a representation of the HTML document as a tree of nodes. Each element, attribute and text in the document is represented as a node. Manipulating the DOM involves reading and modifying these nodes.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Seleccionar_Elementos\"><\/span>Select Elements<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>One of the fundamental aspects of DOM manipulation is element selection. JavaScript provides several functions to easily select elements:<\/p>\n<ul>\n<li><code>document.getElementById(&#039;id&#039;)<\/code>: Select an item by its ID.<\/li>\n<li><code>document.getElementsByTagName(&#039;tag&#039;)<\/code>: Returns a list of elements by their tag name.<\/li>\n<li><code>document.getElementsByClassName(&#039;class&#039;)<\/code>: Returns a list of elements by their class.<\/li>\n<li><code>document.querySelector(&#039;selector&#039;)<\/code>: Selects the first element that matches the CSS selector.<\/li>\n<li><code>document.querySelectorAll(&#039;selector&#039;)<\/code>: Returns all elements that match the CSS selector.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"Modificar_Elementos\"><\/span>Modify Elements<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Once you have an element selected, you can modify it in a variety of ways. Some basic methods include:<\/p>\n<ul>\n<li><code>element.textContent<\/code>: Sets or returns the text contained in an element.<\/li>\n<li><code>element.innerHTML<\/code>: Sets or retrieves HTML content.<\/li>\n<li><code>element.style<\/code>: Allows you to modify the CSS style of an element.<\/li>\n<li><code>element.setAttribute(&#039;attribute&#039;, &#039;value&#039;)<\/code>: Changes the value of an attribute.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"Crear_y_Eliminar_Elementos\"><\/span>Create and Delete Elements<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>JavaScript also allows you to create new elements and add them to the DOM, as well as remove existing elements:<\/p>\n<ul>\n<li><code>document.createElement(&#039;tag&#039;)<\/code>: Create a new item.<\/li>\n<li><code>parent.appendChild(child)<\/code>: Adds a child element to the parent element.<\/li>\n<li><code>element.removeChild(child)<\/code>: Removes a child element from the parent element.<\/li>\n<\/ul>\n<p>Through these basic methods, you can start interacting and modifying content dynamically in your web projects.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Tecnicas_Avanzadas_de_Manipulacion_del_DOM\"><\/span>Advanced DOM Manipulation Techniques<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>With a solid foundation in basic DOM manipulation, we can explore more advanced techniques that will allow us to create more dynamic and reactive web applications.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Manipulacion_Eficiente_del_DOM\"><\/span>Efficient DOM Manipulation<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Manipulating the DOM can be costly in terms of performance. Reducing the number of direct changes to the DOM is crucial:<\/p>\n<ul>\n<li><strong>Document Fragments<\/strong>: Use <code>document.createDocumentFragment()<\/code> to make multiple changes to the DOM off-screen before adding the fragment to the document tree.<\/li>\n<li><strong>Reflow and Repaint<\/strong>: Understanding these processes is vital. Reflow occurs when the layout of part of the DOM is altered, and Repaint occurs when visual styles that do not affect the layout are changed. Minimize reflows to improve performance.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"Eventos_y_Gestion_de_Eventos\"><\/span>Events and Event Management<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Events are actions or events that occur in the system you manage, such as clicks or keys pressed. Event management is a fundamental part of advanced DOM manipulation:<\/p>\n<ul>\n<li><strong>addEventListener<\/strong>: This method allows us to define what event we are waiting for and what action to perform. It makes it easy to manage multiple events without interfering with the HTML.<\/li>\n<li><strong>Event Delegation<\/strong>: Delegating events allows you to avoid adding multiple listeners to similar elements. For example, instead of adding an event listener to each button in a list, you can add one to just the parent element.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"Trabajando_con_AJAX_y_Fetch_API\"><\/span>Working with AJAX and Fetch API<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>AJAX (Asynchronous JavaScript and XML) and the Fetch API allow asynchronous HTTP requests to be made to the server. This means that you can update parts of a web page, without needing to reload the entire page:<\/p>\n<ul>\n<li><strong>XMLHttpRequest<\/strong>: Traditionally it has been used to make AJAX requests. However, it has a more complex and less intuitive syntax.<\/li>\n<li><strong>Fetch API<\/strong>: Offers a modern and powerful way to make requests. It is promise based, which simplifies handling asynchronous responses.<\/li>\n<\/ul>\n<pre><code class=\"&quot;language-javascript&quot;\">fetch(&#039;https:\/\/api.example.com\/data&#039;) .then(response =&gt; response.json()) .then(data =&gt; console.log(data)) .catch(error =&gt; console. error(&#039;Error:&#039;, error));<\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Mastering DOM manipulation with pure JavaScript is essential for any front-end developer who aspires to create interactive and dynamic interfaces. From the basics of selecting and modifying elements to advanced techniques such as efficient DOM management and event handling, JavaScript offers all the tools necessary to interact with web content in powerful and effective ways.<\/p>\n<p>To continue learning about web development and related topics, visit <a href=\"https:\/\/nelkodev.com\/en\/\">nelkodev.com<\/a> and for any questions or collaboration, do not hesitate to contact me at <a href=\"https:\/\/nelkodev.com\/en\/contact\/\">nelkodev.com\/contact<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>The Document Object Model or DOM is a platform- and language-neutral programming interface that allows dynamic programs and scripts to access and update the content, structure, and style of documents. JavaScript, being one of the pillars of the modern web, provides a robust collection of tools for interacting with documents.<\/p>","protected":false},"author":1,"featured_media":28806,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420,1939],"tags":[205,90,172,743,1473,2205,185,644,1008,1825],"class_list":["post-28805","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-pruebas-de-frontend","tag-blog","tag-con","tag-del","tag-dom","tag-domina","tag-frontend","tag-javascript","tag-manipulacion","tag-pruebas","tag-puro"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/28805","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/comments?post=28805"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/28805\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/28806"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=28805"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=28805"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=28805"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}