🧾 XML DOM Get Values – Extract Text and Attribute Data from XML

🧲 Introduction – Why Learn XML DOM Get Values?

Once you’ve loaded and navigated an XML document, the next step is to extract meaningful data—whether that’s the text inside elements or values of attributes. This process is called getting values from the XML DOM, and it’s one of the most essential tasks in XML parsing.

🎯 In this guide, you’ll learn:

• How to get text values from XML elements
• How to extract attribute values
• The difference between textContent, nodeValue, and getAttribute()
• Best practices and browser-safe techniques

---

📄 Sample XML

<book id="101">
  <title>Mastering XML</title>
  <author>Jane Doe</author>
</book>

---

📘 Accessing Element Text Content

✅ Using .textContent (Modern and preferred)

var title = xmlDoc.getElementsByTagName("title")[0].textContent;
console.log("Title:", title); // Mastering XML

✅ Using .firstChild.nodeValue (Legacy compatible)

var title = xmlDoc.getElementsByTagName("title")[0].firstChild.nodeValue;

📝 Use .textContent for cleaner and safer extraction.

---

🏷️ Accessing Attribute Values

var book = xmlDoc.getElementsByTagName("book")[0];
var bookId = book.getAttribute("id");
console.log("Book ID:", bookId); // 101

✅ Use .getAttribute("attrName") to access attribute values directly.

---

⚙️ Full Example – Get Element and Attribute Values

var xhr = new XMLHttpRequest();
xhr.open("GET", "book.xml", true);
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var xmlDoc = xhr.responseXML;

    var book = xmlDoc.getElementsByTagName("book")[0];
    var title = book.getElementsByTagName("title")[0].textContent;
    var author = book.getElementsByTagName("author")[0].textContent;
    var id = book.getAttribute("id");

    console.log(`Book [${id}]: "${title}" by ${author}`);
  }
};
xhr.send();

---

🔍 Comparing Value Access Methods

Method	Use Case	Returns
.textContent	Element inner text	String of combined text
.firstChild.nodeValue	Text node’s value	String (if node exists)
.getAttribute("name")	Attribute value	String or null
.attributes["name"].value	Alternate attribute access	String or undefined

---

❌ What to Avoid

var wrong = book.nodeValue; // returns null

⚠️ nodeValue is only valid for text and attribute nodes—not elements.

---

✅ Best Practices for Getting Values

• ✔️ Use .textContent for cleaner and modern XML access
• ✔️ Use .getAttribute() for reading attribute values
• ✔️ Always check if nodes exist (if (node)) before accessing [0]
• ✔️ Filter for nodeType === 1 when looping through children
• ❌ Don’t use nodeValue on element nodes—it returns null

---

📌 Summary – Recap & Next Steps

Getting values from the XML DOM is essential for transforming or displaying XML data. Whether you’re building dashboards, parsers, or forms, these techniques let you safely and cleanly extract what you need.

🔍 Key Takeaways:

• Use .textContent to get element values
• Use .getAttribute() to access attributes
• Avoid .nodeValue on elements—use it for text nodes only

⚙️ Real-world relevance: Used in RSS feed readers, form processors, XML validators, dashboards, and configuration panels.

---

❓ FAQs – XML DOM Get Values

❓ What’s the difference between textContent and nodeValue?
✅ textContent works on elements; nodeValue only works on text or attribute nodes.

❓ How do I get the value of an attribute?
✅ Use element.getAttribute("attrName").

❓ What happens if I use .nodeValue on an element?
✅ It returns null. Use .textContent instead.

❓ Can I use innerText instead of textContent?
✅ Avoid innerText—it’s for HTML and behaves inconsistently in XML.

❓ Do I need to check for firstChild when using nodeValue?
✅ Yes. Access .firstChild.nodeValue only if firstChild exists.

---

Share Now :