APIs -- DOM节点操作
1. 日期对象
日期对象：用来表示时间的对象
作用：可以得到当前系统时间
1.1 实例化
在代码中发现了new关键字时，一般将这个操作称为实例化
创建一个时间对象并获取时间：const date = new Date();
// 实例化 new
// 1.得到当前时间
const date = new Date();
console.log(ate)
// 2.指定时间
const date1 = new Date('2022-03-01 08:30:00')
// date 变量即所谓的时间对象
console.log(date1)
1.2 时间对象方法
getFullYear 获取四位年份
getMonth 获取月份，取值为 0 ~ 11
getDate 获取月份中的每一天，不同月份取值也不相同
getDay 获取星期，取值为 0 ~ 6 0是星期天
getHours 获取小时，取值为 0 ~ 23
getMinutes 获取分钟，取值为 0 ~ 59
getSeconds 获取秒，取值为 0 ~ 59
// 1. 实例化
const date = new Date();
// 2. 调用时间对象方法
// 通过方法分别获取年、月、日，时、分、秒
const year = date.getFullYear(); // 四位年份
const month = date.getMonth(); // 0 ~ 11
console.log(year)
console.log(month+1)
页面显示格式化时间案例：
法1：
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>Documenttitle>
<style>
div{
width: 300px;
height: 40px;
border: 1px solid pink;
text-align: center;
line-height: 40px;
}
style>
head>
<body>
<div>div>
<script>
const div=document.querySelector('div')
function getMyDate(){
const date=new Date()
let h=date.getHours()
let m=date.getMinutes()
let s=date.getSeconds()
h=h<10?'0'+h:h
m=m<10?'0'+m:m
s=s<10?'0'+s:s
return `今天是:${date.getFullYear()}年${date.getMonth()+1}月${date.getDate()}号${h}:${m}:${s}`
}
div.innerHTML=getMyDate()
setInterval(function(){
div.innerHTML=getMyDate()
},1000)
script>
body>
html>
法2：
const div = document.querySelector('div' )// 得到日期对象
const date = new Date()
div.innerHTML = date.tolocaleString() // 2022/4/1 09:41:21
// div.innerHTML = date.toLocaleDateString()// 2022/4/1
// div.innerHTML = date.toLocaleTimeString() // 09:41:21
setInterval(function(){
div.innerHTML = date.tolocaleString()
},1000)
根据日期Day() 0~6 想要返回语文的星期几而不是0~6的做法：
const arr = ['星期天'，"星期一'，"星期二"，"星期三"，"星期四"，"星期五]
// const date = new Date()
console.log(arr[new Date().getDay()])
1.3 时间戳
使用场景： 如果计算倒计时效果，前面方法无法直接计算，需要借助于时间戳完成
什么是时间戳：是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式
算法：将来的时间戳 - 现在的时间戳 =剩余时间毫秒数
-
剩余时间毫秒数 转换为 剩余时间的 年月日时分 就是倒计时时间
-
比如 将来时间戳 2000ms - 现在时间戳1000ms =1000ms
-
1000ms 转换为就是 0小时0分1秒
获取时间戳的三种方式：
- 使用getTime()方法
// 1. 实例化
const date = new Date()
// 2. 获取时间戳
console.log(date.getTime())
简写 +new Date()：无需实例化
console.log(+new Date())
- 使用Date.now()：无需实例化，
但只能得到当前的时间戳，而前面两种可以返回指定时间的时间戳
console.log(Date.now())
2. 节点操作
2.1 DOM节点
概念：DOM树李每一个内容都称之为节点
节点的类型：
元素节点：所有的标签，如body、div等；html是根节点- 属性节点：所有的属性，如href、id、class等
- 文本节点：所有的文本（标签里面的文字），如链接名
- 其他
2.2 查找节点
节点关系：针对的找亲戚返回的都是对象
2.2.1父节点查找
parentNode属性
返回最近一级的父节点，找不到返回为null
语法：子元素.parentNode
2.2.2 子节点查找
childNodes：获取所有子节点，包括文本节点（空格、换行）、注释节点等
children属性（重点）：1）仅获得所有元素节点；2）返回的还是一个伪数组
语法：父元素.children
2.2.3 兄弟关系查找
下一个兄弟节点：nextElementSibling属性
上一个兄弟节点：previousElementSibling属性
语法：父元素.nextElementSibling/previousElementSibling
2.3 增加节点
步骤：
- 创建一个新的节点
- 把创建的新节点放入到指定的元素内部
创建节点
即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点
创建元素节点方法:
// 创造一个新的元素节点
document,createElement("标签名")
追加节点
要想在界面看到，还得插入到某个父元素中
插入到父元素的最后一个子元素:
// 插入到这个文元素的最后
父元素.appendChild(要插入的元素)
插入到父元素中某个子元素的前面
// 插入到某个子元素的前面
父元素.insertBefore(要插入的元素，在哪个元素前面)
- 特殊情况下，我们新增节点，按照如下操作：
- 复制一个原有的节点
- 把复制的节点放入到指定的元素内部
克隆节点
// 克隆一个已有的元素节点
元素.cloneNode(布尔值)
cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值
- 若为true，则代表克隆时会包含后代节点一起克隆
- 若为false，则代表克隆时不包含后代节点
- 默认为false
const ul = document .querySelector( 'ul')
// 1 克隆节点 元素.cloneNode(true)
//const li1 = ul.children[0].cloneNode(true)
// console.Log(li1)
// 2.追加
//ul.appendChild(li1)
ul.appendChild(ul.children[0].cloneNode(true))
//
2.4 删除节点
- 若一个节点在页面中已不需要时，可以删除它
- 在JavaScript 原生DOM操作中，要删除元素必须通过
父元素删除 - 语法：
父元素.removeChild(要删除的元素) - 注意：
- 如不存在父子关系则删除不成功
- 删除节点和隐藏节点 (display:none) 有区别的: 隐藏节点还是存在的，但是删除则从html中删除节点
const ul = document.querySelector( 'ul' )
// 删除节点 父元素.removeChlid( 于元素)
ul.removeChild(ul.children[0])
3. M端事件
移动端也有自己独特的地方。比如触屏事件 touch (也称触摸事件)，Android 和I0S 都有。
触屏事件 touch(也称触摸事件)，Android 和IOS 都有。- touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指(或触控笔)对屏幕或者触控板操作。
- 常见的触屏事件如下:
<body>
<div></div>
<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>
</body>
swiper插件的使用
插件：就是别人写好的一些代码,我们只需要复制对应的代码,就可以直接实现对应的效果
学习插件的基本过程：
- 熟悉官网,了解这个插件可以完成什么需求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同时使用的时候，类名需要注意区分