Web-API-day4 DOM节点

发布于：2025-07-11 ⋅ 阅读:(39) ⋅ 点赞:(0)

一、日期对象

1.实例化日期对象

const date = new Date()

指定时间 const date1 = new Date('2025-7-9 22-00-00')

获取日期的另一种表达方式：toLocaleString()

2.获取日期对象每一个部分

getFullYear():获取年份

getMonth()+1:获取月份

getDate()：获取月份某中某一天

getHours():获取小时

getMinutes():获取分钟

getSeconds():获取秒数

3.补0函数的制作

将小于10的数值连上一个字符串的0

二、节点

1.查找节点

父级：parentNode

子集：children

兄弟：nextElementSibling、previousElementSibling

2、增加节点

创建新节点：document.createElement('标签名称'）

追加节点：parent.appendChild(child)

parent.insertBefore(child,refChild) // insertBefore(插入的元素, 放到哪个元素的前面)

追加的节点可以是新创建的也可以是页面上已经存在（移动）

克隆节点：元素.cloneNode(true)

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <script>
    const ul = document.querySelector('ul')
    // 1 克隆节点  元素.cloneNode(true)
    // const li1 = ul.children[0].cloneNode(true)
    // console.log(li1)
    // 2. 追加
    ul.appendChild(ul.children[0].cloneNode(true))

    ul.appendChild(ul.children[1].cloneNode(true))
  </script>
</body>

删除节点：父元素.removeChlid(子元素)

parent.removeChild(child)

三、M端事件

1.touchstart:触摸

2.touchend:离开

3.touchmove:滑动中

 <script>
    const div = document.querySelector('div')
    // 1. 触摸
    div.addEventListener('touchstart', function () {
      console.log('开始摸我了')
    })
    // 2. 离开
    div.addEventListener('touchend', function () {
      console.log('离开了')
    })
    // 3. 移动
    div.addEventListener('touchmove', function () {
      console.log('一直摸，移动')
    })
  </script>

四、插件

插件: 就是别人写好的一些代码,我们只需要复制对应的代码,就可以直接实现对应的效果

学习插件的基本过程

熟悉官网,了解这个插件可以完成什么需求 https://www.swiper.com.cn/

看在线演示,找到符合自己需求的demo https://www.swiper.com.cn/demo/index.html

查看基本使用流程 https://www.swiper.com.cn/usage/index.html

查看APi文档,去配置自己的插件 https://www.swiper.com.cn/api/index.html

注意: 多个swiper同时使用的时候, 类名需要注意区分