<!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>
    <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)
</script>