Web API —— DOM 学习（四）（完结）

一、日期对象

（一）实例化

（二）日期对象方法

1.时间戳介绍

2.获得时间戳的方式

getTime()方法

+ new Date()方法

Date.now()方法

二、节点操作

（一）DOM 节点

1.节点类型

元素节点（主要）

2.属性节点

3.文本节点

（二）查找节点

1.父节点查找

关闭广告的新写法

2.子节点查找

通过 childNodes 查找（不常用）

通过 children 查找

3.兄弟节点查找

上一个兄弟节点查找

下一个兄弟节点查找

（二）节点增加

1.创建节点

2. 追加节点

插入到父亲最后一个子元素

插入到父亲某个子元素的前面

（三）克隆节点

（四）删除节点

四、M端事件（了解）

（一）touch ：触屏事件

（二）插件地址

练习：倒计时练习

练习：学生信息表

一、日期对象

想让网页显示日期就得用日期对象，可以得到当前的系统时间

（一）实例化

如果在代码中发现了 new 关键字就称这个操作为实例化

获得当前时间： const data = new Date()

<body>
<script>const date = new Date()console.log(date)
</script>
</body>

获得指定时间：const date1 = new Date('2022-5-1 08：30：00')

可以用作倒计时

<body>
<script>const date = new Date('2022-5-1')console.log(date)
</script>
</body>

（二）日期对象方法

我们需要能用日期对象中的方法写出常见日期

getFullYear() 获取四位年份

getMonth() 获得月份 0-11

getDate() 获得月份的每一天，不同月份取值不同。

getDay() 获得星期 0-6 0 是星期天

得先获得对象再用上面那些方法得到的月份是从 0 开始的所以要加1

<body><script>const date = new Date()console.log(date.getFullYear())console.log(date.getMonth() + 1)console.log(date.getDate())console.log(date.getDay())</script>
</body>

在 div 中动态显示现在时间

<body><div></div><script>const div = document.querySelector('div')const date = new Date()div.innerHTML = date.toLocaleString()setInterval(function () {const date = new Date()div.innerHTML = date.toLocaleString()}, 1000)</script>
</body>

（三）时间戳

1.时间戳介绍

如果要进行倒计时就需要用时间戳去计算，记得先调用一次再使用计时器，要不然倒计时不连贯。

时间戳是指从1970 年 01 月 00 时 00 分 00 秒起到现在的毫秒数，是一种特殊的计量时间方式

用将来的时间戳减去过去的时间戳等于剩余时间的毫秒数

把结果换成年月日时分秒就是最后的结果了，得出倒计时 1000毫秒就是1s

2.获得时间戳的方式

getTime()方法

能返回指定时间

<body><script>const date = new Date()console.log(date.getTime())</script>
</body>

+ new Date()方法

能返回指定时间

<body><script>const date = +new Date()console.log(date)</script>
</body>

Date.now()方法

无需实例化，不能返回指定时间

<body><script>console.log(Date.now())</script>
</body>

二、节点操作

（一）DOM 节点

DOM 树里每个内容都能称之为一个节点，树上的分支点

1.节点类型

元素节点（主要）

所有标签：body div 等标签都是节点

html 是根节点·

2.属性节点

比如链接 href

3.文本节点

div 里面的字各种标签里的字

（二）查找节点

1.父节点查找

通过parentNode 属性来查找，返回最近一级的父亲节点，找不到返回 null

下面返回父亲对象（父对象）

<body><div class="father"><div class="son"></div></div><script>const son =document.querySelector('.son')console.log(son.parentNode)</script>
</body>

关闭广告的新写法

通过parentNode来关闭父元素，方便关闭多个广告

<body><div class="guanggao"><div class="box"></div></div><script>const box = document.querySelector('.box')box.addEventListener('click', function () {this.parentNode.style.display = 'none'})</script>
</body>

2.子节点查找

通过 childNodes 查找（不常用）

获得所有子节点包括文本节点，空格换行，注释节点等

查出来太多没用的了所以不常用这个。

通过 children 查找

仅获得所有元素节点，返回的是一个伪数组

<body><ul><li></li><li></li><li></li><li></li><li></li></ul><script>const ul = document.querySelector('ul')console.log(ul.children)</script>
</body>

3.兄弟节点查找

上一个兄弟节点查找

nextElementSibling 属性

下一个兄弟节点查找

previousElementSibling 属性

<body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><script>const l2 = document.querySelector('ul li:nth-child(2)')console.log(l2.previousElementSibling)console.log(l2.nextElementSibling)</script>
</body>

（二）节点增加

先创建一个新的节点然后把新的节点放在指定的元素内部

1.创建节点

document.createElement(‘标签名’)

<body><script>const div = document.createElement('div')console.log(div)</script>
</body>

2. 追加节点

要想看到我们新创的节点我们还需要把这个节点插入到某个父元素中去

插入到父亲最后一个子元素

父元素.appendChild(要插入的元素) 插入是作为父亲最后一个子元素插入的，所以在最后面

<body><ul><li>我是原生的</li></ul><script>const ul = document.querySelector('ul')const li = document.createElement('li')li.innerHTML = '我是li'ul.appendChild(li)</script>
</body>

插入到父亲某个子元素的前面

父元素.insertBefore(要插入的元素, 要插入在谁的前面)

ul.children 返回一个数组这样就能在第一个前面插入了

<body><ul><li>我是原生的</li></ul><script>const ul = document.querySelector('ul')const li = document.createElement('li')li.innerHTML = '我是li'ul.insertBefore(li, ul.children[0])</script>
</body>

循环生成 li 并更改里面的内容

<body><div class="box"><ul class="clearfix"></ul></div><script>data = [{}, {}]//里面是图片的链接等相关数据const ul = document.querySelector('.box ul')for (let i = 0; i < data.length; i++) {const li = document.createElement('li')ul.appendChild(li)li.innerHTML(`       里面复制 li 的内容 并把链接换成自己的`)}</script>
</body>

（三）克隆节点

特殊情况下，增加新节点时，先复制一个原有节点，然后把复制的节点放入到指定的元素内部

元素.cloneNode(布尔值)

浅克隆：里面的布尔值如果是 false 只克隆标签

深克隆：如果是 true 就是被克隆的对象内部有什么都克隆过来。

<body><ul><li>1</li><li>2</li><li>3</li></ul><script>const ul = document.querySelector('ul')const li1 = ul.children[0].cloneNode(true)ul.appendChild(li1)</script>
</body>

（四）删除节点

若一个节点在界面中已不需要时可以删除

不能直接删除只能通过父亲删儿子

父元素.removeChild(要删除的元素)

和display：none 的区别:

display 只是在 HTML 中隐藏了 DOM 节点还存在

但是这个是真的删除了

<body><ul><li>没用了</li></ul><script>const ul = document.querySelector('ul')ul.removeChild(ul.children[0])</script>
</body>

四、M端事件（了解）

移动端自己独特的事件

（一）touch ：触屏事件

touchstart ：手指触摸到一个 DOM 元素触发

touchmove：手指在一个 DOM 元素上滑动时触发

touchend：手指在一个 DOM 元素上移开时触发

<body><div></div><script>const div = document.querySelector('div')div.addEventListener('touchstart', function () {console.log('有人摸我')})div.addEventListener('touchend', function () {console.log('移走了')})div.addEventListener('touchmove', function () {console.log('一直摸')})</script>
</body>

（二）插件地址

先下载然后把css 和 javascript 文件夹拖入到我们项目文件夹下，然后分别引入 css 和 js 文件夹

和 <script src=''></script>

先查看我们想要的样式然后预览一下右键查看源代码然后把对应的部分复制到相应的地方。

练习：倒计时练习

界面展示：

代码部分：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>div {width: 200px;height: 50px;background-color: pink;}
</style>
<body><div><span class="hour"></span><span class="minutes"></span><span class="scond"></span></div><script>function getTime(){const now = +new Date()const last = +new Date('2024-3-24 18:30:00')const count = (last - now) / 1000let h = parseInt(count / 60 / 60 % 24)h = h < 10 ? '0' + h : hlet m = parseInt(count / 60 % 60)m = m < 10 ? '0' + m : mlet s = parseInt(count % 60)s = s < 10 ? '0' + s : sconst hour = document.querySelector('.hour')const minutes = document.querySelector('.minutes')const scond = document.querySelector('.scond')hour.innerHTML = hminutes.innerHTML = mscond.innerHTML = s}getTime()setInterval(getTime,1000)</script>
</body></html>

练习：学生信息表

页面展示：

代码部分：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>* {margin: 0;padding: 0;}li {float: left;list-style: none;margin-left: 10px;}ul li:first-child {margin-left: 0;}.header {width: 80%;height: 50px;margin: 0 auto;background-color: red;}.bottom {width: 80%;margin: 0 auto;background-color: gray;}input {width: 60px;}h3 {text-align: center;}tbody {width: 100%;}table {width: 100%;}tr {width: 100%;}th {padding: 0 20px;text-align: center;}tr {padding: 0 20px;text-align: center;}
</style><body><form class="info"><div class="header"><h3>新增学员</h3><div class="limian"><ul><li>姓名: <input type="text" class="uname" name="uname"></li><li>年龄: <input type="text" class="age" name="age"></li><li>性别:<select class="gender" name="gender" name="gender"><option>男</option><option>女</option></select></li><li>薪资: <input type="text" class="salary" name="salary"></li><li>就业城市:<select class="city" name="city"><option>北京</option><option>南京</option></select></li><li><button>录入</button></li></ul></div></div></form><div class="bottom"><h3>就业榜</h3><div class="xiamian"><table class="tab"><thead><tr><th>学号</th><th>姓名</th><th>年龄</th><th>性别</th><th>薪资</th><th>就业城市</th><th>操作</th></tr></thead><tbody><!-- <tr><td></td><td></td><td></td><td></td><td></td><td></td><td><a href="javascript:">删除</a></td></tr> --></tbody></table></div></div><script>const arr = []const uname = document.querySelector('.uname')const age = document.querySelector('.age')const gender = document.querySelector('.gender')const salary = document.querySelector('.salary')const city = document.querySelector('.city')const info = document.querySelector('.info')const tbody = document.querySelector('tbody')const items = document.querySelectorAll('[name]')info.addEventListener('submit', function (e) {e.preventDefault()for (let i = 0; i < items.length; i++) {if (items[i].value === '') {return alert('输入内容不能为空')}}const obj = {stuId: arr.length + 1,uname: uname.value,age: age.value,gender: gender.value,salary: salary.value,city: city.value}arr.push(obj)this.reset()rander()})function rander() {tbody.innerHTML = ``for (let i = 0; i < arr.length; i++) {const tr = document.createElement('tr')tr.innerHTML = `<td>${arr[i].stuId}</td><td>${arr[i].uname}</td><td>${arr[i].age}</td><td>${arr[i].gender}</td><td>${arr[i].salary}</td><td>${arr[i].city}</td><td><a href="javascript:" data-id='${i}'>删除</a></td>`tbody.appendChild(tr)}}tbody.addEventListener('click', function (e) {if (e.target.tagName === 'A') {arr.splice(e.target.dataset.id, 1)console.log(arr)rander()}})</script>
</body></html>