<!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>
</body>
</html>
<script>
    /*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>