javascriptで特定の要素の、子要素をすべて取得し、文字列をカットするというスクリプトを作りたいです。 しかし、子要素をうまく取得出来ないのでやり方を教えて下さい。
javascriptで特定の要素の、子要素をすべて取得し、文字列をカットするというスクリプトを作りたいです。 しかし、子要素をうまく取得出来ないのでやり方を教えて下さい。 以下の例でcontainer2内のtext2の２つを取りたいのです。 ただconsoleしてみるとループが一回しか回っていないようです。 element.innerHTMLとしても、テキストとして取得されるだけ、ノードとして取得しないようです？ この点どうしたらいいのでしょうか？ <body> <div class="container2"> <div id="text2"> テキスト２-1 </div> <div id="text2"> テキスト２-2 </div> </div> <div id="text2"> テキスト２-3 </div> <script> function textCutting(parentSelector){ let htmlcollection = document.querySelectorAll(parentSelector); let limited_number = 7; htmlcollection.forEach(function(element){ console.log(element); }); } textCutting(".container2"); </script> </body>
JavaScript・99閲覧
ベストアンサー
──────────────── 子要素をうまく取得出来ない ──────────────── 質問のコードを見る限り、 子要素を取得しようとしているコードがどこにも見当たらないんで、 取得できなくて当然かと。 子要素を取得したいなら、 子要素を取得するコードを書かないと取得できない。 関数 textCutting() の引数には、 親要素をマッチさせるセレクタ―文字列を与えて、 関数 textCutting() 内で、 その親要素内にある子要素のリストを取得して処理する、 というふうにしたいようなんで、 関数 textCuttinb() の中では、 まず引数 parentSelector を使って親要素のリストを取得、 ──────────────── document.querySelectorAll( parentSelector ) ──────────────── その親要素１つ１つに対して、 今度はその子要素リストを取得してループを回せばいい。 ──────────────── document.querySelectorAll( parentSelector ).forEach( parent => { Array.from( parent.children ).forEach( child => { console.log( child ); } ); } ); ──────────────── まとめると、全体は下記のようなコード。 ──────────────── <div class="container2"> <div class="text2"> テキスト２-1 </div> <div class="text2"> テキスト２-2 </div> </div> <div class="text2"> テキスト２-3 </div> <script> function textCutting( parentSelector ) { document.querySelectorAll( parentSelector ).forEach( parent => { Array.from( parent.children ).forEach( child => { console.log( child ); } ); } ); } textCutting(".container2"); </script> ────────────────
1人がナイス！しています
