투케이2K

533. (javaScript) [간단 소스] 자바스크립트 MutationObserver 사용해 실시간 textContent , innerText 텍스트 변경 감지 수행 본문

JavaScript

533. (javaScript) [간단 소스] 자바스크립트 MutationObserver 사용해 실시간 textContent , innerText 텍스트 변경 감지 수행

투케이2K 2026. 5. 19. 19:36
728x90
반응형

[개발 환경 설정]

​

개발 툴 : Edit++ / Vscode

​

개발 언어 : JavaScript

​

 

[소스 코드]

​

-----------------------------------------------------------------------------------------
[사전 설명 및 설정 사항]
-----------------------------------------------------------------------------------------

- 개발 환경 : Web


- 개발 기술 : 자바스크립트 / JavaScript / MutationObserver


- 사전) 👉 MutationObserver 를 사용할 수 있는 버전 간략 설명 :  

  >> Chrome : ✅ 26+

  >> Edge (Chromium) : ✅ 12+
  
  >> Firefox : ✅ 14+
  
  >> Safari : ✅ 6.1+
  
  >> Opera : ✅ 15+
  
  >> IE : ✅ 11

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[소스 코드]
-----------------------------------------------------------------------------------------

<!DOCTYPE HTML>
<html lang="ko" translate="no">
<head>
    <title>javaScriptTest</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 반응형 구조 만들기 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

    <!-- Chrome / Edge (Chromium)에서 자동 번역 기능을 완전히 비활성화 -->
    <meta name="google" content="notranslate">

    <!-- 내부 CSS 스타일 지정 -->
    <style>

      html, body {
        width: 100%;
        height: 100%;
        margin : 0 auto;
        padding : 0;
        border : none;
        background-color: #666;
      } 

    </style>





    <!-- [CDN 주소 설정] --> 
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>






    <!-- [자바스크립트 코드 지정] -->
    <script type="module">      

      // -----------------------------------------------------------------
      // ✅ [Window.onload 웹 브라우저 로드 완료]
      // -----------------------------------------------------------------
      window.onload = async function() {
        console.log("[window onload] : [html 최초 로드 및 이벤트 상시 대기 실시] : [start]");

        try {

          // ------------------------------------------------------
          // ✅ [MutationObserver 기본 설명 정리]
          // ------------------------------------------------------
          /*
          1. MutationObserver 는 👉 DOM의 구조/속성/텍스트 변경을 감지하는 API 입니다.
          ---------------------------------------------------------
          2. MutationObserver 는 특정 요소에 변화가 생기면 callback 이 실행됩니다.
          ---------------------------------------------------------
          3. MutationObserver 기본 동작 구조 : 
                    
          const observer = new MutationObserver(callback);
          observer.observe(target, options);
          ---------------------------------------------------------
          4. 동작 로그 출력 예시 

            MutationObserver : 지원됨
            initText :  Twok
            텍스트 변경 감지 :  textContent : 2k  /  innerText :  2k
            텍스트 변경 감지 :  textContent : 투케이  /  innerText :  투케이
          ---------------------------------------------------------
          // */    
          
          
          // [MutationObserver 지원 여부 체크]
          if ('MutationObserver' in window) {
            console.log('MutationObserver : 지원됨');

            // [MutationObserver 사용해 특정 객체 텍스트 변경 이벤트 감지]
            const target = document.getElementById('box');
            
            const observer = new MutationObserver(mutations => {
              console.log('텍스트 변경 감지 : ', 'textContent : ' + target.textContent, ' / ' ,'innerText : ', target.innerText);              
            });


            // [observer 에 특정 객체 매핑 수행]          
            observer.observe(target, {            
              childList: true,
              characterData: true,
              subtree: true
            });
            
            // observer.disconnect(); // 감지 해제


            // [현재 해당 객체 텍스트 확인]
            let initText = target.textContent;
            console.log('initText : ', initText);


            // [타이머 등록 후 일정 시간 후 텍스트 변경]
            setTimeout(() => {
              target.innerText = '2k';
            }, 2000);


            // [타이머 등록 후 일정 시간 후 텍스트 변경]
            setTimeout(() => {
              target.textContent = '투케이';
            }, 4000);


          } else {
            console.error('MutationObserver : 지원 안됨');
          }


        }
        catch (exception) {
          console.error("[window onload] : [Exception] : ❌ 예외 상황 발생 : ", exception);

        }

      };
      

    </script>


</head>


<body>

  <!-- 특정 div 객체 생성 -->
  <div id="box">Twok</div>

</body>

</html>

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[참고 사이트]
-----------------------------------------------------------------------------------------

▶️ [document 사용해 브라우저 사이즈 확인, 스타일 (style) 속성 값 확인 및 변경, 텍스트 (text) 값 확인 및 변경]

https://kkh0977.tistory.com/831

https://blog.naver.com/kkh0977/222389422173?trackingCode=blog_bloghome_searchlist


▶️ [Jquery 사용해 브라우저 사이즈 확인, 스타일 (style) 속성 값 확인 및 변경, 텍스트 (text) 값 확인 및 변경]

https://kkh0977.tistory.com/832

https://blog.naver.com/kkh0977/222389479461?trackingCode=blog_bloghome_searchlist


▶️ [자바스크립트 사용해 p 태그 텍스트 확인 및 변경 , css style 속성 변경 실시]

https://kkh0977.tistory.com/787

https://blog.naver.com/kkh0977/222378535016?trackingCode=blog_bloghome_searchlist

-----------------------------------------------------------------------------------------
 
728x90
반응형
저작자표시 (새창열림)

'JavaScript' 카테고리의 다른 글

535. (javaScript) [간단 소스] 자바스크립트 ms-word 스키마 호출을 통해 워드 앱 실행 및 파일 열기 수행 - open word scheme file  (0) 2026.05.20
534. (javaScript) [간단 소스] 자바스크립트 ms-excel 스키마 호출을 통해 엑셀 앱 실행 및 파일 열기 수행 - open excel scheme file  (0) 2026.05.20
532. (javaScript) [간단 소스] 자바스크립트 MutationObserver 사용해 실시간 특정 객체 css style 스타일 변경 감지 수행  (0) 2026.05.19
531. (javaScript) [간단 소스] 자바스크립트 ResizeObserver 사용해서 실시간 특정 객체 요소 크기 사이즈 변경 상태 감지 수행  (0) 2026.05.18
530. (javaScript) 자바스크립트 SweetAlert 라이브러리 사용해 input 입력 받기 팝업창 생성 및 유효성 검증 팝업창 재오픈 수행  (0) 2026.04.30
'JavaScript' Related Articles more
Comments