Web Apls第四天

1.增加节点

1.克隆节点

1.语法:

//克隆一个已有的元素节点
元素.cloneNode(布尔值)

2.作用:

①若为true，则代表克隆时会包含后代节点一起克隆

②若为false，则代表克隆时不包含后代节点

③默认为false

3.案例:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>05-克隆节点.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .box {
        width: 100px;
        height: 100px;
        background-color: aqua;
        border: 1px solid #000;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <button>点击</button>
    </div>
    <script>
      // 1 来克隆这个节点 box
      let box = document.querySelector('.box');

      // 2 开始克隆
      // let newBox = box.cloneNode(); // 浅克隆 不会把 div的后代节点一起克隆 
      let newBox = box.cloneNode(true); // true 深克隆 会把 div的后代节点一起克隆 

      // 3 插入到body标签中
      document.body.appendChild(newBox);
    </script>
  </body>
</html>

2.删除节点

1.语法:

父元素.removeChild(要删除的元素)

2.注意:

①如不存在父子关系则删除不成功

②删除节点和隐藏节点（display:none区别：

③隐藏节点还是存在的，但是删除，则从html中删除节点

3.案例:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>06-删除元素.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <button>删除ul中某一个li标签</button>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
    <script>
      let button = document.querySelector('button');
      let ul = document.querySelector('ul');

      // 要删除的子元素
      let li = document.querySelector('li:nth-child(3)'); // 1 

      button.addEventListener('click', function () {

        // 删除指定的元素
        ul.removeChild(li); 

        // 删除自己 全部删除
        // ul.remove();
      });
    </script>
  </body>
</html>

3.时间对象

1.实例化

1.获得当前时间

let date = new Date( )

2.获得指定时间

let date = new Date('1949-10-01' )

2.时间对象方法

1.如图:

1649558402259

2.案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 1.实例化一个  时间对象 new
        let date = new Date();

        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.获取秒 */
    </script>
</body>
</html>

3.时间戳

1.作用

①指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式

2.使用 getTime() 方法

//实例化
let date = new Date()
//获取时间戳
console.log(date.getTime())

3.简写 +new Date()

console.log(+new Date())

4.使用 Date().now()

console.log(Date.now())

5.案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 三种方式获取时间戳
        let date= new Date();
        console.log(date.getTime());/* 方式一 */

        // console.log(+(new Date())); 方式二  只要日期对象 可以使用 + 将整个对象 转成 时间戳

        // console.log(Date.now());  方式三

        // 快速生成一个不会重复的数字   *  随机数
    </script>
</body>
</html>