Web APIs 第三天
节点操作
DOM节点： DOM树里每一个内容都称之为节点 节点类型 元素节点：所有的标签 比如 body、 div，html 是根节点 属性节点：所有的属性 比如 href 文本节点：所有的文本 其他
查找节点
节点关系：父节点，子节点，兄弟节点
父节点
父节点查找： parentNode 属性 语法 子元素.parentNode
案例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{
position: relative;
}
.img2{
position: absolute;
left: 0px;
top: 0px;
}
</style>
</head>
<body>
<div>
<img src="./tab栏案例/imgs/9e7f897180ec221ad5481021306c526.png" alt="" class="img1">
<img src="./tab栏案例/imgs/66eeeb4e75d71bff178793379e15f36.png" alt="" class="img2">
</div>
<script>
let imgs = document.querySelector('.img2')
imgs.addEventListener('click',function(){
imgs.parentNode.style.display = 'none'
})
</script>
</body>
</html>
子节点
childNodes：获得所有子节点、包括文本节点（空格、换行）、注释节点等（了解） children ：仅获得所有元素（标签）节点，返回的还是一个伪数组（重点）
语法： 父元素.children
案例2
需求：点击一次，隐藏一组ul标签
<!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>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
let uls = document.querySelectorAll('ul')
for (let index = 0; index < uls.length; index++) {
uls[index].addEventListener('click',function(){
//数组里面的标签相同时，用子节点
//数组里面的数组进行遍历
for (let index1 = 0; index1 < this.children.length; index1++) {
this.children[index1].style.display = 'none'
}
})
}
</script>
</body>
</html>
下一个兄弟节点
语法： nextElementSibling 属性
上一个兄弟节点
语法： previousElementSibling 属性
案例3
<!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>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<script>
let lis = document.querySelectorAll('li')
for (let index = 0; index < lis.length; index++) {
lis[index].addEventListener('click',function(){
//下一个兄弟
this.nextElementSibling.style.backgroundColor = 'red'
//上一个兄弟
this.previousElementSibling.style.backgroundColor = 'green'
})
}
</script>
</body>
</html>
增加节点
目标：能够具备根据需求新增节点的能力 很多情况下，我们需要在页面中增加元素，比如，点击发布按钮，可以新增一条信息 一般情况下，我们新增节点，按照如下操作：创建一个新的节点，把创建的新的节点放入到指定的元素内部
创建节点 语法： document.createElement('标签名')
追加节点 语法：
要插入的地方的父元素，插到元素的最后面
父元素.appendChild(要插入的元素)
要插入的地方的父元素，插入到某个子元素的前面
父元素.inserBefore(要插入的元素，在哪个元素前面)
案例4
需求：按照数据渲染页面
第一种方法
<!-- 1 引入 要显示的数据 -->
<script src="./综合作业素材(1) (2)/data/data.js"></script>
<!-- 2 在写自己的业务 -->
<script>
let ul = document.querySelector('.list')
for (let index = 0; index < data.length; index++) {
//创建所需要的标签
let li = document.createElement('li')
let img = document.createElement('img')
let h4 = document.createElement('h4')
let div = document.createElement('div')
let span1 = document.createElement('span')
let span2 = document.createElement('span')
//创建文本节点
let text1 = document.createTextNode('·')
let text2 = document.createTextNode('人在学习')
//引入一系列属性
img.src = data[index].src
h4.innerText = data[index].title
span1.innerText = '高级'
span2.innerText = data[index].num
//把标签增加到所需的标签里，append能增加多个，按写的顺序排列
div.append(span1, text1, span2, text2)
li.append(img, h4, div)
//把li增加到ul里
ul.appendChild(li)
}
</script>
第二种方法：
<!-- 1 引入 要显示的数据 -->
<script src="./综合作业素材(1) (2)/data/data.js"></script>
<!-- 2 在写自己的业务 -->
<script>
let ul = document.querySelector('.list')
for (let index = 0; index < data.length; index++) {
let lis
//字符串拼接
lis =`<li>
<img src=${data[index].src} alt='' />
<h4>
${data[index].title}
</h4>
<div>
<span>高级</span>·<span>${data[index].num}</span>人在学习
</div>
</li>`
//ul里面的文本内容等于li标签，innerHTML可以解析标签
ul.innerHTML += lis
}
</script>
克隆节点
特殊情况下，我们新增节点，按照如下操作： 复制一个原有的节点 把复制的节点放入到指定的元素内部
语法： 要复制的元素.cloneNdoe(布尔值)
cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值 若为true，则代表克隆时会包含后代节点一起克隆--深拷贝 若为false，则代表克隆时不包含后代节点--浅拷贝 默认为false
<div class="box"></div>
<script>
let box = document.querySelector('.box')
let newBox = box.cloneNode()
//参数为true时，克隆为深，会把子元素也克隆，参数为false或者空时，克隆为浅， 只克隆对应的元素
// let newBox = box.cloneNode(true)
document.body.appendChild(newBox)
</script>
删除节点
若一个节点在页面中已不需要时，可以删除它，在 JavaScript 原生DOM操作中，要删除元素必须通过父元素删除
语法： 父元素.removeChild(要删除的元素)
注意点： 如不存在父子关系则删除不成功 删除节点和隐藏节点（display:none） 有区别的： 隐藏节点还是存在的，但是删除，则从html中删除节点
删除自己：
语法： 要删除的元素.remove
<body>
<button>删除</button>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
let but = document.querySelector('button')
let ul = document.querySelector('ul')
//事件里面的内容执行就会走一遍，不执行不会走
but.addEventListener('click',function(){
let lis = document.querySelector('li:nth-child(1)')
//删除第一个li标签
// ul.removeChild(lis)
//删除自身,记得加括号
ul.remove()
})
</script>
</body>
时间对象
实例化
在代码中发现了 new 关键字时，一般将这个操作称为实例化 创建一个时间对象并获取时间
获得当前时间
<script>
//获取当前时间
let time = new Date()
console.log(time);
</script>
获得指定时间
<script>
//获取指定时间
let time = new Date('1949-10-01')
console.log(time);
</script>
时间对象方法
<script>
let time = new Date()
time.getFullYear()//获得四位数的年份
time.getMonth() //获得0~11的月份，使用时要+1
time.getDate() //获得月份的一天，不同的月份值也不同
time.getDay() //获得星期，星期天的值为0，其他对应，取值0~6
time.getHours() //获得时间
time.getMinutes() //获得分钟
time.getSeconds() //获得秒
</script>
案例5
页面显示时间
<body>
<div></div>
<script>
let div = document.querySelector('div')
setInterval(function () {
let time = new Date()
let year = time.getFullYear()
let month = time.getMonth()
let date = time.getDate()
let hours = time.getHours()
let minutes = time.getMinutes()
let seconds = time.getSeconds()
div.innerText = `${year}年${month}月${date}日${hours}:${minutes}:${seconds}`
})
</script>
</body>
时间戳
是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式
三种获取方法
<script>
let time = new Date()
console.log(time.getTime())
</script>
<script>
console.log(+new Date())
</script>
但是只能得到当前的时间戳， 而前面两种可以返回指定时间的时间戳
<script>
console.log(Date.now())
</script>
案例6
需求：计算到下课还有多少时间
<script>
setInterval(function(){
let num = +new Date(2022,04,11,22,00,00) - +new Date()
let hours = parseInt(num / 1000 / 60 / 60 % 24)
let minutes = parseInt(num / 1000 / 60 % 60)
let seconds = parseInt(num / 1000 % 60)
document.body.innerText = `${hours}:${minutes}:${seconds}`
},1000)
</script>
