Scribd
Upload
14 views14 pages

Dom 2

dom notes in deep

Uploaded by

ramagoddy
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
14 views14 pages

Dom 2

dom notes in deep

Uploaded by

ramagoddy
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
You are on page 1/ 14
‘112824, 9:30 AM Projects | 100xDevs = DOMPart2 los Context for today Today, we're going to learn about 1.DOM manipulation (slightly more advanced) 2. Create a mock Reconcilers 3. State and State management -ntps:ifprojects.100xdevs.com/patidom-2iDOM Part 21 ane ‘112824, 9:30 AM Projects | 100xDevs = DOMPart2 los Complex DOM manipulation Creating a DOM element which has another DOM element inside Lets write some code in which you have a button. When you click on a button, a slightly complex DOM element gets appended to the DOM.
©
Approach #1 © «button onclick="createComplexDomElement()">Add -ntps:ifprojects.100xdevs.com/patidom-2iDOM Part 21 ‘112824, 9:30 AM Projects | 100xDevs = DOMPart2 los Finishing the TODO App - 2 Let's look at a slightly better approach of doing the same thing. Creating a DOM element which has another DOM element inside a) -ntps:ifprojects.100xdevs.com/patidom-2iDOM Part 21 ana ‘112824, 9:30 AM Projects | 100xDevs DOM Part2 1of8 TODO app Can you now create a ToDo application with the slightly complex approach of appending DOM elements? DomPart? tore State const todos = [{ ids, description: "Go to gym" MM id: 2, description: "Eat food” ui Component function todoComponent(todo) { const div = document.createElement("di Projects | 100x005 const hl = document.createglement("h'’); const button = document.createElement("button’); button.innerHTML = "Delete"; hLinnerHTML = todo.title; div.appendChild(hl); div.appendChild(button); Linkedin Topbar State const state = { notifications: { home: 0, -ntps:ifprojects.100xdevs.com/patidom-2iDOM Part 21 m8 ‘224, 290M Projects | 100:00re messaging: 0, ~ 5 DOMPart2 1of8 profilePicture: "https://media.licdn.com/dms/image/v2/C5603AQFbOqG90g } Components es , Started code © Add todo! v Approach #1 - Clean the screen everytime we re-render Suny ra rue 7syuivs -ntps:ifprojects.100xdevs.com/patidom-2iDOM Part 21 ona ‘224, 290M Projects | 100:00re g There is a better approach —- You find the diff and only do deletes / updates / additions that are necessary. But that'll boggle most folks heads so we're not going there. The general goal should be to minimize the number of interactions in the DOM. React does this by using something called the virtual DOM, -ntps:ifprojects.100xdevs.com/patidom-2iDOM Part 21 sone ‘112824, 9:30 AM Projects | 100xDevs “44 TANO functionality = DOMPart2 1of8 Lets add the functionality to 1. Add more TODOs 2. Delete functionality g You only need to update state and call the render function. You Dont need to do the actual DOM manipulations, the render function will do it for you. Y Solution ©
-ntps:ifprojects.100xdevs.com/patidom-2iDOM Part 21 ane ‘112824, 9:30 AM Projects | 100xDev5, < DOMPart2 lof8 scicteLastTodo()"»Delete last todo
let todos = []; function addTodo() { todos.push({ title: document.querySelector(“input’).value » render() } function deleteLastTodo() { todos.splice(todos.length - 1,1) // remove the last element from the arr render() } function deleteFirstTodo() { todos.splice(0, 1) // remove the last element from the arr render() } function createTodoComponent(todo) { const div = document.createElement(‘div’); const hl = document.createElement("hl’); const button = document.createElement("button’); button.innerHTML = "Delete" hlinnerHTML = todottitle; div.append(hl) div.append(button) return div -ntps:ifprojects.100xdevs.com/patidom-2iDOM Part 21 sane ‘224, 290M Projects | 10030e document.querySelector("#todos").innerHTML . ‘odos.length; i++) { = createTodoComponent(todos|i]); document.querySelector("#todos").appendChild(element) } } = DOMPart2 lofs -ntps:ifprojects.100xdevs.com/patidom-2iDOM Part 21 sane

You might also like