MutationObserver

by hohoya33

HTML

<h1>다국어 변경 Callback Demo</h1>

<div id="google_translate_element"></div>



<h2>감시 엘리먼트</h2>
<span id="transObserver" data-default-txt="언어 번역">언어 번역</span>


<script type="text/javascript">
function googleTranslateElementInit() {
	new google.translate.TranslateElement({
		pageLanguage: 'ko',
		includedLanguages: 'en,ko,zh-CN,ja',
		autoDisplay: false
	}, 'google_translate_element');
}
</script>

<script type="text/javascript" src="https://translate.google.co.kr/translate_a/element.js?cb=googleTranslateElementInit"></script>

JavaScript

var callback = (mutations, observer) => {
        var newValue;
        var oldValue;
        var language;
        
	mutations.forEach(mutation => {
		console.log(mutation);
    
    
            if (mutation.type === 'childList' && mutation.addedNodes.length) {
                newValue = mutation.target.innerText;
                oldValue = mutation.target.getAttribute('data-default-txt');

                console.log('newValue', newValue);
                console.log('oldValue', oldValue)

                if (newValue !== oldValue) {

                    language = $("select.goog-te-combo option:selected").text();
    								alert('Language Change:::: ' + language);

                } else if (newValue == oldValue) {
    								alert('change:::: 한국어');
                    if (document.documentElement.lang === 'ko') {
                        
                    }
                }
            }
            
	});
};


// MutationObserver 인스턴스 만들기
var observer = new MutationObserver(callback);

// 감시할 DOM 요소

var target = document.getElementById('transObserver');

// 감시할 내용 옵션
var config = {
    //characterData: true,
    childList: true,
    //subtree: true,
    //characterDataOldValue: true
};

// 모니터링 시작
observer.observe(target, config);