文章目录
DOM
1. 日期对象
日期对象就是用来表示时间的对象,可以得到当前的时间
// 获取当前时间
const current = new Date()
console.log(current) // Fri Sep 06 2024 18:02:43 GMT+0800
// 获取指定时间
const date = new Date('2025-06-01 08:30:00')
console.log(date) // Sun Jun 01 2025 08:30:00 GMT+0800
(1)、日期对象方法
方法 | 作用 | 说明 |
---|---|---|
getFullYear() | 获得年份 | 四位数的年份 |
getMonth() | 获得月份 | 取值为0~11 |
getDate() | 获得月份中的一天 | 不同月份取值不同 |
getDay() | 获得周几 | 取值0~6,0代表星期日 |
getHours() | 获取小时 | 取值0~23 |
getMinuates() | 获取分钟 | 取值0~59 |
getSeconds() | 获取秒 | 取值0~59 |
比如:
const currentDate = new Date()
console.log(currentDate.getFullYear());
console.log(currentDate.getMonth() + 1); // getMonth 0-11
console.log(currentDate.getDate());
console.log(currentDate.getDay()); // 0-6 星期天是0
// getDay() 0-6
const arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
console.log(arr[new Date().getDay()]);
(2)、时间戳
时间戳就是获取毫秒数,可用来计算倒计时效果。
获取时间戳的三种方法
getTime()
:可返回指定时间的时间戳
new Date()
:可返回指定时间的时间戳—常用
Date.now()
: 这个方法无法返回指定时间的时间戳,
// F1: getTime() 可返回指定时间的时间戳
console.log(new Date().getTime()); // 1725617212649
// F2: +new Date() 可返回指定时间的时间戳---常用
// new Date()返回的是字符串,前边+号将字符串转为数字型,就是时间戳了
console.log(+new Date()); // 1725617212649
//F3: Date.now() 这个方法无法返回指定时间的时间戳,
console.log(Date.now()); // 1725617212649
(3)、下课倒计时
- 将来的时间戳-现在的时间戳 = 剩余的时间毫秒数
- 把剩余时间转换为时、分、秒。
- 转换公式
- 天数: d = parseInt(总秒数/ 60 / 60 % 24);
- 小时:h = parseInt(总秒数/ 60 / 60 % 24)
- 分钟数:m = parseInt(总秒数 / 60 % 6);
- 秒数: s = parseInt(总秒数 % 60)
function getCountTime () {
// 1. 得到当前的时间戳
const now = +new Date()
// 2. 得到将来的时间戳
const last = +new Date('2022-4-1 18:30:00')
// 3. 得到剩余的时间戳 count 记得转换为 秒数
const count = (last - now) / 1000
// console.log(count)
// 4. 转换为时分秒, 格式是HH-MM-SS,不足两位补0
let h = parseInt(count / 60 / 60 % 24)
h = h < 10 ? '0' + h : h
let m = parseInt(count / 60 % 60)
m = m < 10 ? '0' + m : m
let s = parseInt(count % 60)
s = s < 10 ? '0' + s : s
console.log(h, m, s)
// 5. 把时分秒写到对应的盒子里面
document.querySelector('#hour').innerHTML = h
document.querySelector('#minutes').innerHTML = m
document.querySelector('#scond').innerHTML = s
}
getCountTime()
setInterval(getCountTime, 1000) // 设一个定时器,实时更新倒计时
2. 节点操作
dom树里有不同类型的节点,重点关注元素节点
(1)、 查找节点(根据节点关系找)
此处查找节点是根据节点之间的关系来查找
查找父节点:子元素.parentNode
,返回最近一级的父节点,找不到返回null
<div class="grandpa">
<div class="father">
<div class="son"></div>
</div>
</div>
<script>
const son = document.querySelector('.son')
console.log(son);
console.log(son.parentNode);
console.log(son.parentNode.parentNode);
</script>
查找子节点: 父元素.children
, 仅获得所有元素节点,返回的是一个伪数组
兄弟关系查找:下一个兄弟——nextElementSibling
;上一个兄弟——previousElementSibling
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
</ul>
<script>
// 1.2 获得所有子元素的children元素节点
const ul = document.querySelector('ul')
console.log(ul.children); // 伪数组
// 1.3 兄弟节点
const fourLi = document.querySelector('ul li:nth-child(4)')
console.log(fourLi);
// 上一个
console.log(fourLi.previousElementSibling);
// 下一个
console.log(fourLi.nextElementSibling);
</script>
(2)、 增加节点:创建create、追加append、克隆clone
- 创建节点
- document.createElement(‘标签名’) 创建一个新的元素节点
- 追加节点
- 父元素.appendChild(要插入的元素):追加为父元素的最后一个子元素
- 父元素.insertBefore(要插入的元素,在哪个元素前面):追加在某个元素前边
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
</ul>
<script>
const ul = document.querySelector('ul')
// 1. 创建节点 creatElement('标签名')
const li = document.createElement('li')
li.innerHTML = '在末尾追加的元素'
// 2. 追加
// 2.1 追加在末尾 appendChild
ul.appendChild(li)
// 2.2 追加在某个位置 insertBefore('要插入的元素',位置)
const topLi = document.createElement('li')
topLi.innerHTML = 'topLi'
ul.insertBefore(topLi, ul.children[0])
</script>
- 克隆元素
- 某个子元素.clone(布尔值)
// true--克隆个跟原标签一样的元素,括号内传入布尔值
// false就只克隆标签,其余的都不管
ul.appendChild(ul.children[0].cloneNode(true))
(3)、 删除节点remove
父元素.removeChild(要删除的元素)
// 原生DOM操作中,删除元素必须通过父元素删除
ul.removeChild(ul.children[1])
删除节点和隐藏节点(display:none)区别: 隐藏节点还是存在的,但是删除,则从html中删除节点。