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)