Javascript: how to find child nodes by element name instead of XML tree position?

Question

I have a working example. Currently, I'm finding the child node values by their supposed position in the node tree, but because sometimes there are missing nodes, this method doesn't work flawlessly. What's the simplest way to find the child nodes by the element name instead of XML tree position?

 var n = document.getElementById("myInputId"); n.addEventListener("keyup", function(event) { event.preventDefault(); if (event.keyCode === 13) { document.getElementById("myButton").click(); } }); function testResults() { const { value } = myInputId; const foundState = [...xmlDoc.querySelectorAll('STATE')] .find(possibleMatch => possibleMatch.textContent === value); const unit = foundState.parentElement; console.log(unit.innerHTML); document.getElementById("stateNode").innerHTML = unit.children[0].textContent; document.getElementById("gdpNode").innerHTML = unit.children[1].textContent; document.getElementById("populationNode").innerHTML = unit.children[2].textContent; /*how can I find a node based on its name rather than position in the XML tree?*/ document.getElementById("codeNode").innerHTML = unit.children[3].textContent; } var parser, xmlDoc, x, i; var text = "<STATE_DATA>" + "<UNIT>" + "<STATE>Wisconsin</STATE>" + "<GDP>232,300,000,000</GDP>" + "<POPULATION>5,800,000</POPULATION>" + "<CODE>WI</CODE>" + "</UNIT>" + "<UNIT>" + "<STATE>Alabama</STATE>" + "<GDP>165,800,000,000</GDP>" + "<POPULATION>4,900,000</POPULATION>" + "<CODE>AL</CODE>" + "</UNIT>" + "<UNIT>" + "<STATE>California</STATE>" + /*California is missing the GDP node*/ "<POPULATION>39,600,000</POPULATION>" + "<CODE>CA</CODE>" + "</UNIT>" + "<UNIT>" + "<STATE>Texas</STATE>" + "<GDP>1,600,000,000,000</GDP>" + "<POPULATION>28,300,000</POPULATION>" + "<CODE>TX</CODE>" + "</UNIT>" + "<UNIT>" + "<STATE>Michigan</STATE>" + "<GDP>382,000,000</GDP>" + "<POPULATION>10,000,000</POPULATION>" + "<CODE>MI</CODE>" + "</UNIT>" + "</STATE_DATA>"; parser = new DOMParser(); xmlDoc = parser.parseFromString(text, "text/xml"); 

 <input list="myInput" id="myInputId" value=""> <button id="myButton" onClick="testResults()">submit</button> <datalist id="myInput"> <option id="AL">Alabama</option> <option id="CA">California</option> <option id="MI">Michigan</option> <option id="TX">Texas</option> <option id="WI">Wisconsin</option> </datalist> <p>State node: <span id="stateNode"></span></p> <p>GDP node: <span id="gdpNode"></span></p> <p>Population node: <span id="populationNode"></span></p> <p>Code node: <span id="codeNode"></span></p> 

Answer 1

As you've discovered, using node position isn't generally a reliable approach. Depending on the size of your XML structure I'd recommend use a sub- querySelector from the Unit node:

You already have the UNIT node ( const unit = foundState.parentElement; ) , so just set up something like this:

   var ustate = unit.querySelector('STATE') ? unit.querySelector('STATE').textContent: "Not Found";
   var ugdp = unit.querySelector('GDP') ? unit.querySelector('GDP').textContent: "Not Found";
...

Then update your HTML:

  document.getElementById("stateNode").innerHTML =    ustate ;
  document.getElementById("gdpNode").innerHTML = ugdp ;