webApi第四天

数组和为数组

都可以使用for循环

伪数组不支持很多好用的方法如：

filiter，map，some，every，find，findindex，reduce等

使用document.querySelectorAll获取伪数组

创建文本节点

语法：

document.createTextNode

<script>
      // 创建元素节点 使用 document.createTextNode
      let text = document.createTextNode('六一');
      //在body插入新建的文本节点
      document.body.appendChild(text);
</script>

插入节点

appendChild 只能插入一个元素

append 插入多个元素

insertBefore 插入在某个元素前面+

克隆节点

cloneNode

浅克隆 cloneNode()或cloneNode(false)

深克隆 cloneNode(true) 深克隆（会把被克隆节点的后代节点一起克隆）

语法：

元素.cloneNode(布尔值)

<style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .box {
            width: 150px;
            height: 150px;
            background-color: orange;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div class="box">
        <span>六一</span>
    </div>

    <script>
        //获得要克隆的节点
        let divDom = document.querySelector('.box');

        // let newbox = divDom.cloneNode(); 浅克隆 
        let newbox = divDom.cloneNode(true); //true 深克隆（会把被克隆节点的后代节点一起克隆）   false或空为浅克隆

        document.body.appendChild(newbox);
    </script>
</body>

删除节点

1.若一个节点在页面中已不需要时，可以删除它 2.在 JavaScript 原生DOM操作中，要删除元素必须通过父元素删除

父元素.removeChild（要删除的元素）

<body>
    <button>点击删除</button>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

    <script>
        let ulDom = document.querySelector('ul')
        let btnDom = document.querySelector('button')
        let liDom =document.querySelector('li:nth-child(3)')

        btnDom.addEventListener('click',function () {
            //删除指定子元素
            ulDom.removeChild(liDom) 

            //删除自己
            // ulDom.remove  ()       
        })
    </script>
</body>

注：

1.如不存在父子关系则删除不成功 2.删除节点和隐藏节点（display:none）有区别的：隐藏节点还是存在的，但是删除，则从html中删除节点

时间对象

1.实例化一个事件对象

let date = new Date();

方法	作用	说明
getFullYear()	获得年份	获取四位年份
getMonth()	获得月份	取值为0~11
getDate()	获得月份中的每一天	不同月份取值也不同
getDay()	获取星期	取值为0~6
getHours()	获取小时	取值为0~23
getMinutes()	获取分钟	取值为0~59
getSeconds()	获取秒	取值为0~59

注：

1.月份输出为0-11 实际使用需要+1

2.星期输出0-6 0为星期天

时分秒案例

<body>
    <span></span>
    <script>
        let spanDom = document.querySelector("span")

        /* console.log(date.getFullYear()); // 2 输出当下是什么年份
        console.log(date.getMonth()); // 3 输出月份 0-12 都会自己 加一
        console.log(date.getDate()); // 4 几号
        console.log(date.getDay()); // 5 输出星期几 星期一 是 1 星期二  星期六 6 星期天 0
        console.log(date.getHours()); // 6 小时
        console.log(date.getMinutes());// 7 分钟
        console.log(date.getSeconds());// 8 秒 */

        setInterval(function () {
            let date = new Date();
            spanDom.innerHTML = `
            ${date.getFullYear()}年
            ${date.getMonth()+1}月
            ${date.getDate()}日
            ${date.getHours()}时
            ${date.getMinutes()}分
            ${date.getSeconds()}秒`
        },1000)
    </script>
</body>

2.三种方式获取时间戳

返回是当前时间和1970年1月1日0时0分0秒之间的毫秒数

1.Date.now()

2.date.getTime()

3.+new Date()

    <script>
        let date = new Date()
        console.log(date.getTime());

        console.log(+new Date('2020-10-01 18:20:14'));

        console.log( Date.now());
    </script>

# webApi第四天