APIs -- DOM节点操作

news2024/10/6 6:50:04

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>Document</title>
    <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(要插入的元素，在哪个元素前面)

特殊情况下，我们新增节点，按照如下操作：
1. 复制一个原有的节点
2. 把复制的节点放入到指定的元素内部

克隆节点

// 克隆一个已有的元素节点
元素.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(要删除的元素)
注意：
1. 如不存在父子关系则删除不成功
2. 删除节点和隐藏节点 (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>