JavaScript, as we all know, is a really powerful language, whether it runs inside the browser environment or inside the server environment. In either environment, it’s backed by robust and powerful APIs to help in performing given tasks easily.
Talking about the browser environment, one particularly useful API and also one of the most used ones is the DOM API. The DOM allows us to modify the structure and content of given a HTML/XML document.
Focusing on purely HTML documents, we have the HTML DOM API, which extends the core DOM API with HTML-specific features.
Overall, the HTML DOM API is so huge and complex that one might need more than a week to get completely comfortable with half of the core interfaces.
In this regard, here we have gathered a collection of 10 exercises to test your understanding of various interfaces from the HTML DOM API, from our very own JavaScript course.
Let’s see them…
1. Text Content
🔗 Link: https://www.codeguage.com/courses/js/html-dom-text-content-exercise
📈 Difficulty Level: Average
🎯 Objective: Manually define the textContent property on the Node interface.
The textContent property is a really handy property when we just want to obtain the textual content inside a given element node. But since it’s defined on the Node interface, it isn’t accessible on element nodes only — we can access it on text and comment nodes as well. On text and comment nodes, textContent returns their nodeValue.
By redefining the textContent property on the Node interface, you’ll learn about how to remove element nodes from a given node, how to add a new node, how to work with nodeValue, and much more.
2. Redefining replaceChild()
🔗 Link: https://www.codeguage.com/courses/js/html-dom-redefining-replacechild-exercise
📈 Difficulty Level: Easy
🎯 Objective: Redefine the replaceChild() method using other methods of the Node interface.
The replaceChild() method allows us to replace a particular a child node of a given element with another node. Technically, replaceChild() can be defined entirely using two other methods of the Node interface and that’s what this exercise is all about.
3. Node Count
🔗 Link: https://www.codeguage.com/courses/js/html-dom-node-count-exercise
📈 Difficulty Level: Easy
🎯 Objective: Create a Node instance method to count all the nodes under a given node, including itself.
When working in such tree structures as the DOM, recursion is our friend in many instances. One instance is when we wish to know exactly how many nodes lie in the subtree starting at a given node, including the node itself.
This is what this exercise is about. You’ll learn about recursion, about the childNodes property of the Node interface, about how to check for given node types, and much more.
4. Redefining insertAdjacentElement()
🔗 Link: https://www.codeguage.com/courses/js/html-dom-redefining-insertadjacentelement-exercise
📈 Difficulty Level: Average
🎯 Objective: Redefine the insertAdjacentElement() method of the Element interface, manually in JavaScript.
Many developers are aware of the appendChild() and insertBefore() methods of the Node interface. But only a few might be aware of the insertAdjacentElement() method, which is a really handy way to add an element node adjacent to another element.
In this exercise, you get to redefine insertAdjacentElement() solely using existing methods of the Node interface and, in this way, learn about various ideas such as how to work with an element’s siblings, with the insertBefore() method, how to throw an error when provided with the wrong kind of arguments, and much more.
5. Redefining firstElementChild
🔗 Link: https://www.codeguage.com/courses/js/html-dom-redefining-firstelementchild-exercise
📈 Difficulty Level: Easy
🎯 Objective: Redefine the firstElementChild property of the Element interface, manually in JavaScript.
The Element interface defines a firstElementChild property that returns back the first child node of the calling element node that is an element itself. Technically, it can be defined entirely using properties of the Node interface and that’s what this exercise is about.
You’ll learn about the firstChild property of nodes, how to set up a while loop to traverse across nodes, and how to check whether a given node is an element or not.
6. Building Tables
🔗 Link: https://www.codeguage.com/courses/js/html-dom-building-tables-exercise
📈 Difficulty Level: Average
🎯 Objective: Create two variants of a function to build an HTML table based on a given array of items.
It’s not really a rare thing to build an HTML table with the help of data stored in a JavaScript array. This exercise tests your skills in doing so. But more than that, it also tests your understanding of DOM mutation via innerHTML solely and via mutation methods such as appendChild() and insertBefore().
7. Redefining className
🔗 Link: https://www.codeguage.com/courses/js/html-dom-redefining-classname-exercise
📈 Difficulty Level: Easy
🎯 Objective: Redefine the className property of the Element interface, manually in JavaScript.
8. HTML Serialization
🔗 Link: https://www.codeguage.com/courses/js/html-dom-html-serialization-exercise
📈 Difficulty Level: Hard
🎯 Objective: Create a function to replicate the behavior of innerHTML when it's retrieved.
HTML serialization is the name given to the process of converting an element node to its corresponding string representation. It might seem an easy thing to do, but it requires us to consider a couple of ideas while crafting the algorithm.
In this exercise, you’ll learn about the attributes property of element nodes, recursion once again, the childNodes property of the Node interface, and much more.
9. Dynamic Lists
🔗 Link: https://www.codeguage.com/courses/js/html-dom-dynamic-lists-exercise
📈 Difficulty Level: Easy
🎯 Objective: Fill up those <ol> and <ul> elements with <li> elements that have a data-list attribute on them.
10. append() Polyfill
🔗 Link: https://www.codeguage.com/courses/js/html-dom-append-polyfill-exercise
📈 Difficulty Level: Easy
🎯 Objective: Create a polyfill for the append() method of the Element interface.
The append() method allows us to bulk-insert nodes inside a given element after its last child. This exercise tests your understanding of document fragments and how to use them to group nodes and then insert the nodes, all at once, into the DOM.
In the end
And with this, we reach the very end of our collection of 10 exercises to test your knowledge of the HTML DOM API.
If you found the exercises helpful, don’t forget to like the article. Also, let us know in the comments as to which one of these did you find the most challenging.
To learn more about JavaScript, you can consider our absolutely free JavaScript course, as linked below:
Learn JavaScript — The Most Comprehensive Course
Have a great time coding. 😊
Top comments (0)