JM Development Diary 개발 일기

html input 태그가 아닌 div 나 span 등 태그의 text 가 변경될 때 감지하고 싶은 경우에는

MutationObserver 라는 DOM(Document Object Model)의 변경 사항을 감지하고

이벤트 처리를 위한 웹 브라우저의 DOM API를 활용하여 구현할 수 있다.

<!DOCTYPE html>
<html>
<head>
  <title>MutationObserver</title>
</head>
<body>
  <div id="targetEl">
    <p><span id="textEl">기존 텍스트</span></p>
  </div>
  <button id="changeText">텍스트 변경 버튼</button>

  <script>
  
    // 순수 자바스크립트 방식
  
    const targetEl = document.getElementById('targetEl'); // 감시할 대상
	
    // MutationObserver를 생성
    const observer = new MutationObserver(function(mutations) {
    	mutations.forEach(function(mutation) {
        	if(mutation.type === 'childList') {
          		mutation.addedNodes.forEach(function(node) {
       	  			console.log('감시하는 요소의 변경 text : ' + node.textContent.trim());
          			// 감시 대상의 텍스트 변화를 감지한 뒤 실행할 로직...
         		});
        	}
      	});
    });

    // MutationObserver를 감시할 대상 요소에 연결
    observer.observe(targetEl, { childList: true, subtree: true });
    // subtree 속성 : true => 감시 대상 자신 포함 자손의 변경 사항 감지
    // subtree 속성 : false => 감시 대상 자신의 변경 사항만 감지

    const changeTextButton = document.getElementById('changeText'); // 텍스트 변경 버튼
    
    const textEl = document.getElementById('textEl'); // 감시할 대상
    
    // 버튼 클릭 시 텍스트 변경
    changeTextButton.addEventListener('click', function() {
    	textEl.textContent = '변경된 텍스트';
    });
    
  </script>
</body>
</html>

↓ '텍스트 변경 버튼' 클릭 후

저작자표시

'JavaScript' 카테고리의 다른 글

JSP <script></script> 스크립트 영역에서 백틱 (템플릿 리터럴) `${변수}` 사용 (0)	2023.11.04
JS 호이스팅 / JavaScript Hoisting 자바스크립트 호이스팅 (0)	2023.09.03
jQuery 제이쿼리 .eq() 메서드 => 순수 JavaScript (바닐라JS) 방식으로 대체 (0)	2023.08.12
JS .map() / JavaScript .map() / 자바스크립트 배열 메서드 / 자바스크립트 .map() 메서드 (0)	2023.07.23
JS / JavaScript function / 자바스크립트 함수 매개변수 기본값 설정 (0)	2023.07.16