Einzelne Werte einer XML-Datei auslesen und in HTML-Seite einbinden?

[admin]

Habe den ganzen Kram mit Netzwerk und Localhost noch nie so gemacht. Aber ich konnte es jetzt testen und auf localhost testen.
So hat es bei mir geklappt, hoffe du kommst damit weiter

Code:

<main>
<label>Sensor 1</label>
<p>Val = <span id="reihe1_val1"></span></p>
<p>Val2 = <span id="reihe1_val2"></span></p>
<label>Sensor 2</label>
<p>Val = <span id="reihe2_val1"></span></p>
<p>Val2 = <span id="reihe2_val2"></span></p>
</main>
<script>
var r1v1=document.getElementById('reihe1_val1');
var r1v2=document.getElementById('reihe1_val2');
var r2v1=document.getElementById('reihe2_val1');
var r2v2=document.getElementById('reihe2_val2');

fetch ('http://127.0.0.1:8887/datei.xml', {  
}).then (function (response) {
console.log(response);
    return response.text();
})
.then (function (data) {
        console.log(data);
    let parser = new DOMParser (),
    xmlDoc = parser.parseFromString (data, 'text/xml');
        root=xmlDoc.getElementsByTagName ('root')[0];
//        r1v1.innerHTML=root.children[0].getAttribute('val');
//        r1v2.innerHTML=root.children[0].getAttribute('val2');
//        r2v1.innerHTML=root.children[1].getAttribute('val');
//        r2v2.innerHTML=root.children[1].getAttribute('val2');
            r1v1.innerHTML=root.getElementsByTagName('sns')[0].getAttribute('val');
            r1v2.innerHTML=root.getElementsByTagName('sns')[0].getAttribute('val2');
            r2v1.innerHTML=root.getElementsByTagName('sns')[1].getAttribute('val');
           r2v2.innerHTML=root.getElementsByTagName('sns')[1].getAttribute('val2');
}).catch (function (error) {
console.log ("Fehler: bei Auslesen der XML-Datei " + error);
});
</script>