WebAPIs(DOM节点)

发布于:2023-01-22 ⋅ 阅读:(9) ⋅ 点赞:(0) ⋅ 评论:(0)

一.日期对象:

  • 获得当前时间:new Date()
  • 指定时间:new Date('日期')
  • 时间日期对象 :getFUllyear(返回的是四位数的年份)
  • 月份时间对象:getMonth() [0-11之间的数字,0表示1月份,11表示12月份]
  • 获取月中天数日期:getDate()
  • 获取小时:getHours()
  • 获取分钟:getMinutes()
  • 获取一周的某一天:getDay()[0表示星期天,6表示星期六]
 const now = new Date()
        console.log(now.getFullYear())       //获取4位数的年份
        console.log(now.getMonth() + 1)     //返回0-11 之间的一个数字 0表示1月份
        console.log(now.getDate())          //1~31 日期
        console.log(now.getHours())         //返回值0~23 小时
        console.log(now.getSeconds())       //返回0-59 秒
        console.log(now.getMinutes())       //返回值0-59 分
        console.log(now.getDay())           //星期  0~6 0表示星期天 6表示星期六

 

时间戳:

  1. getTime()
  2. +New Date()
  3. Date.now( )[只能得到当前的时间戳,不能指定时间]

二.节点操作:

  • 获取父节点: 对象.parenNode
  • 获取子节点:对象.chidren  [返回伪数组]
// 先获取ul dom对象 然后再获取ul里面所有的孩子
        const ul = document.querySelector('ul')
        // children 获取孩子元素
        // childNodes 查看所有的节点 包括text 空格
        console.log(ul.childNodes);
  • 获取兄弟节点:对象.previousElementsibing   上一个兄弟                                                                                   对象.nextElementsibing          下一个兄弟
 <ul>
        <li>1</li>
        <li class="two">1</li>
        <li>1</li>
    </ul>
  
    <script>
       const li = document.querySelector('ul .two')
    //    获取下一个兄弟
       console.log(li.nextElementSibling)
    //    获取上一个兄弟
       console.log(li.previousElementSibling)
    </script>

创建节点: document.createElement('标签名')

追加节点:对象.appendChild('要追加的子节点 ')

                对象.inserBefore(要添加的子节点,追加到谁得前面)

// 获取按钮元素 注册点击事件
        const but = document.querySelector('.bt')
        but.addEventListener('click', function () {
            // 创建子节点  后面加标签名
            const li = document.createElement('li')
            li.innerHTML = '我是创建的'
            // 需要追加的对象  对象.appendChild
            but.previousElementSibling.appendChild(li)
        })

删除节点:对象.romoveChild(删除的节点)

                 删除元素.romove()

 const ul = document.querySelector('ul')
        const li = ul.children
        for (let i = 0; i < li.length; i++) {
            li[i].addEventListener('click', function () {
                // 通过父元素删除子元素
                // ul.romoveChild(li)
                // 删除自己
                this.remove()
            })
        }

克隆节点:dom对象.clonable(布尔值)

                 false:只克隆标签元素,不克隆内容

                 true:不仅仅克隆标签元素,还克隆内容

M端事件:

  • touchstart  手指触摸到一个dom元素时触发
  • touchmove:手指在一个dom元素上滑动时触发
  • touchend:手指从一个Dom元素上移开时触发

 map方法的使用:

  map方法 会遍历数组
  map 方法返回值 是对数组里面的元素处理过后的一个新数组
  作用:对数组里面的元素进行加工处理 会返回一个新的数组

 // map方法 会遍历数组
        // map 方法返回值 是对数组里面的元素处理过后的一个新数组
        // 作用:对数组里面的元素进行加工处理 会返回一个新的数组
        const arr = ['张三', '李四', ' 小王', '小杜']
        // item是数组的元素,i是数组的下标
        const newArr = arr.map(function (item, i) {
            return item + 'hello'
        })
        console.log(newArr);

    join方法的使用:

      作用将数组里面的元素连接成一个字符串,如果join()没有参数 则使用逗号连接,也可以指定连接的符号

  const arr=['张三','李四','王五']
        const str = arr.join('-')
        数组名:join([参数])
        //   作用将数组里面的元素连接成一个字符串,如果join()没有参数 则使用逗号连接,也可以指定连接的符号
        console.log(str);