DOM-日期对象、节点的增删改查

常笑
286 阅读2分钟

1.日期对象的创建

实例化

创建日期对象：用来表示时间的对象，可以得到当前系统的时间

<script>
    //获得当前时间，创建当前日期对象
    const d1 = new Date()
    // 字符串：指定时间日期
    const d2 = new Date('2022-1-1 6:6:6')
    // 数字，指定时间日期
    const d3 = new Date(2022,1,1,6,6,6)

    // 数字0-11代表的是 1-12月

    // 本地时间日期格式
    // 事件日期.toLocaleString()
    console.log(d1.toLocaleString());
    console.log(d2);
    console.log(d3);
  </script>

2.时间日期对象方法

 <script>
    // 创建对象，获取当前时间
    const n = new Date()
    console.log(n);

    // 方法
    const re = n.getFullYear()//获取年份
    console.log(re);
    const mon = n.getMonth()+1//获得月份（取值是0-11）
    console.log(mon);
    const day = n.getDate()//获得日期
    const hour = n.getHours()//获取小时
    const min = n.getUTCMinutes()//获取分钟
    const sec = n.getSeconds()//获取秒数
    const miao = n.getUTCMilliseconds()//获取毫秒数
    const week = n.getDay()//获取星期(星期天是0)（取值0-6）
    console.log(week);

    // set 设置(星期不可以改，其他都可以改)
    n.setFullYear(2222)
    console.log(n.toLocaleString())
  </script>

3.时间日期格式

<style>
    div {
      height: 600px;
      width: 600px;
      text-align: center;
      line-height: 200px;
      background-color: plum;
      margin: 0 auto;
    }
  </style>

<body>
  <div>时间</div>
  <script>
    // 定时器
    setInterval(function () {
      showTime()
    }, 1000)
    // 先调用一次这样直接显示当前时间，没有延迟
    showTime()
    function showTime() {
      //  获取div
      const div = document.querySelector('div')
      // 创建 
      const n = new Date()

      // 获取信息
      let year = n.getFullYear()
      let month = n.getMonth() + 1
      let day = n.getDate()
      let hour = n.getHours()
      let min = n.getMinutes()
      let second = n.getSeconds()

      // 补0
      month = month < 10 ? '0' + month : month
      day = day < 10 ? '0' + day : day
      hour = hour < 10 ? '0' + hour : hour
      min = min < 10 ? '0' + min : min
      second = second < 10 ? '0' + second : second

      // 字符串拼接
      const str = `${year}-${month}-${day} ${hour}:${min}:${second}`
      div.innerHTML = str
    }

  </script>
</body>

image.png

4.时间戳

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

语法：元素.getTime()

获得时间戳的方式

<script>
    //创建对象获取当前时间
    const n = new Date()

    // 获取时间戳的方式
    // 1.使用getTime()方法
    let re = n.getTime()
    console.log(re);

    // 2.简写+new Date()
    let re1 = +new Date()
    console.log(re);

    // 3.当前时间戳.使用Date.now()
    // 无需实例化，但是只能得到当前的时间戳，而前面两种可以返回指定时间的时间戳
    console.log(Date.now())
  </script>

5.DOM树

DOM节点： DOM树里每一个内容都称之为节点

<body>
  <div id="box">123</div>
  <a href="#">链接</a>
  <script>
    // 节点类型
    // 元素节点:所有的标签比如body、div
                // html 是根节点
    // 属性节点:所有的属性比如href
    // 文本节点:所有的文本
  </script>
</body>

6.查找节点

查找父节点

语法：元素.parentNode

<body>
  <div>22
    <div>11
      <p>段落</p>
      <span>娃哈哈</span>
      <h1>标题</h1>
    </div>
  </div>
  <script>
    const span = document.querySelector('span')
    // 查找父节点
    // 元素.parentNode
    console.log(span.parentNode);//父节点
    console.log(span.parentNode.parentNode)//父节点的父节点
  </script>
</body>

image.png

查找子节点

语法：

1.元素.childNodes

得到的是一个伪数组，查找的是所有子节点（包括文本、空格等）

可以通过下标得到里面的每一个元素

  <div>11
      <p>段落</p>
      <span>娃哈哈</span>
      <h1>标题</h1>
  </div>
  <script>
  
    const div = document.querySelector('div')
    // 查找所有子节点
    // 得到的是伪数组
    console.log(div.childNodes);

    // 查找第一个儿子
    console.log(div.childNodes[0])
    console.log(div.childNodes[1])//第二个儿子，数组下标从0开始

image.png

2.元素.children

查找的是所有元素子节点

得到的是所有标签

// 所有元素子节点
    // 得到的是所有标签
    console.log(div.children)

image.png

兄弟关系查找

1.上一个兄弟元素

元素.previousElementSibling

2.下一个元素兄弟

元素.nextElementSibling

<body>
  <div>11
    <p>段落</p>
    <span>娃哈哈</span>
    <h1>标题</h1>
  </div>
  <script>
    const span = document.querySelector('span')

    // 查找兄弟节点
    // 上一个元素兄弟
    console.log(span.previousElementSibling)

    // 下一个元素兄弟
    console.log(span.nextElementSibling);
  </script>
</body>

9.插入节点

在已有的 DOM 节点中插入新的 DOM 节点时，需要关注两个关键因素：首先要得到新的 DOM 节点，其次在哪个位置插入这个节点。

先创建，再插入

先创建节点（即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点）

createElement 动态创建任意 DOM 节点

const newp = document.createElement('P')

1.父.appendChild(子)

插入到父元素的最后一个子元素

2.父.insertBefore(新，旧)

插入到父元素中某个子元素的前面（在父节点中任意子节点之前插入新节点）

<body>
  <input type="button" value="" 点击>
  <div>
    <h1>11</h1>
  </div>
  <script>
    // 点击按钮，创建节点p到div
    const btn = document.querySelector('input')
    const div = document.querySelector('div')
    const h1 = document.querySelector('h1')
    btn.addEventListener('click', function () {
      // 创建节点（即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点）
      const newp = document.createElement('P')
      // console.log(newp);

      // 追加节点（插入到父元素的最后一个子元素:）
      // 父.appendChild(子)
      div.appendChild(newp)

      // 插入节点（插入到父元素中某个子元素的前面）
      // 父.insertBefore(新，旧)
      div.insertBefore(newp, h1)
      newp.innerHTML = '娃哈哈'
    })
  </script>
</body>

10.克隆（复制）节点

语法：元素.cloneNode()

cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值 若为true，则代表克隆时会包含后代节点一起克隆 若为false，则代表克隆时不包含后代节点 默认为false

<body>
  <input type="button" value = '点击'>
  <div class="box" title="'图片">
      <img src="./素材/学成在线重构/images/course02.png" alt="">
      <h2>标题</h2>
  </div>
  <script>
    // 克隆：元素.cloneNode()
    /*
    cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值
    若为true，则代表克隆时会包含后代节点一起克隆
    若为false，则代表克隆时不包含后代节点
    默认为false
    */
  //  克隆谁就找到谁
    const btn = document.querySelector('input')
    const div = document.querySelector('.box')
    btn.addEventListener('click',function(){
      // 克隆节点
      const newDiv = div.cloneNode(true)
      document.body.appendChild(newDiv)
    })
  </script>
</body>

11.删除节点

删除节点：父.removeChild(子)

<body>
  <input type="button" value='点击'>
  <div class="box" title="'图片">
    <img src="./素材/学成在线重构/images/course02.png" alt="">
  </div>
  <p></p>
  <script>
    // 删除节点：父.removeChild(子)
    const btn = document.querySelector('input')
    const img = document.querySelector('img')
    
    btn.addEventListener('click',function(){
      // 找到img的父元素再删除img
      img.parentNode.removeChild(img)

      // 找到p标签，把img添加到P里边
      document.querySelector('p').appendChild(img)
      
    })
  </script>
</body>

12.M端事件

移动端也有自己独特的地方。比如触屏事件touch（也称触摸事件），Android 和IOS 都有。

 <script>
    // 移动端也有自己独特的地方。比如触屏事件touch（也称触摸事件），Android 和IOS 都有。
    // 手指触摸到一个dom元素时触发
    document.addEventListener('touchstart', function () {
      console.log(('按下'));
    })
    // 手指在一个dom元素上移动时触发
    document.addEventListener('touchend',function(){
      console.log('手指松开');
    })
    // 手指从一个DOM元素上滑动时触发
    document.querySelector('touchmove',function(){
      console.log('手指移动');
    })
  </script>
avatar
文章
阅读
粉丝