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 文件夹

<link  rel = 'stylesheet' href=''>

和 <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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/571208.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Python数据分析师工资怎么样？

Python数据分析师工资怎么样？

在大数据时代&#xff0c;提到数据分析&#xff0c;就不得不提到Python&#xff0c;作为一门编程语言&#xff0c;Python用于数据分析时&#xff0c;能够带来很多的优势&#xff0c;这也是Python数据分析师现在受到欢迎的原因。Python数据分析师受到欢迎&#xff0c;相应地能够…
阅读更多...
大数据面试题 —— Kafka

大数据面试题 —— Kafka

目录 消息队列 / Kafka 的好处消息队列的两种模式什么是 KafkaKafka 优缺点你在哪些场景下会选择 Kafka讲下 Kafka 的整体结构Kafka 工作原理 / 流程Kafka为什么那么快/高效读写的原因 / 实现高吞吐的原理生产者如何提高吞吐量&#xff08;调优&#xff09;kafka 消息数据积压&…
阅读更多...
我的创作纪念日 ---- 2024/3/26

我的创作纪念日 ---- 2024/3/26

前言 2024.3.26是我在CSDN成为创作者的第128天&#xff0c;也是我第一次真正在网上创作的第128天 当我还在日常创作时&#xff0c;突然发现我收到了一封信 我想我可以分享一下这段时间的感想以及收获 机缘 在CSDN的这段时间里&#xff0c;我学习到了很多知识&#xff0c;也…
阅读更多...
PTA金字塔游戏

PTA金字塔游戏

幼儿园里真热闹&#xff0c;老师带着孩子们做一个名叫金字塔的游戏&#xff0c;游戏规则如下&#xff1a; 首先&#xff0c;老师把孩子们按身高从高到矮排列&#xff0c;选出最高的做队长&#xff0c;当金字塔的塔顶&#xff0c;之后在其余小朋友里选出两个最高的&#xff0c;…
阅读更多...
鸿蒙开发之ArkUI组件常用组件图片和文本

鸿蒙开发之ArkUI组件常用组件图片和文本

ArkUI即方舟开发框架是HarmonyOS应用的UI开发提供了完整的基础设施&#xff0c;包括简洁的UI语法、丰富的UI功能&#xff08;组件、布局、动画以及交互事件&#xff09;&#xff0c;以及实时界面预览工具等&#xff0c;可以支持开发者进行可视化界面开发。 开发文档地址 &…
阅读更多...
Oracle数据库入门第三课（函数）

Oracle数据库入门第三课（函数）

前面二白讲了一些简单的查询语句&#xff0c;仅仅知道查询语句的语法是不够的&#xff0c;要想实现更多的需求&#xff0c;更重要的是函数的使用&#xff0c;这节课我们简单说一下一些函数的使用。 一、函数的分类 什么叫做函数? 函数就是用来实现某种功能的,提前声明好的代…
阅读更多...
【实现100个unity特效之7】unity 3d实现各种粒子效果

【实现100个unity特效之7】unity 3d实现各种粒子效果

文章目录 先看最终效果下雨效果萤火虫和火花四溅的效果 3d下雨粒子效果涟漪效果雨滴和涟漪效果结合水花效果雨滴涟漪水花结合问题雾气效果萤火虫火花效果萤火虫和火花效果结合其他特效爆炸、闪电、火焰、雷雨特效&#xff08;2023/7/5更新&#xff09;源码完结 先看最终效果 下…
阅读更多...
Capture One 12 下载地址及安装教程

Capture One 12 下载地址及安装教程

Capture One 12 安装教程 复制 Capture One是一款专业的图像编辑和管理软件&#xff0c;由丹麦公司Phase One开发。它广泛应用于专业摄影师和摄影爱好者之间的图像后期处理和管理。 Capture One提供了强大的图像编辑工具和功能&#xff0c;用于调整曝光、对比度、色彩、白…
阅读更多...
如何利用nginx在windows系统上搭建一个文件服务器

如何利用nginx在windows系统上搭建一个文件服务器

1&#xff1a;先下载windows版的nginx 官网 http://nginx.org/ 下载完后注意端口号&#xff08;默认端口号为&#xff1a;80&#xff09;是否被占用 启动nginx服务 地址为localhost的 如果出现 Welcome to nginx 就说明启动成功 2&#xff1a;然后进入conf文件里修改配置 …
阅读更多...
如何在Java中创建Excel表单控件

如何在Java中创建Excel表单控件

前言 在数据填报时&#xff0c;创建Excel表单控件是一项常见的任务&#xff0c;它可以极大地简化数据收集和处理的过程。传统的做法需要在Excel中开启开发工具&#xff0c;并且自己手动添加&#xff0c;如下图&#xff0c;就是一个常见的表单控件。 而在Java中&#xff0c;可…
阅读更多...
基于朴素贝叶斯算法和vue分离式架构的新闻数据情感分析可视化

基于朴素贝叶斯算法和vue分离式架构的新闻数据情感分析可视化

基于朴素贝叶斯算法和vue分离式架构的新闻数据情感分析可视化 作品简介一、技术栈二、功能三、系统展示 作品简介 在本篇博客中&#xff0c;我将带您探索一个基于Python的新闻数据分析项目&#xff0c;其中涉及爬虫、可视化、情感分析等多种技术&#xff0c;并通过整合Django和…
阅读更多...
nodejs中使用WebScoket的简单示例

nodejs中使用WebScoket的简单示例

前言 WebScoket可以用来实现即时通信,一般用于通信聊天工具或者是需要实时接受数据等功能 在浏览器环境中,WebScoket是一个构造函数,需要new创建连接的实例; 在nodejs环境中,则需要使用ws模块来完成服务的创建。 示例 下面是可以直接使用的代码,不需要修改 node创建服务端…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023