javascriptで要素を常に監視する方法

Question

javascriptで要素が常にあるか確認しあったらalertを出力させるなどの処理をする方法はありますか？

Comments

[yambejp]

具体的になにをどう監視する想定でしょうか？

> あったらalert

動的に追加・削除されるのであれば、追加時にチェックするだけ。
常に確認する必要はないと思いますが？

[kotori2525]

要素のテキストを監視しあったら大文字にする的なことをしたいですね。

[yambejp]

input要素でしょうか？
「要素」と「テキスト」と「監視」をもう少し具体的に説明できますか？
静的なHTMLならロード時に一回だけ処理すればいいので常に監視する必要はないです

[kotori2525]

span要素です。例えで言うと、スペースボタンを押したらランダムな時間後にテキストが表示されてそれがあったら何か処理をする。ですかね。

Answer 1

とりあえずロード時にテキストを大文字にする

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const nodes=[...document.querySelectorAll('body,body *')].map(x=>[...x.childNodes].filter(x=>x.nodeType==3)).flat();
  nodes.forEach(node=>node.nodeValue=node.nodeValue.toUpperCase());
});
</script>
<div>
aaa
<span>bbb</span>
ccc
</div>

任意に書き換わる要素のテキストを監視

ノードを監視して変化したときに対応するならMutationObserverが一般的
ボタンをおすと1秒後にターゲットの文字が「hoge」に置き換わるが、監視をしているので大文字になるというサンプル

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  btn.addEventListener('click',()=>{
    setTimeout(()=>target.textContent="hoge",1000);
  });
  
  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      const txt=mutation.target.textContent;
      if(/[a-z]/.test(txt)){
        mutation.target.textContent=txt.toUpperCase();
      }
    });
  });
  const config = {childList:true,characterData :true,subtree :true};
  observer.observe(document.querySelector('#target'), config);
});
</script>
<span id="target">---</span>
<input type="button" value="btn" id="btn">

Comments

[kotori2525]

解決できました！ありがとうございます！

[kotori2525]

自分もそれは考えたんですが要素が存在しないときに発動するとエラーが起きてしまうので断念しましたね。

[yambejp]

なんかずっとぼんやりした質問に終始したので回答がしづらいかったです