如何识别单个MutationObserver监听多个元素时的触发源

方案1：直接比对已存储的元素节点 #

你已经提前把分钟、秒对应的DOM元素存储到了minutes和seconds变量中，由于你开启了subtree: true配置，突变的target可能是目标元素的子文本节点，因此可以用Node.contains()方法判断突变归属：

var seconds = document.getElementsByClassName('sr-lmt-0-ms-countdown__time srt-primary-7 srm-large')[2];
var minutes = document.getElementsByClassName('sr-lmt-0-ms-countdown__time srt-primary-7 srm-large')[3];

var callback = function(mutations) {
    for (var mutation of mutations) {
        if (minutes.contains(mutation.target)) {
            console.log('分钟元素触发突变', mutation);
        } else if (seconds.contains(mutation.target)) {
            console.log('秒数元素触发突变', mutation);
        }
    }
};

var observer = new MutationObserver(callback);
var config = {characterData: true, subtree: true};

observer.observe(minutes, config);
observer.observe(seconds, config);

方案2：添加自定义标识属性（更适合多元素监听场景） #

如果后续需要扩展监听更多元素，逐个比对变量效率较低，可以提前给目标元素添加自定义属性，直接读取属性即可区分：

var seconds = document.getElementsByClassName('sr-lmt-0-ms-countdown__time srt-primary-7 srm-large')[2];
var minutes = document.getElementsByClassName('sr-lmt-0-ms-countdown__time srt-primary-7 srm-large')[3];

// 给目标元素添加自定义标识
seconds.dataset.observeTarget = 'seconds';
minutes.dataset.observeTarget = 'minutes';

var callback = function(mutations) {
    for (var mutation of mutations) {
        // 向上查找最近的带监听标识的父元素
        const targetElement = mutation.target.closest('[data-observe-target]');
        if (!targetElement) return;
        console.log(`${targetElement.dataset.observeTarget}元素触发突变`, mutation);
    }
};

var observer = new MutationObserver(callback);
var config = {characterData: true, subtree: true};

observer.observe(minutes, config);
observer.observe(seconds, config);

内容的提问来源于stack exchange，提问作者HJA24