JavaScript Array.from

Question

下記ソースがあったとします
Array.from(document.querySelectorAll('div'), s => {
console.log(s.id);
});
で毎秒追加されたdivを読み来み、配列化しています
毎秒ごとにdiv0から追加された分まで表示しています
Array.from(document.querySelectorAll('div')を必ず使うことを条件として
追加された部分だけconsole.log(s.id)で表示する方法はないでしょうか？

<script>
var j=100;
window.onload=function(){
function b(){
for(i=0;i<j;i++){
div = document.createElement('div');
div.id="div"+i;
div.style.width = "200px";
div.style.height = "30px";
div.style.background="red";
document.body.appendChild(div);
}
j=j+20;
Array.from(document.querySelectorAll('div'), s => {
console.log(s.id);
});
setTimeout(b,1000);
}
b();
}
</script>

Comments

[yambejp]

具体的な動作を説明してください
無限にdivを増殖させるとブラクラになりかねません

[awea]

提示したソースだと無限となってしまいますが、3000くらいで止めてもいいです
20づつ追加していき、Array.fromを使い追加された分のdivのidをconsole.logに出したいです

[yambejp]

2巡目以降iが0から初期化されるのでidが競合します
Array.fromさえ使えばロジックも大幅に変えていいのですか？

[awea]

div.id="div"+iじゃなくてdiv.id="div"+jでした

Answer 1

こうでしょうか。

var x=[],j=100;

// ...

x = Array.from(document.querySelectorAll('div'), s => {
if (!x.includes(s)) console.log(s.id);
return s;
});

Comments

[awea]

まだ試せる環境にいないので後で確認させてください
パット見そのやり方でできるような気がしました
希望がもてました

[awea]

詳しい方のようなのでお聞きしたいんですが
divが30000個あったとして、
毎秒Array.from(document.querySelectorAll('div'), s => {
を実行することは相当な負荷が生まれますか？

[Lhankor_Mhy]

そっちよりも、毎秒でdivを生成して描画するコストの方が桁違いに高いと思います。

[awea]

無事動きました
ありがとうございます

Answer 2

追加されたことを感知したいならMutationObserverInitをご利用ください

sample

<script>
const loop=5;
const max=10;
let count=0;
let timerId;
let j=0;
window.addEventListener('DOMContentLoaded', ()=>{
  timerId=setInterval(()=>{
    for(let i=0;i<max;i++){
      div = document.createElement('div');
      div.id="div"+(i+j);
      div.style.width = "200px";
      div.style.height = "30px";
      div.style.background="red";
      document.body.appendChild(div);
    }
    j+=max;
    if(++count>=loop) clearInterval(timerId);
  },1000);
  const mo = new MutationObserver(function(r){
    Array.from(r,x=>console.log([...x.addedNodes].filter(y=>y instanceof HTMLElement)[0].id));
  });
  const opt = {
    childList:true,
    };
  mo.observe(document.body, opt);
});
</script>

ちなみにArray.fromにこだわりがなければこうした方がわかりやすいと思います

  const mo = new MutationObserver(function(r){
    console.log([...r].map(x=>[...x.addedNodes].filter(y=>y instanceof HTMLElement)[0].id));
  });

Comments

[awea]

ありがとうございます
参考にさせていただきます