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.

Lentsoana Hophney.
Sakhile Motha.
Tshepho Mnguni.

1.The DOM is a way to represent the structure of an HTML document as a tree of objects, making it possible to programmatically access and manipulate the document's content, structure, and styles using JavaScript.
2.
Removing:
element.remove(): Removes the element from the DOM.

adding:
document.createElement(): Creates a new element.
element.appendChild(): Adds a new child element.

Modifying Elements:
element.textContent: Changes the text content of an element.
element.setAttribute(): Sets an attribute on an element.
3.
The innerHTML property contains HTML tags and content, making it suitable for inserting HTML structure, whereas the textContent property contains only text, without HTML tags, making it safer for plain text to avoid security risks like XSS. Use innerHTML when you need to insert or parse HTML, and use textContent when you need to insert or manipulate text safely.
4. When an event occurs on an element, it doesn't stay confined to that element alone. Instead, it undergoes a process called event propagation, which includes two phases: capturing (trickling down) and bubbling (bubbling up).
enabling interaction with users through event listeners attached to DOM elements. These events propagate through the DOM in two phases: capturing (trickling down) and bubbling (bubbling up). During capturing, the event travels from the root to the target element, while in bubbling, it moves from the target element up to the root. Developers can control this propagation using event.stopPropagation() to halt it or event.preventDefault() to prevent the default action associated with the event. Understanding these concepts allows for efficient event handling, such as delegating event listeners to parent elements to manage child elements' interactions.
5.
Frequent DOM manipulations can lead to performance issues due to costly reflows and repaints. To minimize these, batch changes using documentFragment, avoid layout thrashing by caching DOM values, and use CSS for animations instead of JavaScript. For example, use documentFragment to append multiple elements at once, cache element dimensions to prevent repeated queries, and prefer CSS animations for smoother performance. These practices help reduce the impact of DOM manipulations and improve overall efficiency.

6.libraries and frameworks streamline DOM management, while vanilla JavaScript offers more flexibility.
Modern frameworks like React, Angular, and Vue use virtual DOMs and reactive systems to optimize and batch updates, making DOM manipulations more efficient compared to manual handling with vanilla JavaScript.

BreakOut 9 - Siyabonga, Samuel, Emihle

Dom Discussion

1. The Dom is a programming interface for web documents it represents the structure of a document as a tree of objects, each object corresponds to the part of a ducment such as element attribute or piece of text. In the case of an HTML document, the Dom represents the document elements such as div, p, a, and their attributes such as id, class, href.

2. Adding Elements: document.createElement(tagName) creates a new element.
   Removing Elements: parentElement.removeChild(childElement) removes a specified child element from the parent.
   Modifying Elements: element.innerHTML changes the HTML inside an element. , element.textContent changes the text inside an element.

3.a) innerHTML - This property is used to get or set the HTML content of an element. It should be used when you want to include HTML tags within the content.
b) textContent properties. - This property is used to get or set the text content of the specified node and its descendants. It should be used when you want to change the text with no HTML tags. The textContent does not automatically encode and decode text and hence allows us to work with only the content part of the element

4. Events in the DOM are actions or occurrences that happen in the browser, such as clicks, form submissions, or keyboard inputs. JavaScript can react to these events to provide interactive functionality.
   Event Bubbling: Events propagate from the target element up to the root.
   Event Capturing: Events propagate from the root down to the target element.

5. Performance Implications of DOM Manipulations
   Frequent DOM manipulations can lead to performance issues due to reflows and repaints:
   Reflow: Recalculating the layout of the document.
   Repaint: Redrawing the elements on the screen.
   Best Practices to Minimize Reflows and Repaints:
   Batch DOM manipulations: Make all changes to the DOM at once rather than individually.
   Use Document Fragments: Collect all changes in a document fragment and append it once to the DOM.
   Minimize layout thrashing: Avoid querying layout information (like offsets and dimensions) immediately after modifying the DOM.

6. Modern libraries and frameworks such as React, Angular, and Vue provide more efficient ways to manage the DOM.
   React: Uses a virtual DOM to batch updates and efficiently update the real DOM only when necessary.
   Angular: Uses a change detection mechanism to update the DOM only when data changes.
   Vue: Also uses a virtual DOM and a reactivity system to ensure efficient DOM updates.

Comparison with Vanilla JavaScript:
Vanilla JavaScript: Direct DOM manipulation can be straightforward but might become inefficient and hard to manage in larger applications.
Frameworks/Libraries: Abstract away direct DOM manipulation, making code easier to write and maintain, and often more performant due to optimized update mechanisms.

Nokulunga Msabala
Ntokozo Nkosi
Koketso Lepulana

1. The Document Object Model (DOM) is a programming interface for web documents, represents an html document as a tree of objects.

2. Adding elements- to add new elements to the DOM, you can create them using javascript and then append to the exising element(eg adding a new paragraph to a div with the "mydiv"
   Removing elements- You can use the remove method or manipulate it's parent(eg removing a paragraph with the Id "myparagraph")
   Modifying elements- You can change the content of an element using properties like text content, inner html or value(eg changing the text content of a heading)

3. The innerHTML property recognizes HTML tags and renders the content according to the tags and textContent focuses on the rendered text content of an element, returns the text as appears on screen and ignores the HTML Tags.
   Uses
   innerHTML- When you need to insert or update html content(eg when adding new elements or modifying the existing ones)
   textContent- When you only care about the visible text and you don't need to consider styling or the layout adjustment

4.In the context of the DOM, events are actions or occurrences that happen in the browser, which the browser can respond to. These events can be triggered by user interactions (such as clicking a mouse button, pressing a key, or resizing a window), by the browser itself (such as when a page finishes loading), or programmatically via JavaScript.(Gives the user feedback and validation)
Event bubbling - It happens when an element receives an event, and that event bubbles up (or you can say is transmitted or propagated) to its parent and ancestor
Event Capturing - The event travels from the document root to the target element.

5. Increased Load Times: Constant DOM updates can slow down page loading.
   Best Practice - Reduce DOM depth, minimize css rules, use element "transform" for animation, avoid inline styling

6. Frameworks and libraries like React, Angular, and Vue.js play pivotal roles in modern web development. They provide essential tools and structures that streamline the process of building dynamic and interactive web applications, they offer extensive support, tutorials and documentation. They empower developers to create beautiful and highly functional web applications that meet modern user expectations.
   Vanilla JavaScript - JavaScript code that is written without the aid of any external libraries or frameworks

1. is a hierarchical representation of HTML documents.

2. Creating New Elements: Use the document.createElement() method to create a new HTML element. Appending Elements: Once you have the new element, use methods like appendChild(), insertBefore(), or insertAdjacentHTML() to insert it into the DOM at a specific location. Removing the Element: Once you have a reference to the element, use the remove() method to remove it from the DOM entirely. Changing Text Content: Use the textContent property to modify the text content of an element.

3. textContent is like grabbing the text itself, ignoring any bold formatting. It's like copying and pasting the plain text, without any fancy styles.

innerHTML is like grabbing the entire section, including the bold formatting. It's like using a highlighter to copy that section, including the bold part.

When to use which:

Use textContent when you just want the plain text, like when showing it somewhere else or searching for something specific. It's safer and easier to work with.

Use innerHTML carefully, only if you specifically need to add bold text or other formatting using HTML tags. Be careful if you're getting text from users, as it could contain security risks.

4. Events tell JavaScript when something happens on the webpage: It's like having a friend tell you when someone is swinging or going down the slide.

We can listen for events: We can tell our friend (JavaScript) to specifically pay attention to certain things, like someone clicking a button (like the swings) or moving the mouse over an image (like going down the slide).

Events help us interact with users: When our friend tells us something happened (like someone clicked the button), we can react to it! We can show a message (like "You clicked me!"), play a sound, or do something else fun.

There are two ways events can travel (imagine kids running to tell others):

Bubbling (most common): It's like when a kid on the swings gets excited and tells everyone around them (button -> parent area -> whole playground).
Capturing (less common): It's like having a teacher tell everyone to pay attention before someone goes down the slide (whole playground -> slide area -> kid).

5.Changing the DOM means the browser needs to adjust the layout which is also known as reflow. It then needs to redraw the affected parts repaint - like repainting those areas on the canvas. Doing this a lot slows things down. Ways of preventing this is to not paint everything at once, choose clear and simple "CSS selectors" using overly complicated ones that require the browser to search the entire painting slows things down, using a framework is the best option for manipulating the dom efficiently cause they use a virtual copy of the dom
6. Unlike vanilla JavaScript where every change requires updating the DOM directly, modern libraries like React, Angular, and Vue.js use a smarter approach. They create an in-memory representation of the DOM (like a draft) and efficiently compare changes before updating the real DOM. This minimizes unnecessary reflows and repaints, keeping your webpage snappy and responsive. It's like having a helper who plans and batches your edits to the website, ensuring a smooth and polished final product.

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.