簡體   English   中英

Mutation Observer 觀察其子元素發生變化的父 DOM 元素

[英]Mutation Observer to observe parent DOM Element whose childs are changing

我正致力於從一個數據處於突變 state 中的網站獲取一些數據。我想觀察表格行上出現的每一個變化。 我已將我的突變觀察器附加到行正在更改的表體。 由於每個更改都出現在表格列上,因此我的代碼只給我正在更改的列,而我需要一個列正在更改的表格行。 我無法獲取那個變異的行。 請告訴我是什么變化讓我從表體中讀取了一個變異的行。

$( window ).ready(function() {

    // Select the node that will be observed for mutations
    let tableBody = document.getElementById('wtbl8bb9e9b5-1b29-4f8d-909f-2837b994bfc7').children[1];

    // Options for the observer (which mutations to observe)

    let options = {
        childList: true,
        attributes: false,
        characterData: false,
        subtree: true,
        attributeOldValue: false,
        characterDataOldValue: false
    };


    //Callback function to execute when mutations are observed
    let callback = function(mutationsList, observer) {

    for(const mutation of mutationsList) {
        console.log("MutationRecord: "+MutationRecord);
        if (mutation.type === 'childList') {
                    console.log(mutation.target);
                    console.log(mutation)
                    console.log('A child node has been added or removed.');
                    console.log(mutation.addedNodes);
                    mutation.addedNodes.forEach(function(added_node) {
                        //if(added_node.id == 'child') {
                            console.log('#child has been added');
                            console.log(added_node);
                        });
        }
        else if (mutation.type === 'attributes') {
            console.log('The ' + mutation.attributeName + ' attribute was modified.');
        }
    }
};

// Create an observer instance linked to the callback function
let observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(tableBody, options);

});

mutation部分是.target.target父部分是.parentNode

mutation.target.parentNode;

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM