三个点语法和DOM观察者

Posted 2022-08-07 勇敢*牛牛

三个点语法和DOM观察者

var arr=[1,2,3,4];
var arr1=[...arr];
console.log(arr1)// [1, 2, 3, 4]

var arr=[1,2,3,4];
var arr1=[0,...arr,5,6];
console.log(arr1)//[0, 1, 2, 3, 4, 5, 6]

…arr 是剩余的参数

function fn(a,b,...arg)
	console.log(a,b,arg)


fn(1,2,3,4,5,6);1 2 (4) [3, 4, 5, 6]

扩展对象键值对

var o=a:1,b:2,c:3;
var o1=e:5,...o;
console.log(o1)//e: 5, a: 1, b: 2, c: 3
复制一个对象
Object.assign(,a:1,b:2);

DOM观察者

new MutationObserver(回调函数)
回调函数 有两个参数，一个mutationList观察变化的列表 observer 观察者

var div=document.querySelector("div");  

var  observer= new MutationObserver(function(mutationList,observer)
    console.log(mutationList)
    for(var i=0;i<mutationList.length;i++)
        console.log(mutationList[i].oldValue)
    
    // attributeName: "cd" 修改的标签属性
    // type: "attributes" 变化的类型  attributes 标签属性变化  childList 子元素列表变化
    // addedNodes: 增加的元素列表
    // removedNodes  删除的元素列表
    // target: span 目标元素
    // oldValue: null 原来的值
)
根据上面创建的观察者实现观察，观察div的变化
observer.observe(div,
    attributes:true,//标签属性
    childList:true,//子元素列表
    subtree:true//子树
)


div.setAttribute("ab","3");

div.firstElementChild.setAttribute("cd","3")
div.firstElementChild.textContent="abc"

var span=document.createElement("span");
div.firstElementChild.appendChild(span);
span.remove();

div.lastElementChild.value="10"
div.lastElementChild.setAttribute("value","10")

observer.disconnect(); 停止观察