JavaScriptのxhrで取得したものから属性値を抽出したいのですが
方法がよくわかりません。
<form name="f">
<input type="text" name="t" onkeyup="s()">
</form>
<script async defer>
function s() {
v = document.f.t.value;
var x = new XMLHttpRequest();
x.addEventListener('load',function(ev) {
document.getElementById('r').textContent = x.response;
});
x.open('GET','/complete?q=' + v);
x.send();
}
</script>
<p id="r"></p>
というソースコードでテキストフォームに例えば「あ」と入力すると
<?xml version="1.0"?>
<toplevel>
<CompleteSuggestion>
<suggestion data="アマゾン"/>
</CompleteSuggestion>
<CompleteSuggestion>
<suggestion data="明日の天気"/>
</CompleteSuggestion>
<CompleteSuggestion>
<suggestion data="アニメ"/>
</CompleteSuggestion>
<CompleteSuggestion>
<suggestion data="アニポ"/>
</CompleteSuggestion>
<CompleteSuggestion>
<suggestion data="アイコス"/>
</CompleteSuggestion>
<CompleteSuggestion>
<suggestion data="あ"/>
</CompleteSuggestion>
<CompleteSuggestion>
<suggestion data="嵐"/>
</CompleteSuggestion>
<CompleteSuggestion>
<suggestion data="アンパンマン"/>
</CompleteSuggestion>
<CompleteSuggestion>
<suggestion data="アスクル"/>
</CompleteSuggestion>
<CompleteSuggestion>
<suggestion data="青空エール"/>
</CompleteSuggestion>
</toplevel>
このように表示されるのですがdata属性の値を抽出してforeachのようなことを行いたいです。
お手数をおかけしますが、方法を教えて頂けるとありがたいです。
追加の希望で恐縮ですがjQueryなどライブラリーを使用しない方法を提示してください。