WebAPIs(节点的增删改查)

105 阅读3分钟

一.日期对象:

  • 获得当前时间: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()) //131 日期 console.log(now.getHours()) //返回值023 小时 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 下一个兄弟

    • 1
    • 1
    • 1
    <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);