DOM discussion questions

dom.md

Dom discussion questions

1. What is the Document Object Model (DOM) and how does it represent an HTML document?
2. How can JavaScript be used to add, remove, or modify elements in the DOM? Provide examples of methods used for these operations.
3. Explain the difference between the innerHTML and textContent properties. When should each be used?
4. What are events in the context of the DOM, and how can they be used to interact with users? Discuss the concept of event bubbling and capturing.
5. Discuss the performance implications of frequent DOM manipulations. What are some best practices to minimize reflows and repaints?
6. How can modern JavaScript libraries and frameworks (like React, Angular, or Vue) help manage DOM manipulations? Compare their approaches with vanilla JavaScript.

Members - Konani, Simphiwe, Mpho

1. It is a programming interface/object that represents the page you see in the web browser and provides you with an API to interact with it. Web browser constructs the DOM when it loads an HTML document.

2. for creating: documenet.createElement('p'), for removing: node.remove(), for modifying: document.getElementByID('id');
   let h1 = getElementById
   h1.innnerHTML = ("content");
   classList.Add(className)

3. InnerHTML deals with making changes to the structure of the HTML, and textContent properties we use it when we want to change just the plain text without changing the structure of the HTML.

4. events are occurrences that trigger certain functionality and result in certain behaviour when a user is interacting with a page, for example, clicking on a button or hovering for something to happen. Event bubbling is the order of events and capturing is just handling events.

5. can lead to performance issues due to the costly operation of free flows and repaint(Each manipulation can trigger a reflow or repaint, consuming resources.) . Constant DOM updates can slow down page loading. solutions - use css transitions and animations , optimize css; css and layout.

6. Modern JavaScript libraries and frameworks like React, Angular, and Vue provide structured and efficient ways to manage DOM manipulations, significantly improving development experience compared to vanilla JavaScript. Here’s a comparison of their approaches: Manual DOM Manipulation: Developers manually select and update DOM elements using methods like document.getElementById, document.querySelector, innerHTML, textContent, and others.

Ntando
Ofentse
Angela

1. A programming interface for web documents, it represents HTML document as nodes and objects.
   2.avaScript interacts with the DOM to add, remove, or modify elements using methods like document.createElement() to create elements, element.removeChild() to remove elements, and element.setAttribute() to change attributes. For example, document.body.appendChild(newElement) adds a new element to the body, and element.remove() directly removes an element from the DOM.
   3.Textcontent handles plain text content while innerHTML handles HTML content, it is also interpreted by the data while the textcontent is not.
2. the events are responsive to user interaction such a mouse clicking, keyboard pressing, form submission. Event bubbling happens when an element receives an event and event bubbles up (transmitted) to parent elements till it reaches the root element. Capturing is when the click event of a parent element is triggered before the click event of a nested element, as events trickle down from the top of the DOM tree to the target element in a phase known as event capturing or trickling.
3. Frequent DOM manipulations can degrade performance due to costly reflows and repaints. To minimize this, batch DOM updates, use documentFragment, minimize layout thrashing by reading and writing to the DOM separately, and use CSS classes to apply multiple style changes at once.
4. Modern JS libraries and frameworks can help by providing advanced mechanisms to manage DOM manipulations reducing the performance impact of frequent updates. While vanilla JS requires manual management of DOM updates these frameworks automate this process making it easier to develop faster and responsive applications.