Q&A
コード全体を提示してください。
起こっていること
現在は for(i = 0; i < class.length; i++){...} で回しているのですが、
lengthの大きさが150以上にならず、その時点で止まってしまいます。(HTMLcollectionの仕様？)
そこで一括で特定のclass名をもつ要素を指定する方法ってありませんか？
ちなみにやりたいことはそのclass名を持つ要素をinnerHTMLして書き換えることです。
javascript
1 const author_name = document.getElementsByClassName("chat-author__display-name"); 2 3 const author_array = function(){ 4 if(j < author_name.length){ 5 author_name[j].innerHTML = "ﾃｽﾄ"; 6 console.log(author_name.length); 7 j++; 8 } 9 } 10 11 setInterval(author_array,10);
> lengthの大きさが150以上にならず、その時点で止まってしまいます。(HTMLcollectionの仕様？)
検証可能なコードを掲載してください。
追加しました。よろしくお願いします。
あとすみません！
ちょっと書き換えちゃったんですけど、動作自体は全く同じです！
setIntervalはどういう意図で使用されているのでしょうか。「特定のclassをもつ要素をすべて指定したい」との関連性がつかめません。
author_nameは生放送のコメント欄に表示される名前を取得しているのですけど、常に増加していくのでそれを監視するために使っています。
10にしている理由も流れが速いときに遅れないようにするためです。
いつどこでどのようなデータを処理しているか、が無いと回答できないと思います。より具体的に記述してください。（何らかのページ上でデベロッパーツールで内容確認しているのであれば、単純にそのページ上に生成されるデータが150件までの可能性もあります）
twitchというサイト内で毎秒流れてくるコメント(をしている人の名前)を取得しinnerHTMLで書き換えたいです。
それと値が150になって増えなくなっても chat-author__display-name をもつクラスが生成されたいるのでデータ数が150になったら生成が止まるということはないと思います。
回答3件
0
ベストアンサー
そもそもですが、
author_nameは
document.getElementsByClassName("chat-author__display-name");
を取得していますが、
html内に当該Classは150以上存在しているのでしょうか？
単純にhtml内に当該Classが150存在しているだけで、
毎回150になるだけなのではないでしょうか？
投稿2021/02/02 16:02
総合スコア404
author_nameは生放送のコメント欄に表示される名前を指定していて、いつもjの値をコンソールで確認すると0から始まって150で止まるので、多分150以上はあると思います。
>多分150以上はあると思います。
システム開発で多分は厳禁です。
一度、document内のhtmlをログなどに出力し、
chat-author__display-name
のClassが150より多いかを確認してみてはいかがでしょうか？
html側の仕組み/制限等で最大150になっている可能性も
ゼロではないと思います。
150になって値が増えなくなってもchat-author__display-nameのClassが生成されていたので150以上あると思います。
もしhtml側の仕様が原因だとしたらこちらからはどうしようもないという感じですかね？
すみません。
仕様の確認をさせてください。
>150になって値が増えなくなっても >chat-author__display-nameのClassが生成されていたので
>150以上あると思います
setIntervalで定期的に処理をしている間に、
JQueryなどを用いて、リアルタイムにhtmlが変化しているのでしょうか？
それであれば、プログラムがおかしいと思います。
恐らく、
const author_name = document.getElementsByClassName("chat-author__display-name");
が1回しかコールされないのが原因ではないでしょうか？
author_arrayのfunctionは、
setIntervalにより定期的にコールされますが、
author_nameは、始めに取得したものを
使い回しているように見えます。
functionの中で、最新の
author__display-nameのClass
の数を取り直すべきではないでしょうか？
デベロッパーツールで直接確認しました。
新規コメントが増えるごとに chat-author__display-name が増えていったので間違いないと思います。
それとfunctionのなかに
const author_name = document.getElementsByClassName("chat-author__display-name");
を入れてみましたが、やはり150で止まってしまいました...
>新規コメントが増えるごとに chat-author__display-name が増えていったので
ここが少し気になります。
twitchを使ったことがないのでなんとも言えないのですが、
新しいコメントが増える度に古いコメントが消えて、
最大で150件までしか表示しない仕様なのではないでしょうか？
それであれば、functionの中で取り直してもlengthは常時150件にしかならないと思います。
その通りでした...
150で止まってから確認すると古いコメントが消えていっていました。
もういちど作り直してみます。
本当にありがとうございました！
twitch側の仕様のため、どうにもならない可能性はありますが、
取り急ぎ、解決されて良かったです。
今回のご質問は解決したと思いますので、
解決済みへ変更いただけますよう、
よろしくお願いします。
0
問題が再現しませんでした。
ですので、HTMLcollectionの仕様ではなく、そのサイト特有の何かがあるのでしょう。
提案ですが、MutationObserver をお試しになってはいかがでしょうか。
MutationObserver - Web API | MDN
投稿2021/02/03 01:32
総合スコア36960
調べてみましたがすごくいいですね！
あとちょっと聞きたんですけどclassでも指定できるんでしょうか？
どこのサイトもidで指定していたので...
要素が追加される大本の親要素を監視して、その追加された子要素に対して何かをする、という書き方がいいと思いますよ。
誤読したかもしれません。
MutationObserver.observer の引数に複数の要素を持てるか、というご質問でしたら、できません。
ですので、繰り返し処理をする必要があります。
わかりました！
色々試してみますね！
本当に助かります！
0
setInterval内で監視するならauthor_array関数のなかで
if(j < document.getElementsByClassName("chat-author__display-name").length){
としてカウントしないと意味がないでしょう
また唐突にでてくるjも使い方が変です
投稿2021/02/03 00:15
総合スコア116724
> HTML DOM 内の HTMLCollection は生きて (live) います。それらは元になった document が変更された時点で自動的に更新されます。
https://developer.mozilla.org/ja/docs/Web/API/HTMLCollection
とのことですので、jが初期化されていればコード自体は動作するものだと思います。
あ、HTMLCollectionでしたね。失礼しました
あなたの回答
tips
プレビュー
