Best of DOM — 2024

1. 1
   Article

   Community Picks·2y

   New alternatives to innerHTML

   New alternatives to innerHTML have been implemented in browsers. The setHTML function is a safe method that does not execute script, while setHTMLUnsafe is an unsafe method that poses a risk of XSS attacks. The Sanitizer API helps put the naming of setHTMLUnsafe in context. The setHTMLUnsafe function is useful for declarative shadow DOM. The getHTML function allows users to retrieve HTML content, with the ability to serialize shadow DOM.

   176

   3
2. 2
   Article

   Community Picks·2y

   JavaScript DOM Mastery: Top Interview Questions Explained

   Mastering the Document Object Model (DOM) is crucial for any JavaScript developer, especially during technical interviews. This guide covers key DOM-related questions like selecting elements by ID, using querySelector and querySelectorAll, adding and removing elements, event delegation, and more. It explains critical concepts such as the differences between innerHTML and textContent and how to dynamically change an element's style using JavaScript.

   141

   5
3. 3
   Article

   AWS Tip·2y

   VanillaJS: You Might Not Need A Library

   Learn about Vanilla JavaScript, the basics of DOM selection, converting a NodeList to an array, using fetch to get information from the internet, defining a router in JavaScript, working with Shadow DOM, HTML templates, and template literals, and using proxies for reactive programming.

   108

   7
4. 4
   Article

   freeCodeCamp·2y

   Virtual DOM vs Shadow DOM – What's the Difference?

   Virtual DOM and Shadow DOM serve different purposes in web development. Virtual DOM optimizes performance by minimizing DOM manipulations, while Shadow DOM encapsulates the style and behavior of web components.

   56

   6
5. 5
   Article

   Community Picks·2y

   Easiest Explanation of DOM, Even a 6 year old can understand

   Explanation of DOM, a tree-like structure that represents the HTML document and allows JavaScript to interact with web pages.

   53
6. 6
   Article

   freeCodeCamp·2y

   Understanding DOM Events and JavaScript Event Listeners

   Learn how to listen and respond to DOM events using JavaScript. Understand the difference between the addEventListener() method and the on[eventname] HTML attributes. Explore common DOM events and how to remove event listeners.

   52
7. 7
   Article

   Community Picks·2y

   Applying tree traversal algorithms to DOM

   Learn how to apply tree traversal algorithms, specifically pre-order traversal, to navigate the Document Object Model (DOM). The post illustrates how to create functions like locateById and locateAllByClassName without using built-in APIs, and explores memoization for optimizing repeated queries. It also delves into implementing custom querySelector and querySelectorAll functions and demonstrates how to clone a DOM tree using recursive traversal.

   51

   1
8. 8
   Article

   freeCodeCamp·2y

   What is the Document Object Model? DOM for Beginners

   Explanation of how HTML, CSS, and JavaScript work together in web development. Introduction to the DOM and how it enables JavaScript to manipulate web pages.

   47

   1
9. 9
   Article

   Frontend Masters·2y

   Patterns for Memory Efficient DOM Manipulation – Frontend Masters Boost

   The post delves into best practices for memory-efficient DOM manipulation using vanilla JavaScript. It emphasizes performance benefits of manual DOM handling over frameworks, offering practical tips like using textContent over innerText, insertAdjacentHTML over innerHTML, and the importance of cleaning up memory references with WeakMap and WeakRef. It also highlights methods for profiling and debugging to ensure optimal performance.

   44

   1