大本はRide with GPSからダウンロードした.gpxをGarminのOregonやeTrexで読める.gpxに変換するというお話です。
詳しい解説、実際に必要な箇所をユーザーが編集して動かせるサンプル…… そもそも何故こんなことをすることになったかの経緯はTicketnoteに書いてあります。よかったらあわせてどうぞ。
https://ticketnote.dev/ticket/DUpAHv85tU3vuFNuKE3v
Qiitaなので手短に。
HTMLとJavaScriptだけでローカルのXML（今回は.gpx）を読み込んで、読み込んだ内容から新規のXMLを書き出すというサンプルです。
See the Pen 素のJavaScriptでローカルのXMLを読み込んで、新規のXMLを書き出す by Kaitou (@kaitou1192) on CodePen.
1.ローカルのファイルの取得
const setFile = (event) => {
const fileObject = event.target.files[0];
const rwgGpx = new FileReader();
rwgGpx.addEventListener('load', (event) => loadedFile(event));
rwgGpx.readAsText(fileObject);
}
inputFile.addEventListener('change', (event) => setFile(event));
FileReader()
https://developer.mozilla.org/ja/docs/Web/API/FileReader/FileReader
2.ファイルの中の文字列を取り出し、DOMとして扱えるように変換
//ファイル内の文字列の取り出し
const loadedGpx = event.target.result;
//DOM準備
const parser = new DOMParser();
const temporaryGpx = parser.parseFromString(loadedGpx, 'application/xml');
DOMParser.parseFromString()
https://developer.mozilla.org/en-US/docs/Web/API/DOMParser/parseFromString
3.DOMの操作
ここでは詳しくは書きませんが、この時点で temporaryGpx.documentElement としてあげればDOMツリーとして扱えるようになり、querySelector や getElementById とかでHTMLを操作するのと同じ感覚でできます。
具体的なサンプルが見たい方は、こちらの最後の方にあるので確認してください。
https://ticketnote.dev/ticket/q1zKjfMRReQpbml4tyGy
4.DOMから文字列に変換
文字列に変換というかシリアライズしてファイルに出力する準備をしています。
const outputGpx = new XMLSerializer();
let outputGpxText = outputGpx.serializeToString(temporaryGpx);
XMLSerializer
https://developer.mozilla.org/ja/docs/Web/API/XMLSerializer
5.blob経由でファイルに出力
先ほどのシリアライズしたものからblobを作成し、それをwindow.URL.createObjectURL経由でユーザーにダウンロードさせます。
const blob = new Blob([outputGpxText], {type: 'application/xml'});
//ファイルをダウンロードさせる
const a = document.createElement('a');
a.href = window.URL.createObjectURL(blob);
a.textContent = 'ダウンロード';
a.download = 'output.gpx';
download.appendChild(a);