Chapter 42: DOM Change Nodes
XML DOM – Changing Node Values.
I will explain it as if I’m sitting next to you — going slowly, showing every step, using simple analogies, pointing out what beginners usually get wrong, explaining why certain things work or don’t work, and giving you many small-to-realistic examples that you can copy-paste and experiment with right now.
1. The most important mindset before we start
When we talk about changing node values in XML DOM, we mean:
Modifying the content or attributes of nodes that are already in the tree.
The DOM is live — every change you make is immediately reflected in the document object.
There are three main things you usually want to change:
- The text content inside an element
- The value of an attribute
- (Rarely) The text content of a text node directly
Each case uses slightly different properties.
2. Three main situations and the right tools for each
| Situation | You are working with … | Recommended way to change it | Example line of code | Important notes / traps |
|---|---|---|---|---|
| Change the text inside an element | <title>…</title> | element.textContent = “new value” | titleElement.textContent = “New Book Title” | Safest & most common method |
| Change the direct text of a text node | Text node itself | textNode.nodeValue = “new text” | titleElement.firstChild.nodeValue = “Updated” | Rarely needed — textContent is usually better |
| Change an attribute value | id=”old” → id=”new” | element.setAttribute(“id”, “new”) or element.id = “new” | price.setAttribute(“currency”, “USD”) | Both ways work, setAttribute is safer |
| Remove an attribute | Remove currency=”…” | element.removeAttribute(“currency”) | price.removeAttribute(“currency”) | No value = attribute disappears |
3. Visual example – before & after
Before (original XML)
XML
|
0 1 2 3 4 5 6 7 8 9 10 |
<book id="B101" lang="en"> <title>Atomic Habits</title> <author>James Clear</author> <price currency="INR">499.00</price> </book> |
After we run the code below
XML
|
0 1 2 3 4 5 6 7 8 9 10 |
<book id="BOOK-2025-001" lang="EN"> <title>Atomic Habits (Revised Edition)</title> <author>James Clear & Team</author> <price currency="USD">14.99</price> </book> |
4. Complete working example – Changing different kinds of values
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>XML DOM – Changing Node Values</title> <style> body { font-family: Arial, sans-serif; margin: 40px; line-height: 1.6; } pre { background: #f4f4f4; padding: 16px; border-radius: 6px; overflow-x: auto; } button { padding: 10px 20px; margin: 8px 12px 8px 0; background: #10b981; color: white; border: none; border-radius: 6px; cursor: pointer; } button:hover { background: #059669; } #output { margin-top: 30px; padding: 24px; background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 8px; white-space: pre-wrap; } </style> </head> <body> <h2>XML DOM – Changing Node Values (Live Demo)</h2> <p>Click the buttons one by one and watch the XML change below.</p> <button onclick="resetXML()">1. Reset to original XML</button> <button onclick="changeTitle()">2. Change title text</button> <button onclick="changeAuthor()">3. Change author + add middle name</button> <button onclick="changePriceCurrency()">4. Change currency to USD & price</button> <button onclick="changeBookId()">5. Change book ID attribute</button> <button onclick="addNewElement()">6. Add new <discount> element</button> <h3>Current XML (after changes):</h3> <pre id="output">Original XML will appear here after reset…</pre> <script> let xmlDoc = null; const output = document.getElementById("output"); // Original XML – we will keep resetting to this const originalXML = `<?xml version="1.0" encoding="UTF-8"?> <book id="B101" lang="en"> <title>Atomic Habits</title> <author>James Clear</author> <price currency="INR">499.00</price> </book>`; function resetXML() { const parser = new DOMParser(); xmlDoc = parser.parseFromString(originalXML, "application/xml"); if (xmlDoc.querySelector("parsererror")) { output.innerHTML = "XML parsing error!"; return; } output.textContent = originalXML.trim(); console.log("XML reset to original"); } function showCurrentXML() { const serializer = new XMLSerializer(); const currentXML = serializer.serializeToString(xmlDoc); output.textContent = currentXML; } // ──────────────────────────────── // 2. Change text content of <title> // ──────────────────────────────── function changeTitle() { if (!xmlDoc) { resetXML(); } const title = xmlDoc.querySelector("title"); if (title) { title.textContent = "Atomic Habits (Revised Edition)"; showCurrentXML(); console.log("Title changed"); } } // ──────────────────────────────── // 3. Change author text + add middle name // ──────────────────────────────── function changeAuthor() { if (!xmlDoc) { resetXML(); } const author = xmlDoc.querySelector("author"); if (author) { author.textContent = "James Clear & Team"; showCurrentXML(); console.log("Author changed"); } } // ──────────────────────────────── // 4. Change attribute + text of <price> // ──────────────────────────────── function changePriceCurrency() { if (!xmlDoc) { resetXML(); } const price = xmlDoc.querySelector("price"); if (price) { price.setAttribute("currency", "USD"); price.textContent = "14.99"; showCurrentXML(); console.log("Price & currency updated"); } } // ──────────────────────────────── // 5. Change attribute on root <book> // ──────────────────────────────── function changeBookId() { if (!xmlDoc) { resetXML(); } const book = xmlDoc.documentElement; if (book) { book.setAttribute("id", "BOOK-2025-001"); showCurrentXML(); console.log("Book ID changed"); } } // ──────────────────────────────── // 6. Add completely new element <discount> // ──────────────────────────────── function addNewElement() { if (!xmlDoc) { resetXML(); } const book = xmlDoc.documentElement; // Create new element const discount = xmlDoc.createElement("discount"); discount.textContent = "10% off until 31-Dec-2025"; // Add it as last child book.appendChild(discount); showCurrentXML(); console.log("New <discount> element added"); } // Load original XML on page load resetXML(); </script> </body> </html> |
What happens when you click the buttons?
- Reset → restores original XML
- Change title → only text inside <title> changes
- Change author → updates author name
- Change price → updates both text and currency attribute
- Change ID → changes attribute on root element
- Add discount → creates new element and adds it
Summary – Quick reference for changing values
| You want to change… | Starting node type | Recommended method | Example code line | Important notes |
|---|---|---|---|---|
| Text inside an element | Element | element.textContent = “new value” | title.textContent = “New Title” | Safest & most common |
| Direct text of a text node | Text node | textNode.nodeValue = “new text” | title.firstChild.nodeValue = “Updated” | Rarely needed |
| Attribute value | Element | element.setAttribute(“name”, “value”) | price.setAttribute(“currency”, “USD”) | Or element.currency = “USD” (for some attributes) |
| Remove attribute | Element | element.removeAttribute(“name”) | price.removeAttribute(“currency”) | Attribute disappears |
| Add new child element | Any parent element | parent.appendChild(newElement) | book.appendChild(discountElement) | Use createElement() first |
Would you like to go deeper into one of these next?
- How to change values in namespaced XML (very common in real data)
- Creating & inserting elements at specific positions (before/after certain nodes)
- Removing nodes safely while traversing
- Updating attributes conditionally (only if they exist)
- Real-world patterns — updating prices, changing statuses, adding new items in catalogs
- Debugging when changes don’t appear or XML breaks
Just tell me which direction you want to explore next! 😊
