zoukankan      html  css  js  c++  java
  • MutationObserver

    MutationObserver接口提供了监视对DOM树所做更改的能力。

    // 选择需要观察变动的节点
    const targetNode = document.getElementById('some-id');
    
    // 观察器的配置(需要观察什么变动)
    const config = { attributes: true, childList: true, subtree: true };
    
    // 当观察到变动时执行的回调函数
    const callback = function(mutationsList, observer) {
        // Use traditional 'for loops' for IE 11
        for(let mutation of mutationsList) {
            if (mutation.type === 'childList') {
                console.log('A child node has been added or removed.');
            }
            else if (mutation.type === 'attributes') {
                console.log('The ' + mutation.attributeName + ' attribute was modified.');
            }
        }
    };
    
    // 创建一个观察器实例并传入回调函数
    const observer = new MutationObserver(callback);
    
    // 以上述配置开始观察目标节点
    observer.observe(targetNode, config);
    
    // 之后,可停止观察
    observer.disconnect();
    

    mutationList的属性如下:

    type: 如果是属性发生变化,则返回attributes.如果是一个CharacterData节点发生变化,则返回characterData,如果是目标节点的某个子节点发生了变化,则返回childList.
    target: 返回此次变化影响到的节点,具体返回那种节点类型是根据type值的不同而不同的,如果type为attributes,则返回发生变化的属性节点所在的元素节点,如果type值为characterData,则返回发生变化的这个characterData节点.如果type为childList,则返回发生变化的子节点的父节点.
    addedNodes: 返回被添加的节点
    removedNodes: 返回被删除的节点
    previousSibling: 返回被添加或被删除的节点的前一个兄弟节点
    nextSibling: 返回被添加或被删除的节点的后一个兄弟节点
    attributeName: 返回变更属性的本地名称
    oldValue: 根据type值的不同,返回的值也会不同.如果type为attributes,则返回该属性变化之前的属性值.如果type为characterData,则返回该节点变化之前的文本数据.如果type为childList,则返回null
    

    config全部配置如下:

    childList: 设为true以监视目标节点(如果subtree为true,则包含子孙节点)添加或删除新的子节点。默认值为false。
    subtree: 设为true以扩展监视范围到目标节点下的整个子树的所有节点
    attributes: 设为true以观察受监视元素的属性值变更。默认值为false。
    attributeOldValue: 在attributes属性已经设为true的前提下,当监视节点的属性改动时,将此属性设为true 将记录任何有改动的属性的上一个值。
    attributeFilter: 要监视的特定属性名称的数组。如果未包含此属性,则对所有属性的更改都会触发变动通知。无默认值。
    characterData: 设为true以监视指定目标节点或子节点树中节点所包含的字符数据的变化。无默认值。(一种抽象接口,具体可以为文本节点,注释节点,以及处理指令节点)时,也要观察该节点的文本内容是否发生变化
    characterDataOldValue: 在characterData属性已经设为true的前提下,设为true以在文本在受监视节点上发生更改时记录节点文本的先前值
    

      

      

  • 相关阅读:
    django--模型层(orm)-查询补充及cookie
    django-模型层(model)-多表相关操作(图书管理练习)
    Linux-正则表达式与三剑客
    网络配置命令优先级和元字符
    Linux-Nginx和NFS
    Linux-内存进程和软件安装
    乌龟棋
    倍增 Tarjan 求LCA
    切蛋糕
    HDU1505 City Game/玉蟾宫/全0子矩阵 悬线法
  • 原文地址:https://www.cnblogs.com/chenmingxu/p/14252345.html
Copyright © 2011-2022 走看看