Skip to content
dreamcode
dreamcode
Map
DOM Node Transformer
Section challenge · IntermediateJavaScript
Reward: +50 XP
PROBLEM

DOM Node Transformer

Write a function transformElement(element, newText, classToAdd, classToRemove) that takes a mock DOM element and updates its properties:

  1. Sets element.textContent to newText.
  2. Adds classToAdd using element.classList.add(...).
  3. Removes classToRemove using element.classList.remove(...).
  4. Returns the element.

Also write a helper function testDOM(textContent, classes, newText, classToAdd, classToRemove) that:

  1. Creates a mock element:
const element = {
  textContent,
  classList: {
    classes: [...classes],
    add(c) { if (!this.classes.includes(c)) this.classes.push(c); },
    remove(c) { this.classes = this.classes.filter(x => x !== c); }
  }
};
  1. Calls transformElement(...) and returns a plain object: { text: element.textContent, classes: element.classList.classes }.
Examples
testDOM("hello", ["star"], "sky", "cloud", "star")
{ text: "sky", classes: ["cloud"] }
testDOM("old", ["fade"], "new", "glow", "none")
{ text: "new", classes: ["fade", "glow"] }
solution.js
JAVASCRIPT
Saved as you type

Tests

0 of 3 passing
  • change text and remove star class
    testDOM("hello", ["star"], "sky", "cloud", "star")
    expected { text: "sky", classes: ["cloud"] }
  • keep fade and add glow class
    testDOM("old", ["fade"], "new", "glow", "none")
    expected { text: "new", classes: ["fade", "glow"] }
  • no duplicate add, ignore absent remove
    testDOM("a", ["x", "y"], "b", "x", "z")
    expected { text: "b", classes: ["x", "y"] }
On the line
+50 XP
Pass all 3 tests to claim it.