Die Daten in der Datei data.xml müssen irgendwie geladen werden. Dies
ist mit den fetch oder XMLHttpRequest APIs möglich. Zudem müssen die
Teile des Scripts, welche auf HTML elemente zugreifen, erst ausgeführt
werden, nachdem diese geladen wurden. Dazu kann man die Ausführung des
gesamten Scriptes zu dem Zeitpunkt verzögern, an welchem die ganze HTML
Datei geladen wurde, indem man das defer attribut des Script tags
verwendet. Ich habe deinen Code mal noch etwas Angepasst, siehe Anhang.
Ganz Ideal ist es aber noch nicht. Einige der APIs, wie z.B. die
DOMParser API funktionieren nur in relativ neuen Browsern. Das
eingelesene XML Document dient nur dem Speichern von Daten, aber auf
diese zuzugreifen ist relativ Umständlich. Eventuell würde es sinn
machen dieses in ein DTO oder POJO umzuwandeln, um einfacher mit den
Daten umgehen zu können, oder statt XML Json zu verwenden. Und falls die
GUI Complexer werden sollte könnten Templating Frameworks nützlich
werden.