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.

Team Members (Phamela, Gerald, Bonolo)

1. The HTML DOM is a standard for how to get, change, add, or delete HTML elements. It provides structure that Web Browsers use that web browsers use to understand and interact with web pages. It essentially creates a tree-like structure to understand and manipulate the HTML code.
2. It can be referenced by using the script tag which will reference the JavaScript document which will include methods to add, remove or modify elements, example being: const content = document.getElementById("content");
   content.innerHTML = "This is new content!", which by using the innerHTML method, will add new content to the HTML webpage and const unwantedElement = document.getElementById("remove-me"); unwantedElement.parentNode.removeChild(unwantedElement);
3. use cases: innerHTML When you want to completely replace the content of an element with new HTML structure, including tags and styles. textContent When you only need to get or set the plain text content of an element, without any HTML formatting.

Pumlani
Lethukuthula
Mpilo

The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects; that way, programming languages can interact with the page

The textContent property is used to get or set the text content of the specified node and its descendants. The innerHTML property is used to get or set the HTML content of an element.

DOM Events describes 3 phases of event propagation: Capturing phase – the event goes down to the element. Target phase – the event reached the target element. Bubbling phase – the event bubbles up from the element.

Event bubbling and capturing are two ways of event propagation in the HTML DOM API, when an event occurs in an element inside another element, and both elements have registered a handle for that event. The event propagation mode determines in which order the elements receive the event.
With bubbling, the event is first captured and handled by the innermost element and then propagated to outer elements.
With capturing, the event is first captured by the outermost element and propagated to the inner elements.

Frequent DOM manipulation can lead to performance issues. Each change can cause the browser to re-calculate element positions and re-render the page, a process known as reflow or layout thrashing.
-Don't ask for computed styles repeatedly, cache them into the variable. - Multiple reads/writes (like for the height property of an element)
-Minimize DOM depths
-Remove Complex Animations from the Flow

They provide essential tools and structures that streamline the process of building dynamic and interactive web applications.
-React simplifies state management in a way that vanilla JavaScript can't match out of the box. The ease with which you can pass data through your application using props or state management libraries (like Redux or Context API) is phenomenal.

Team members:
Nhlanhla Msibi
Tumelo Selepe Thinane
Nonhlanhla Mazibuko

1. DOM is a programming interface for web pages, it consists of the structures and contents of the web page. It represents the HTML elements using objects that programming languages can use to interact with the elements.
2. Java script is used to add and modify elements in the DOM using various methods. For example, we can use the createElement() method to point to some specific id or class in HTML.
3. innerText can be used to insert or remove HTML structures. textContent treats content as plain text and any HTML tags are ignored and displayed a just text.
4. Events are actions that happens in the browser which the browser can react to, for example an Event Listener when a user clicks a button to play a song. In event capturing, the event starts from the root elements all the way to the target element. while in bubbling, the event starts from the target element and goes up to the root elements.
5. Frequent DOM manipulation can trigger a series of complex processes that can slow down performance of web application. Best practices:
   -Offload animations and transitions to CSS rather than JavaScript
   -Avoid repeatedly querying layout properties in a loop or before making additional DOM changes.
6. A JavaScript framework library provides structure and utilities for developing JavaScript web applications. With vanilla JavaScript, developers directly manipulate the DOM using APIs, which can become cumbersome and error-prone for complex applications.

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.