Q&A
「ターミナル」とはどこでしょうか？
前提・実現したいこと
HTMLのタグからgetElementsByClassNameをつかって取得できた値を配列に格納しようとしています。
具体的には
<li class="hoge">apple</li> <li class="hoge">orange</li> <li class="hoge">melon</li> <li class="hoge">watermelon</li>
を
['apple', 'orange', 'melon', 'watermelon']
としたいということです。
配列は、csvなどに書き出したいので、コマンド プロンプト（windows）などと同じ、ターミナル（Mac）などに表示させたいです。
発生している問題・エラーメッセージ
現在の出力
ブラウザ上ではelement.textContent += elements[0].outerHTML + "\n" ;を使って要素を取得できていることが確認できます。
apple orange melon watermelon
しかしながら、この状態から配列に格納してターミナルで確認するには、HTMLの状態ではむずかしいことは予想できるのですが、何をすればいいのか検索でも探すことができず、アプローチの仕方がわからず、困っている状態です。
該当のソースコード
Document.getElementsByClassName() - class属性から要素を取得するという記事のチュートリアル一部変えて行っています。
html
1<!DOCTYPE html> 2<html> 3<head> 4<style> 5 div#result { white-space: pre-wrap ; } 6</style> 7</head> 8<body> 9<ul> 10 <li class="hoge">apple</li> 11 <li class="hoge">orange</li> 12 <li class="hoge">melon</li> 13 <li class="hoge">watermelon</li> 14</ul> 15<hr> 16<div id="result"></div> 17<script> 18var element = document.getElementById( "result" ) ; 19var elements = document.getElementsByClassName( "hoge" ) ; 20 21console.log( elements ) ; 22element.textContent = elements + "\n\n" ; 23 24element.textContent += elements[0].outerHTML + "\n" ; 25element.textContent += elements[1].outerHTML + "\n" ; 26element.textContent += elements[2].outerHTML + "\n" ; 27element.textContent += elements[3].outerHTML + "\n" ; 28</script> 29</body> 30</html>
補足情報（FW/ツールのバージョンなど）
Mac OS
ご質問いただきましてありがとうございます。WindowsのコマンドプロンプトやMacのターミナルです。できれば配列をcsvなどのファイル書き出しをしたいと思っているので。
回答3件
0
コマンド プロンプト（windows）などと同じ、ターミナル（Mac）などに表示させたいです。
ブラウザ内のJavaScriptからOSサイドのターミナルを操作することは、通常できません。
「ブラウザ内でCSVを作成して、コピペ or ファイルダウンロードさせる」形を取るか、あるいは「コマンドラインで動くプログラムからHTMLを解釈する」のどちらかの流れになります。
投稿2020/11/17 12:05
総合スコア145184
0
javascript
1var res=[...document.getElementsByClassName('hoge')].map(x=>x.textContent); 2console.log(res);
投稿2020/11/17 08:56
総合スコア114843
0
ベストアンサー
elements が HTMLCollectionであり、それを数え上げていき配列に格納していく
js
1// 格納する配列 2var ar = []; 3for( var i=0; i < elements.length; i++) { 4 // テキストの部分を格納 5 ar.push(elements[i].innerText); 6} 7// console.log(ar);
あるいは割と新しめの書き方で
js
1console.log(Array.from(elements).map( (node) => node.innerText));
のように、Arrayに変換してからmapなどで加工すれば良いと思います。
ターミナルに、というのはこれを console.log() で出すということと理解しましたがあってますか。
投稿2020/11/17 07:42
総合スコア1292
あなたの回答
tips
プレビュー
