JANUARY 10, 2024 / #D0M The JavaScript DOM Manipulation Handbook pa Benjamin Semah FB (A) SRS tetera Pur se DOM Manipulation is one of the most exciting topics to learn about in JavaScript. This is because one of JavaScript's main uses is to make web pages interactive - and the Document Object Model (DOM) plays a major role in this.The DOM is a powerful tool that allows you to interact with and manipulate the elements on a web page. And this handbook will help you understanding and become confident in working with it. You will begin by learning what the DOM is and what you can do with it. Then we'll dive into how to select, modyfy, and style DOM elements. You will also learn how to create new elements and add them to your web page. The handbook also cover topics like how to traverse the DOM what DOM events are, and includes some project ideas for practice. Let's get started! Table of Contents . isthe DOM? * What you can do with the DOM + How to Select DOM Elements * getElementByld + getElementsByClassName + getElementsByTagName * querySelector * querySelectorAll + Howto Change the Content of DOM Elements * The innerHTML Property * Security Risks with innerHTML + The innerText and textContent PropertiesHow to Work with Attributes of DOM Elements « The getAttribute Method * The setAttribute Method * The removeAttribute Method * The hasAttribute Method How to Change the Styles on DOM Elements * Setting Styles with the style Property * Setting Styles with Classes How to Traverse the DOM * Difference Between a Node and an Element * Selecting a Parent with parentNode vs parentElement * Selecting Elements with childNodes vs children * Selecting the First or Last Child/Element * Selecting.a Sibling of Nodes in the DOM DOM Events and Event Listeners * Difference Between Event Listener and Event Handler + Three Ways to Register Events in JavaScript * Practice Challenge * Solution to Practice Challenge * The Event Object * Types of Events Event Flow in JavaScript * Event Bubbling+ Event Capturing * The Event stopPropagation Method * JSDOM Manipulation Projects ideas * Conclusion What is the DOM? DOM stands for Document Object Model. But what does that mean? Let's break it down. The Document part refers to the webpage you see in the browser. Specifically, the HTML Document which handles the structure of the page's content. This includes the text, images, links, and other elements that make up the page. Object means the elements like images, headers, and paragraphs are treated like objects. Each object has its properties (like id, class, style) and methods. Using these properties and methods, you can manipulate the elements. The Model in DOM means it's a representation or copy of the HTML document as a hierarchical tree. This tree includes all the elements. And it captures the parent-child relationships between them. The DOM is always identical to the HTML document. Browsers ensure that they are in sync. So if something changes in the HTML, the DOM changes too, and vice versa.The HTML DOM Tree Piraeus eee Een «=== «== sre mean Eee A graphical representation of the HTML DOM tree At the top of the hierarchy is the Document object. It has only one child -— the html element. The html clement, also known as the root element, has two children, the head and body elements. And each of them also have their own children elements. The parent-child relationship between the elements is what allows you to traverse or move between and select them. More on that later. What You Can Do With the DOM DOM manipulation allows developers to interact with the structure, style, and content of web pages. The following are some of the things you can do with the DOM: * Change and remove existing elements in the DOM. * Create and add new elements to the page.* Change the styles for elements. « Add event listeners to the elements to make them interactive. How to Select DOM Elements To do something with DOM elements, you first have to select or access the element in question. In this section, you will learn some common methods for selecting DOM elements. Let's use the following phonebook markup to show how the various DOM selector methods work. ch id="page-title">Phonebook

‘ami ly">Jose

ork" >Anne

jork" >Joan

1: p. family SPRL Rca cta sk) The getElementsByClassName() method returns an HTML collection. Note: The HTML collection looks like an array, but it is not. You can access the elements using bracket notation just as you would with an array - but you cannot apply array methods like map , filter ,and foreach onit. console. log(famContacts(]) This will get the first element in the HTML collection, which is the paragraph with the name Marie.aCe Triste Result of accessing HTMLCollection element with bracket notation. But what if you wanted to loop through all the elements in the famcontacts HTML collection? You'd first need to convert the HTML collection into an array. Then you could use any of the array methods. Asimple way to create an array from the HTML collection is to use the spread operator, like this: let famContactsarray .-famContacts] famContactsArray.forEach(element -> console. log(element)) Aresult of logging all elements in the HTMLCollection. Using the forEach method, you can access each of the items in the famContactsArray . The browser will throw an error if you try to apply anarray method like map to the HTML collection without first creating an array from it. Pe a ae eee ee me) at index. js:17:13 Error message when you use array methods on an HTMLCollection. 3. getElementsByTagName This method will select elements using their tag name. For example, getElementByTagName(‘p') will select all paragraphs on the page. Like getElementsByClassName , this method also returns an HTML collection of the selected elements. Here's an example: const allContacts - document .getélenentsByTagame( "p') console. log(allcontacts)v HTMLCollection(4) [p.family, p. family, p.work, p.work] i LHe ECFA enCrany Pala g Pars ae : HTMLCollection An HTMLCollection containing all paragraph elements. You can create an array from the HTML collection and use any of the array methods on it. allcontactsArray ..allContacts] allcontactsArray.map(element => console. 1log(element)) Deed fod Sey ee Nad area ted Result of using the map method on allcontactsArray . 4. querySelectorYou can use this method to select any HTML element in the DOM. It returns only one element: the first element that matches the given selector. The querySelector method works like how CSS selectors work. For example, what do you do when you want to select an element with an id? You use the hash # symbol. How about when you want to select elements with a class? You puta dot . in front of the class name. Here's an example: const firstWorkContact = document. querySelector(’ .work") console. log(firstworkContact) An example of using the querySelector method. The example above returns only the first element with a class of work and ignores the rest. Let's see another example to show how querySelector works like CSS selectors. The following isa div element with four buttons:

Assuming you wanted to select the third button, you could use querySelector like the one below. The code uses the CSS nth-child selector to get the third button inside the div. const thirdstn = document. querySelector(‘div button:nth-child(3)") console. log(thirastn) Third button: Result of selecting the third button with querySelector method. But what if you want to select all four button elements and not only the first one? Then you could use the querySelectorAll method instead. 5. querySelectorAll Like the querySelector method, querySelectorAll also selects HTML elements using CSS selectors. The difference is that it returns all elements that match the selector instead of returning only the first one. Using the previous example, let's select all the buttons with querySelectorAll .const allstns = document.querySelectorAll( button’) console. log(allBtns) Sale COE Brg ype]]: NodeList The querySelectorAll method returns a NodeList of selected elements. Note: querySelectorAll returns a NodeList .A NodeList is slightly different from an HTML collection. You don't need to convert it to an array to apply amethod like forEach onit. al1Btns.foréach(btn => console. 1og(btn))era hac Lf Te Thao) AUP Reem ha eli aa hay Result of using forEach method on the NodeList. But you still cannot apply array methods like map, filter ,and others ona NodeList. You will need to first create an array fromit. You can read this freeCodeCamp article on the difference between HTML collection and NodeList to learn more. How to Change the Content of DOM Elements So far you've learned about different ways to select DOM elements. But. that is only the beginning. Now, let's see how you can manipulate the DOM to change the content of a webpage. The first thing you need to do is to select the element. You can do that using any of the methods you learned from the previous section. After selecting the element, there are several methods you can use to add or update the content.The innerHTML Property This is a method that allows you to read or update both the structure and content and structure of elements. Let's see an example of how you can use the innerHTML method. The following is some markup of three paragraphs, each with an id. “topic">IS array methods

map

#ilter

JS array methods map filter Simple markup with three paragraph elements You can read or get the content of the any of the paragraphs using innerHTML . For example, let's get the content of the first paragraph. const topicElement - document. querySelector( 's#topic’)console. log(topicElement. innerHTML) Sear asa Log statement of the innerHTML of the topicElement Now, let's say you want to update the topic from "JS array methods" to "JavaScript array methods". You can do that by assigning the new text to the innerHTML of the element. const topicElement - document. querySelector( 's#topic') ‘topicElement.innerHTML = “JavaScript array methods” JavaScript array methods map filterThe topic is updated from “JS Array methods" to “JavaScript array methods" With innerHTML , you can change more than just the content. You can also change the HTML structure of the element. For example, if you want to make the word "JavaScript" bold, you could do this: ‘topicElement.innerHTML = "JavaScript array methods” JavaScript array methods map filter The word "JavaScript" is made bold using innerHTML Security Risks With innerHTML Using the innerHTML poses potential security risks. An example is cross-site If the content you're inserting comes from user input or any untrusted source, be sure to validate and sanitize it before using innerHTML to prevent XSS attacks. You can use a library like DOMPurify to do this.Also, if you are working with plain text content, consider using methods like innerText and textContent . The innerText and textContent Properties Both innertext and textContent ignore HTML tags and treat them as part of a string. You can use both methods to read or update the text of DOM elements. Akey difference between the two is in how they treat the text. Using innerText returns the text as it appears on the screen. And using textContent returns text as it appears in the markup. Let's see an example below,

Key = ABC123

Key = Aparagraph element with the some text and a hidden span element inside The example includes a paragraph element. Inside the paragraph is a span that contains a key. The key does not appear on screen because its inline style is set to a display of none.Now, let's select the paragraph and print both the innerText value and textContent value to see the difference. const paragraph = document .querySelector('p'); console. log("innerText: console. log("textConten ", paragraph. innerText) ", paragraph. textContent) Auta CB be saa@ lieu eC! rN; fon) Result of log statement for innerText and textContent . Note how innerText returns the text as it appears on the screen (without the value of the key which is hidden with CSS). And note how textContent returns the text including hidden elements and whitespaces. Let's see another example for adding text to an element. The following code includes two paragraphs, each with bold text and an empty span, as well as a horizontal line between them.

innerText Example

---



‘textContent"> innerText Example textContent Example Example to demo the innerText and textContent properties Now, let's select the two span elements and add the same text to them. This will help you better understand the difference between innerText and textContent . const example1 const example2 let address = ABC Street, Spintex Road, Accra, Ghana. examplel.innerText = address; exanple2.textContent = address; document. querySelector( ‘itinner-text'); document. querySelector('#text-content');The code gives the same variable address to the two examples. The first uses innerText and the second uses textContent . See the results below: innerText Example ABC Street, Spintex Road, Accra, Ghana. textContent Example ABC Street, Spintex Road, Accra, Ghana. Result of updating content with innertext and textContent . Notice how innerText uses the line breaks but the textContent example doesn't. Another key difference between the two methods is how they behave when used inside loops. innerText can be slower than textContent when dealing with bulk operations or frequent updates ina loop. Read this freeCodeCamp article to learn more about the difference between innerHTML, innerText ,and textContent . How to Work with Attributes of DOM Elements HTML attributes provide useful information about HTML elements. These attributes are always included in the opening tag of the element. Anattribute is made up of a name and a value (though there are exceptions where only a name is present). As the browser generates the DOM based on the HTML structure, it translates these attributes into dynamic properties of the DOM objects. Here's an example: Assume there's a button in the HTML document with the following attributes: yBtn" type="submit" Click Here For this example, the browser will create an HTMLButtonElement object in the DOM. And the object will have properties matching the attributes. * HTMLButtonElement.id witha value of myBtn. * HTMLButtonElement.type witha value of submit . To interact with and manipulate these attributes using JavaScript, you can use methods like getAttribute and setAttribute to directly access the properties. The getAttribute Method Like the name suggests, you can use this method to get the value of an existing attribute on an element. It accepts an argument (the name of the attribute) and returns the value of the attribute. If the attribute you passed to it as an argument does not existon the element, the method will return null. Here's an example: const imageElement = document .querySelector( img’) console. log (imageELenent .getAttribute('src')) eT ST) The getAttribute method is used to get the value of the sre attribute. Using the getattribute method is the above example, you can get the value of the sre attribute for the image element. The setAttribute Method This is used to set or change the attribute of an element. The method takes in two arguments. The first argument is the name of attribute you want to change, and the second is the new value you want to give the attribute. Here's an example: const imageElement = document..querySelector('img') console. log("BEFORI 2", dmageElement.getattribute('src')) imageElement.setAttribute('src', ‘new-image. jpg") console. log("AFTER:", imageElement.getattribute('src')) Cag eee Te a eee) The setAttribute method is used to update the value of the src attribute. This code example logs the value of the src attribute before and after using setAttribute to changeit from image.jpg to new-image. jpg. When you pass an argument to the setattribute method and that attribute doesn't exit on the element, it will create a new attribute. For example, you can add a height property to the image element like s const imageElement = document.querySelector('img') console.log("SEFORE:", imageElenent.getattribute( ‘height’ )) imageElement .setAttribute('height", '200') console. log("AFTER:", imageElement .getattribute( height")iat aey Cais tee) An example of adding a new height attribute to the image element. The first log statement returns null because the height attribute was non- existent. But after setting it with the setAttribute method, the second log statement returns the correct value of the height. The removeAttribute Method Inthe previous section, you learned how to add a new attribute using the setAttribute method. What if you wanted to remove an existing attribute? You can use the removeAttribute method. You pass in the name of the attribute you want to remove from the element as arguments to the method. Here's an example: Let's use the removeAttribute method to remove the height attribute from the image element. const imageElement = document. querySelector( img’)console. log("BEFORE:", imageElement.getattribute( ‘height’)) imageElement .renoveAttribute( ‘height’, '200') console.log("AFTER:", imageElement.getAttribute( ‘height")) lay es aiaa An example of using the removeAttribute method. Before using removeattribute , the first log statement prints the value of the height attribute, 200 . But after using the removeAttribute method, the second log statement prints null , confirming the removal of the height attribute from the image element. The hasAttribute Method Another method for working with attributes in the DOM is the hasAttribute method. You can use this method to check whether or not an element has a specific attribute. The hasAttribute method returns true if the specified attribute exists and returns false if it doesn't. Here's an example: Let's use the hasAttribute to check for the presence of height and width values on the image element. const imageElement = document.querySelector('img') console.log("HEIGHT", imageElement.hasAttribute(‘height")) console. log( "WIDTH", imageElenent .hasAttribute( ‘width’ )) ach PO Example of using the hasAttribute method to check if an attribute exists. The check for height returns true because it's an existing attribute while the check for width returns false because it doesn't exist. How to Change the Styles on DOM Elements There are two main ways of styling elements when working with the DOM in JavaScript. You can use the .style property or you can use classes. Each has its benefits and situations it's best situated for. Setting Styles With the .style Property Youuse the .style property when you want to make specific changes toa single element. The .style property allows you to set styles directly asinline styles for elements. This means it overrides the styles you have in your CSS stylesheet. Usingthe .style property, you get access to all the individual CSS properties, See the demo below: Styling elements with JavaScript header = document.querySelector('hi') console. log (header. style) Sera ge aces Cee Presse) Presta Ley Pretec Bieripecs alignsetf: Percocet Poneto tse ee Cirey animationDirection: Tease POorscu sauce! animationIterationCount: animationName Pree enaeteten C5SStyleDeclarations for an hi element logged to the console.The console.1og prints the CSS style declarations with all the CSS. properties for that element. Now, let's see an example of how to use the .style property. T love JavaScript I love JavaScript An example h1 header element Here is an h1 header. Now, let's add style to it using the .style property. const paragraph = document. querySelector(‘hi') paragraph. style.color = ‘white’ paragraph. style.backgroundColor = ‘green’ I love JavaScript The style property is used to add a background colour to the hi element.NOTE: Because this is JavaScript, you cannot use the hyphen if the CSS property name includes two or more words. For example, in CSS you would write background-color . But in your JavaScript code, you need to use camel case, So background-color becomes backgroundColor . You can also delete a style on an element by setting the value of the property to an empty string. element.style.propertyName = "" Setting Styles with Classes With classes, you can create styles once and apply it to different elements. This helps make your code become more maintainable. The className Property The className property represent the class attribute of a DOM element. And you can use it to get or set the value of the class attribute. Here's an example:

Jollof rice

const jollofParagraph = document.querySelector('p') console. log (jollofParagraph className) jollofparagraph.className = ‘favorite’console. log(jollofParagraph.className) food rice-dish favorite Example of changing the value of a class with the className property. The className also reads or replace the current class. In the example above, the first log statement prints the original value of the class. And after updating the className , the second log statement prints the new value for class. But there is a more flexible property. For example, what if instead of replacing the old class with the new class, you wanted to add another class? That's where the classList property comes in. The classList Property With the classList property, you can add and remove classes. You can also toggle classes, replace existing class values with new ones, and even check if the class contains a specific value. Here's an example:

Jollof rice

const jollofParagraph = document .querySelector('p') console. log(jollofParagraph.classList) a a Shows the current classList with only one value Adding Classes with classList.add() jollofparagraph.classList.add('fav', ‘tasty') console. 1og( jollofParagraph.classList) Example of adding new classes with classList.add. The code adds two new classes fav and tasty to the class list. Removing Classes With classList.remove() jollofParagraph. classList.renove(‘ tasty) console. log (jollofParagraph.classList)acu eee Example of removing classes with classList.. remove . The code removes the class tasty from the class list. Replacing Classes with classList.replace() jollofparagraph.classList.replace(‘fav', ‘favorite') console. log(jollofParagraph.classList) The code replaces the class fav with favorite eae Po Example of replacing classes with classList.replace . Check the Presence of a Class with classList.contains() const isFavorite = jollofParagraph.classList.contains(‘ favorite") const isSoup = jollofParagraph.classList.contains(' soup")console. log("Contains favorit isFavorite) ‘ontains soup: ", isSoup) console. log(" Contains favorite: Cone uEEe Te Example checking if a class exists with classList.contains . The code checks if the class passed to it is contained in the class list. Itreturns true if itis included in the class list (for example favorite ) and false ifitis not included in the class list (for example soup ) Toggling a Class with the classList.toggle() When you use the toggle property, it first checks if the class exists. If it exists, it will remove it. And if it doesn't exist, it will add it. jollofParagraph.classList. toggle( favorite’) console. log(jollofParagraph.classList) jollofparagraph.classList .toggle(‘ favorite’) console. log(jollofParagraph..classList) jollofparagraph.classList.toggle( favorite’) console. log (jollofParagraph.classList)> DOMTokenList [ eo eed > DOMTokenList [ Example of toggling a class value with classList.toggle . The first time the toggle runs, favorite exists in the class list. So, the toggle removes it. The second time the toggle runs, favorite doesn't exist so the toggle adds favorite to the class list. The next time the toggle runs, favorite now exists again. So it removes it from the class list. The toggle keeps adding or removing the value from the class list depending on whether it's present or absent. How to Traverse the DOM To traverse the DOM means to move between the different elements/nodes within the HTML document. This may includes selecting or accessing parent, child, or sibling elements (or nodes). You do this to get information or manipulate the document structure. But before we get into how to traverse the DOM, you need to understand the difference between nodes and elements. Difference Between a Node and an ElementNodes are the building blocks of the DOM. They represents different components in the HTML structure. Elements are a specific type of node, but not all nodes are elements. Other types of content like attributes of elements, text content, and comments within the code are nodes too. But they are not elements. An element is a specific type of node that defines the structure of the document's content. Think of elements as the familiar HTML tags you use. Examples include const italicizedText = document. getélementById( italics’) console. 1og(italicizedtext.parentNode) console. 1og(italicizedText. parentNode.parentNode) First, you select the element. Then, you chain the parentNode method to it to get the parent. You can also chain another parentNode property to get the parent of a parent element like the second log statement. The screenshot below shows the output of the two log statements. ST eae Leone td a Some italicized text: Example of selecting the parent of an element. Selecting Elements with childNodes vs children You can select the contents of an element using both the .childNodes and .children properties. But they work differently. childNodes : returns a NodeList of all the child nodes within the selected elements. It will include elements and non-element nodes like text nodes,comment nodes, and so on. .children : returns an HTML collection of only the child elements (element nodes) of the selected objects. It will not include any non-element nodes like texts or comments. Let's see an example that shows the difference: The code above has only 2 child elements (element nodes): the paragraph and the span. But there are other elements too - a text node and a comment: const container = document. getElementById(’ container"); const containerChildNodes = container .childNodes; const containerChildren = container.children; console. 1og(containerChildNodes) ; console. log(containerChildren) ;v NodeList(7) [text, p, text, comment, text, span, text] i > 0: text a3 fp prensa Paes css Era 6: text iC ruraes An example of using the .childNodes property The childNodes will return all the child nodes (both elements and non- elements). It also includes the whitespaces between elements as text nodes. This can be confusing to work with. So, unless you have a good reason not to, you should stick with the .children property. The children will only return the child elements (the paragraph and the span). v HTMLCollection(2) [p, span] i a) > 1: span Cr Trees An example of using the .children property Selecting the First or Last Child/ElementIf you need to select only the first/last child or element, you can use these four properties. firstChild : Selects only the first child node of the parent element. lastChild : Selects only the last child node of the parent element. firstElementChild : Selects only the first child element of the parent. lastElementChild : Selects only the last child element of the parent. Let's use the same example from the previous section to see how each works: const container = document. getElementById(‘ container’); console. log(*FIRST CHTLD:" console. log("LAST CHILD: console. log( "FIRST ELENEN' console. log("LAST ELEMENT: » container. firstchild) » container. lastchild) ", container. firstElementchild) » container. lastElementChild)(opt) ae > a LAST CHILI Laced ace en Some paragraph LAST ELEMENT: an>Span Element: Example demo selecting first child/element and last child/element Note how firstChild returns the first text node but the firstElementChild returns the first paragraph instead. This means it ignored the text node which comes before the paragraph. And also note how the lastChild returns a text node - even though from the markup, it looks like there's nothing after the span. That is because the lastChild property considers the linebreak/whitespace between the closing tag of the span and the closing tag of the div elements as a node. That's why it's generally safer to stick to firstElementChild and last€lementChild . Selecting a Sibling of Nodes in the DOM You've learned how to select a parent or a child of an element. You can also select a sibling of an element. You do that using the following properties: * nextSibling : Selects the next node within the same parent element. * nextElementSibling : Selects the next element, and ignores any non- element nodes. * previousSibling : Selects the previous node within the same parent element.* previousElementSibling : Selects the previous element, and ignores any non-element nodes. Here's an example: ute! > ‘inner"> Let's add event listeners to the button, the #inner div, andthe #outer div: const button = document. get€lementByTd('btn') const innerDiv = document. getElementByld(' inner’) const outerDiv = document. getElement8yId( outer’) button. addéventListener(‘click', function() { console.1og( ‘Click on button’) » innerDiv.addEventListener(*click’, function() { console. log( ‘Click on inner Div") » outerDiv.addEventListener(‘click', function() { console. log( ‘Click on outer Div") ») By default, browsers use the event bubbling approach. So there is no need to add any argument to the event listener. This is the order in which the event handlers will run in response to a click on the button: 1. button 2. #innerDiv 3. #outerDivClick on button fel Ste Pa a Click on outer Div Events are executed from the element to the outermost element in the bubbling phase. To use the event capturing model, you need to pass a third argument true to the event listener. const button = document. get€lementsyId(‘btn') const innerbiv = document .getElementById(* inner") const outerDiv = document. getElement8yTd( ‘outer’) button. addéventListener(‘click', function() { console.1og( ‘Click on button’) }, true) innerDiv.addEventListener(‘click', function() { console. 1og('Click on inner Div') }, true) outerDiv. addeventListener( ‘click’, function() { console. log('Click on outer Div") }, true) The order for executing the event handlers will now run in the opposite direction, like this: 1. #outerDiv 2. #innerDiv3. button ick on outer Div (el Brel aro ee Click on button Events are executed from the outermost element to the element in the capturing phase. The Event stopPropagation() Method You've learned about how the event bubbling registers an event on an element and continues registering the event all the way to the outermost ancestor element. You've also seen how event capturing does the opposite. But what if you don't want the event to register on all the ancestors? That's where the stopPropagation method comes in. You can use this method to prevent the event from propagating through the whole DOM. Let's use the stopPropagation method on the same example from before: button. addéventListener(‘click", function(event) { event. stopPropagation() console. log('Click on button’) » innerDiv.addeventListener(‘click', function() { console. log( ‘Click on inner Div") ») outerDiv.addEventListener('click', function() {console. log('Click on outer Div’) » Ee St)i) The stopPropagation method allows the execution of only the first event listener. Now, only the event handler on the button is fired. The ones on the innerDiv and outerDiv are not because of the stopPropagation method on the button. Also, note that to get the event object, you need to pass it as an argument to the event handler function. JS DOM Manipulation Project Ideas Building projects is an excellent way to improve your understanding of coding concepts. So roll up your sleeves and get ready to work! Here are five JS DOM manipulation project ideas to help you practice and solidify your skills. Toggle Switch Design a toggle switch that changes its state (on/off) when clicked. Update the DOM (for example with a background color) that reflects the current state of the toggle switch.Random Color Picker Create a simple app where users can click a button to generate a random color. Include a shape on the screen that gets filled with the chosen color. Also display the color code on screen. Countdown Timer Build a timer that starts from a specified time. The app updates in real time and shows the remaining time on the screen. Word Counter Develop an app that provides an input field or text area for the user to type. Display the number of words in real time on the screen as the user types. An Interactive To-Do List Create an app that allows users to add, delete, or edit tasks. You can have fun with this one and add as many advanced features as you want. For example, adding features like marking tasks as completed, filtering tasks, or sorting them. Conclusion If you've come this far, then you now have a good understanding of JavaScript DOM manipulation. With practice, you'll be confident enough to tackle advanced projects that require knowledge of these DOM manipulation concepts. A good foundation of Vanilla Js DOM manipulation concepts will also come in handy when picking JavaScript libraries/frameworks like React, Angular, Vue, Svelte, and so on.Thank you for reading, and happy coding! For more in-depth tutorials, feel free to subscribe to my YouTube channel.