Web APIs知识点讲解(阶段三)

DOM- 节点操作

一.节点操作

1.DOM节点

目标：能说出DOM节点的类型

DOM节点

DOM树里每一个内容都称之为节点

节点类型

元素节点

所有的标签比如 body、 div

html 是根节点

属性节点

所有的属性比如 href

文本节点

所有的文本

document树：

总结：

1. 什么是DOM 节点？

 DOM树里每一个内容都称之为节点

2. DOM节点的分类？

 元素节点比如 div标签

 属性节点比如 class属性

 文本节点比如标签里面的文字

3. 我们重点记住那个节点？

 元素节点

 可以更好的让我们理清标签元素之间的关系

2.查找节点

目标：能够具备根据节点关系查找目标节点的能力

关闭二维码案例：

点击关闭按钮，关闭的是二维码的盒子，还要获取erweima盒子

思考：

关闭按钮和 erweima 是什么关系呢？
父子关系
所以，我们完全可以这样做：
点击关闭按钮，直接关闭它的爸爸，就无需获取erweima元素了

节点关系：

父节点
子节点
兄弟节点

父节点查找：

parentNode 属性
返回最近一级的父节点找不到返回为null

<!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>
<body><div class="father"><div class="son">儿子</div></div><script>let son = document.querySelector('.son')//  找爸爸//console.log(son.parentNode)//此项运行时会返回Null,被隐藏了//son.parentNode.style.display = 'none'</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><style>* {margin: 0;padding: 0;}.erweima {position: relative;width: 160px;height: 160px;margin: 100px auto;border: 1px solid #ccc;}.erweima i {position: absolute;left: -13px;top: 0;width: 10px;height: 10px;border: 1px solid #ccc;font-size: 12px;line-height: 10px;color: #ccc;font-style: normal;cursor: pointer;}</style>
</head><body><div class="erweima"><img src="./images/code.png" alt=""><i class="close_btn">x</i></div><script>//1.获取元素 事件源i 关闭的二维码erweimalet close_btn = document.querySelector('.close_btn')//2.事件监听close_btn .addEventListener('click',function(){//找他爸，this指的就是close_btnthis.parentNode.style.display = 'none'})</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><style>.erweima {width: 149px;height: 152px;border: 1px solid #000;background: url(./images/456.png) no-repeat;position: relative;}.close {position: absolute;right: -52px;top: -1px;width: 50px;height: 50px;background: url(./images/bgs.png) no-repeat -159px -102px;cursor: pointer;border: 1px solid #000;}</style>
</head><body><div class="erweima"><span class="close"></span></div><div class="erweima"><span class="close"></span></div><div class="erweima"><span class="close"></span></div><div class="erweima"><span class="close"></span></div><div class="erweima"><span class="close"></span></div><script>// 获取元素let close_btn = document.querySelectorAll('.close')//2.绑定多个点击事件给closefor (let i = 0;i < close_btn.length;i++){close_btn[i].addEventListener('click', function(){//3.关闭当前的那个二维码  点击谁，就关闭谁的爸爸this.parentNode.style.display = 'none'})}</script>
</body></html>

子节点查找：

childNodes

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

children （重点）

仅获得所有元素节点

返回的还是一个伪数组

<!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>
<body><button>点击</button><ul><li>我是孩纸</li><li>我是孩纸</li><li>我是孩纸</li><li>我是孩纸</li><li>我是孩纸</li><li>我是孩纸</li></ul><script>let btn = document.querySelector('button')let ul = document.querySelector('ul')btn.addEventListener('click',function(){// console.log(ul.children)for (let i = 0;i < ul.children.length;i++){ul.children[i].style.color = 'red'}})ul.children[1].style.color = 'green'//console.log(ul.childNodes)</script>
</body>
</html>

兄弟关系查找：

1. 下一个兄弟节点：nextElementSibling 属性

2. 上一个兄弟节点：previousElementSibling 属性

<!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>
<body><button>点击</button><ul><li>第1个</li><li>第2个</li><li>第3个</li><li>第4个</li></ul><script>let btn = document.querySelector('button')let two = document.querySelector('.two')btn.addEventListener('click',function(){two.nextElementSibling.style.color = 'red'two.previousElementSibling.style.color = 'red'})</script>
</body>
</html>

1. 查找父节点用那个属性？

 parentNode

2. 查找所有子节点用那个属性？

 children

3. 查找兄弟节点用那个属性？

 nextElementSibling

 previousElementSibling

3.增加节点

目标：能够具备根据需求新增节点的能力

1).创建节点

 即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点

 创建元素节点方法：

2).追加节点

 要想在界面看到，还得插入到某个父元素中

 插入到父元素的最后一个子元素:

<!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>
<body><ul><li>我是大毛</li><li>我是二毛</li></ul><script>//二毛 ul.children[1]//1.创建新的标签节点// let div = document.createElement('div')//div.className = 'current'let ul = document.querySelector('ul')let li = document.createElement('li')li.innerHTML = '我是小li'//2.追加节点 父元素.appendChild(子元素)  后面追加ul.appendChild(li)</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>
<body><ul><li>我是大毛</li><li>我是二毛</li></ul><script>//二毛 ul.children[1]//1.创建新的标签节点// let div = document.createElement('div')//div.className = 'current'let ul = document.querySelector('ul')let li = document.createElement('li')li.innerHTML = '我是小li'//2.追加节点 父元素.appendChild(子元素)  后面追加// ul.appendChild(li)//3.追加节点 父元素.insertBefore(子元素,放到哪个元素的前面)  ul.insertBefore(li,ul.children[1])</script>
</body>
</html>

案例:学成在线案例渲染

需求：按照数据渲染页面分析：

①：准备好空的ul 结构
②：根据数据的个数，创建一个新的空li
③：li里面添加内容 img 标题等
④：追加给ul

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>学车在线首页</title><link rel="stylesheet" href="style.css"><style></style>
</head><body><!-- 4. box核心内容区域开始 --><div class="box w"><div class="box-hd"><h3>精品推荐</h3><a href="#">查看全部</a></div><div class="box-bd"><ul class="clearfix"><!-- <li><img src="./images/course01.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> • <span> 1125</span>人在学习</div></li> --></ul></div></div><script>let data = [{src: 'images/course01.png',title: 'Think PHP 5.0 博客系统实战项目演练',num: 1125},{src: 'images/course02.png',title: 'Android 网络动态图片加载实战',num: 357},{src: 'images/course03.png',title: 'Angular2 大前端商城实战项目演练',num: 22250},{src: 'images/course04.png',title: 'Android APP 实战项目演练',num: 389},{src: 'images/course05.png',title: 'UGUI 源码深度分析案例',num: 124},{src: 'images/course06.png',title: 'Kami2首页界面切换效果实战演练',num: 432},{src: 'images/course07.png',title: 'UNITY 从入门到精通实战案例',num: 888},{src: 'images/course08.png',title: '我会变，你呢？',num: 590},{src: 'images/course08.png',title: '我会变，你呢？',num: 590}]let ul = document.querySelector('ul')//1.根据数据的个数 ，决定这个小Li的个数for (let i =0;i < data.length;i++){//2.创建小lilet li = document.createElement('li')//console,log(li)//4.先准备好内容，再追加li.innerHTML=`<img src="${data[i].src}" alt=""><h4>${data[i].title}</h4><div class="info"><span>高级</span> • <span> ${data[i].num}</span>人在学习</div>`//3.追加给ul 父元素.appendChild(子元素)ul.appendChild(li)}</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>
<body><ul><li>我是内容</li></ul><script>let ul = document.querySelector('ul')//括号为空则默认为false 如果是false则不克隆后代节点// let newUL = ul.cloneNode()//如果是true则克隆后代节点let newUL = ul.cloneNode(true)document.body.appendChild(newUL)</script>
</body>
</html>

cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值

 若为true，则代表克隆时会包含后代节点一起克隆

 若为false，则代表克隆时不包含后代节点

 默认为false

3).删除节点

目标：能够具备根据需求删除节点的能力

若一个节点在页面中已不需要时，可以删除它
在 JavaScript 原生DOM操作中，要删除元素必须通过父元素删除

语法：

注：

如不存在父子关系则删除不成功
删除节点和隐藏节点（display:none）有区别的：隐藏节点还是存在的，但是删除，则从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>
<body><button>点击</button><ul><li>我是内容11111</li></ul><script>//需求，点击按钮,删除小lilet btn = document.querySelector('button')let ul = document.querySelector('ul')btn.addEventListener('click',function(){//删除的语法 父元素.removeChild(子元素)ul.removeChild(ul.children[0])})</script>
</body>
</html>

二.时间对象

目标：掌握时间对象，可以让网页显示时间

 时间对象：用来表示时间的对象

 作用：可以得到当前系统时间

1.实例化

目标：能够实例化时间对象

在代码中发现了 new 关键字时，一般将这个操作称为实例化,创建一个时间对象并获取时间

获得当前时间
获得指定时间

<!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>
<body><script>//let arr = []// let arr = new Array()// let obj = {}// let obj = new Object()//new 实例化 时间对象//小括号为空可以得到当前时间let date = new Date()console.log(date)//小括号里面写上时间，可以返回指定的时间let last = new Date('2024-3-27 10:09:00')console.log(last)</script>
</body>
</html>

2.时间对象方法

目标：能够使用时间对象中的方法写出常见日期

因为时间对象返回的数据我们不能直接使用，所以需要转换为实际开发中常用的格式

方法	作用	说明
getFullYear()	获得年份	获取四位年份
getMonth()	获得月份	取值为 0 ~ 11
getDate()	获取月份中的每一天	不同月份取值也不相同
getDay()	获取星期	取值为0 ~ 6
getHours()	获取小时	取值为 0 ~ 23
getMinutes()	获取分钟	取值为 0 ~ 59
getSeconds()	获取秒	取值为 0 ~ 59

<!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>
<body><script>//new 实例化 时间对象//小括号为空可以得到当前的时间let date = new Date()console.log(date.getFullYear()) //年console.log(date.getMonth() + 1) //月console.log(date.getDate())   //日console.log(date.getHours())   //时console.log(date.getMinutes())   //分console.log(date.getSeconds())   //秒console.log(date.getDay() ) //星期几</script>

案例：页面显示时间

需求：将当前时间以：YYYY-MM-DD HH:mm 形式显示在页面

分析： ①：调用时间对象方法进行转换 ②：字符串拼接后，通过 innerText 给标签

<!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>
<body><div></div><script>let arr =['星期日','星期一','星期二','星期三','星期四','星期五','星期六',]//1.实例化事件对象setInterval(function(){let date = new Date()let year = date.getFullYear()let month = date.getMonth() + 1let date1 = date.getDate()let hour = date.getHours()let min = date.getMinutes()let sec = date.getSeconds()let day = date.getDay()let div = document.querySelector('div')div.innerHTML=`今天是：${year}年${month}月${date1}日 ${hour}:${min}:${sec} ${arr[day]}`},1000)</script>
</body>
</html>