xhrで取得したxmlを解析する

Question

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>

というソースコードでテキストフォームに例えばaと入力すると

<?xml version="1.0"?><toplevel><CompleteSuggestion><suggestion data="akb48"/></CompleteSuggestion><CompleteSuggestion><suggestion data="akb"/></CompleteSuggestion><CompleteSuggestion><suggestion data="akb 総選挙"/></CompleteSuggestion><CompleteSuggestion><suggestion data="アマゾン"/></CompleteSuggestion><CompleteSuggestion><suggestion data="暗殺教室"/></CompleteSuggestion><CompleteSuggestion><suggestion data="au"/></CompleteSuggestion><CompleteSuggestion><suggestion data="ana"/></CompleteSuggestion><CompleteSuggestion><suggestion data="アニメ"/></CompleteSuggestion><CompleteSuggestion><suggestion data="明日の天気"/></CompleteSuggestion><CompleteSuggestion><suggestion data="アイコス"/></CompleteSuggestion></toplevel>

このように表示されるのですがdata属性の値を抽出してforeachのようなことを行いたいです。
お手数をおかけしますが、方法を教えて頂けるとありがたいです。

Comments

[kei344]

コードと出力結果はそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。

[BUILDIT]

コードブロックで囲めませんでしたので改行を増やしました。

<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>

[kei344]

質問文は編集できますよ？ 編集画面にてコード部分を選択し、「</>」ボタンを押すとコード前後にバッククオートが挿入されますよ。

[kei344]

また、解答欄も同じく編集＆コードブロックが使用可能ですよ。

[kei344]

というか、アカウントが違うようですが、別の方でしょうか。

[kei344]

To: xhr 「BUILDIT 」というアカウントはサブアカウントですか？返信には質問されたアカウントで行ってください。

[BUILDIT]

コードブロックに関してはモバイルでもUAを変更するなどすれば同様に行えますか。現環境では</>ボタンが表示されません。
また、私が無知なものですから同一のアカウントで返信しなければならないということがわかりませんでした。
最初に使用したアカウントは凍結されましたのでこのアカウントの使用を認めて頂けると幸いです。

[kei344]

コードブロックに関してはモバイルでもUAの偽装をすることなく出来ると思いますよ。「アカウントは凍結されました」とありますが、何か重要な違反でもされたのでしょうか。どちらにせよ別アカウントを使っているとこの質問を終了できませんので、凍結を解除してもらえるように運営に連絡されてはいかがでしょう。

Answer 1

jQueryを使えば簡単です。

// xmlをjQueryでパースする。
var xml = $('<?xml version="1.0"?><toplevel><CompleteSuggestion><suggestion data="akb48"/></CompleteSuggestion><CompleteSuggestion><suggestion data="akb"/></CompleteSuggestion><CompleteSuggestion><suggestion data="akb 総選挙"/></CompleteSuggestion><CompleteSuggestion><suggestion data="アマゾン"/></CompleteSuggestion><CompleteSuggestion><suggestion data="暗殺教室"/></CompleteSuggestion><CompleteSuggestion><suggestion data="au"/></CompleteSuggestion><CompleteSuggestion><suggestion data="ana"/></CompleteSuggestion><CompleteSuggestion><suggestion data="アニメ"/></CompleteSuggestion><CompleteSuggestion><suggestion data="明日の天気"/></CompleteSuggestion><CompleteSuggestion><suggestion data="アイコス"/></CompleteSuggestion></toplevel>');
// jQueryオブジェクトの中から該当エレメントをセレクタで探す
var suggestions = $("CompleteSuggestion suggestion", xml);

for(var i=0;i<suggestions.length;i++) {
	// attrでdataを取り出す。
	var data = $(suggestions[i]).attr("data");
}

Comments

[BUILDIT]

ご回答ありがとうございます。
これで解決できそうです。
jQueryを使わない方法もありますか。

[masaya_ohashi]

DOMParserでxmlからdocumentElementを取得し、getElementsByTagNameを使えば行けるかもしれません。試したことはないですが。
http://hakuhin.jp/js/dom_parser.html
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByTagName

[BUILDIT]

感謝します

Answer 2

<?xml version="1.0"?> <toplevel> <CompleteSuggestion> <suggestion data="akb48"/> </CompleteSuggestion> <CompleteSuggestion> <suggestion data="akb"/> </CompleteSuggestion> <CompleteSuggestion> <suggestion data="akb 総選挙"/> </CompleteSuggestion> <CompleteSuggestion> <suggestion data="アマゾン"/> </CompleteSuggestion> <CompleteSuggestion> <suggestion data="暗殺教室"/> </CompleteSuggestion> <CompleteSuggestion> <suggestion data="au"/> </CompleteSuggestion> <CompleteSuggestion> <suggestion data="ana"/> </CompleteSuggestion> <CompleteSuggestion> <suggestion data="アニメ"/> </CompleteSuggestion> <CompleteSuggestion> <suggestion data="明日の天気"/> </CompleteSuggestion> <CompleteSuggestion> <suggestion data="アイコス"/> </CompleteSuggestion> </toplevel>