<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link  type="text/css" rel="stylesheet" href="./main.css">
    <script src="https://unpkg.com/vue"></script>

    <title>Document</title>
</head>
<body>
<!--vue app是根容器-->
<div id="geyao">geyao</div>
<ul id="meng">
    <li>歌谣1</li>
    <li>歌谣2</li>
    <li>歌谣3</li>
</ul>
<div id="test">

</div>
</body>
</html>
<script type="text/javascript">
    const vm=new Vue({
        el:"#test",
        data:{
            name:'feifei',
        }
    })
    console.log(vm.name,vm)//feifei
    vm.name='xiaoxiao'//vm对data数据的操作
    console.log(vm._data.name,vm.name)//xiaoxiao

   /* /!*1[].slice.call(lis)*!/
    /!*伪数组 *!/
    const lis=document.getElementsByTagName('li')
    /!*判断数组  false*!/
    console.log(lis instanceof Array)
    /!*打印第一个信息 '歌谣2'*!/
    console.log(lis instanceof Array,lis[1].innerHTML)
    /!*for each  undefine*!/
    console.log(lis instanceof Array,lis[1].innerHTML,lis.forEach)
    /!**!/
    const lis2=Array.prototype.slice.call(lis)
    /!*true test*!/
    console.log(lis2 instanceof Array,lis2[1].innerHTML,lis2.forEach)

    /!*2node.type 的到节点类型*!/
    const elementNode= document.getElementById('geyao')
    const attrNode= elementNode.getAttributeNode('id')
    const textNode=elementNode.firstChild
    console.log(elementNode.nodeType,attrNode.nodeType,textNode.nodeType)

    /!*Object.defineProperty(obj,propertyName,{}) 对象添加属性*!/
    const obj={
        firstName:'A',
        lastName:'B'
    }
    /!*3给obj添加fullname属性*!/
    //obj.fullName='A-B'
    Object.defineProperty(obj,'fullName',{
        get(){
            return this.firstName+'-'+this.lastName
        },
        set(value) {
            const names=value.split('-')
                this.firstName=names[0]
            this.lastName=names[1]
        }

        /!*数据修饰符
        configurable 是否可以重新定义 enumrabl是否可以枚举
        * value 初始值 writeable 是否可以修改当前属性值
        访问修饰符
        * get回调函数 得到属性值 set 监视当前函数的调用 修改其他相关属性 *!/
    })
    console.log(obj.fullName)//A-B
    obj.firstName='C'
    obj.LastName='D'
    console.log(obj.fullName)//C-D
    obj.fullName="E-F"
    console.log(obj.firstName,obj.lastName)//E-F

    Object.defineProperty(obj,'fullName2',{
      configurable:false,
        enumerable:true,
        value:'G-H',
        writable:false
        /!*数据修饰符
        configurable 是否可以重新定义 enumrabl是否可以枚举
        * value 初始值 writeable 是否可以修改当前属性值
        访问修饰符
        * get回调函数 得到属性值 set 监视当前函数的调用 修改其他相关属性 *!/
    })
    console.log(obj.fullName2)
    obj.fullName2='J-K'
    console.log(obj.fullName2)

    /!*4obj.keys(obj)* 得到对象自身可枚举的组成的数组/

     *!/
    const names=Object.keys(obj)
    console.log(names)

    /!*obj.h 判断prop是否是自身属性*!/
    //obj.hasOwnProperty(prop)
    //true false
    console.log(obj.hasOwnProperty('fullNmae'),
        obj.hasOwnProperty('toString'))
    /!*6DocumentFragment*!/
    /!*document的元素改变页面就会改变*!/
    /!*6DocumentFragment 创建一个容器 改变的的时候 页面的元素不变*!/
   const ul=document.getElementById('meng')

    /!*创建fragment*!/
    const fragment=document.createDocumentFragment()
    /!*去除所有节点到fragment*!/
    let child
    while (child=ul.firstChild){
        /!*死循环 一个节点只能有一个父亲*!/
        /!*先将child从ul里面移除 然后在添加fragment里面*!/
        fragment.append(child)
    }
    /!*更新fragment里面的节点*!/
    Array.prototype.slice.call(fragment.childNodes).forEach(node=>{
        if(node.nodeType==1){
            node.textContent="atguigu"
        }
    })
    /!*fragment插入*!/
    ul.appendChild(fragment)*/
</script>

运行结果