zoukankan      html  css  js  c++  java
  • 监听属性改变defineProperty和文档碎片createDocumentFragment

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>ll</title>
    </head>
    <body>
    <div id="el">
      <div>xxx</div>
      <div>yyy</div>
    </div>
    <script>
      const obj = {aaa: 111};
      Object.defineProperty(obj, 'aaa', {
        // value: 222,//不可与getter/setter同时使用
        // writable: true,//属性不是对象的初始属性,默认false,否则默认为true,不可重新赋值,不可与getter/setter同时使用
        // configurable: true,//默认false,属性不可被删除(浏览器严格模式下delete属性会报错)
        // enumerable: true,//属性不是对象的初始属性,默认false,否则默认为true,不可被枚举
        get() {
          return value
        },
        set(newValue) {
          console.log('赋值时会运行')
          value = newValue
        }
      });
      obj.aaa = 333
      console.log(obj)
      console.log(Object.keys(obj))
    
      var el = document.getElementById('el')
      var df = document.createDocumentFragment()
      let child = null
      while (child = el.firstChild) {
        df.appendChild(child)
      }
      df.childNodes.forEach(li => {
        if (li.nodeType === 1) {//元素节点
          li.innerText = new Date().getTime()
        } else if (li.nodeType === 3) {//文本节点
        } else {
        }
      })
      el.appendChild(df)
    </script>
    </body>
    </html>
  • 相关阅读:
    SQL一条语句统计记录总数及各状态数
    火狐登录国际账户
    HTML基础笔记
    增强for、lambda for、stream 遍历List 结束方法 or 跳过循环本次循环
    nginx
    前端问题总结
    Node.js
    Actuator
    ssh免密登录实现及Python实现
    【Mac渗透测试】之SQL注入Demo
  • 原文地址:https://www.cnblogs.com/linding/p/14481837.html
Copyright © 2011-2022 走看看