>

크롬 확장 프로그램의 content.js에서 DOM을 조작하고 있습니다. 불확실한 시간이 지나면 웹 페이지가 변경됩니다. 변경 사항을 모니터링하기 위해 몇 가지 코드를 작성하고 싶습니다. 즉, DOM이 변경된 것을 발견 한 후 무언가를하고 싶습니다. content.js에서 몇 초 또는 몇 초마다 DOM을 확인하는 방법이 있습니까? 나는 전에 이것을하지 않았다. 제안 해 주셔서 감사합니다.

  • 답변 # 1

    MutationObserver와 같이 우아하지 않은 다른 방법은 setInterval을 사용하여 코드를 주기적으로 실행하는 것입니다.

    setInterval(()=> {
     let d = document.querySelector('#el')
     if(d){
      console.log('dom manipulation')
     }
    },100)
    
    

    100ms마다 기능이 실행됩니다.

    간격을 멈추려면 setInterval의 반환 값을 변수에 저장해야합니다. 이 값을 전역 함수 clearInterval에 전달하여 간격을 중지합니다.

    let interval = null
    let domWorks = () => {
         let d = document.querySelector('#el')
         if(d){
          console.log('dom manipulation')
          clearInterval(interval) // Change it via reference
         }
    }
    interval = setInterval(domWorks, 100)
    
    

    간격을 캡슐화하고 어떤 조건이 참일 때 콜백을 실행하는 함수를 만들 수 있습니다 :

     const executeWhenItsReady = (testCondition, callbackToExecute) => {
          let interval = null;
          let tryToExecute = () => {
            let result = testCondition();
            console.log("trying again");
            if (result) {
              callbackToExecute();
              clearInterval(interval); // Change it via reference
            }
          };
          interval = setInterval(tryToExecute, 100);
        };
      executeWhenItsReady(
             () => document.querySelector("el"), 
             () => console.log("dom manipulation")
      );
    
    

관련 자료

  • 이전 bioinformatics - 바닐라 자바 ​​스크립트를 통해 ncbi에서 fasta 가져 오기
  • 다음 python - 캔버스 타원 항목을 상태 표시기로 사용하려고 시도