DOM—节点操作
DOM节点
1.DOM节点：DOM树立每一个内容都称之为节点
2.节点类型
1）元素节点
-
所有的标签 比如 body、 div
-
html 是根节点
2）属性节点
- 所有的属性 比如href、class
3）文本节点
- 所有的文本 比如标签里面的文字
4）其他
查找节点
1.父节点查找
-
parentNode 属性
-
返回最近一级的父节点 找不到返回为null
2.子节点查找
1）childNodes：
- 获得所有子节点、包括文本节点（空格、换行）、注释节点等
2）children （重点）
-
仅获得所有元素节点
-
返回的还是一个伪数组
3.兄弟关系查找
1）下一个兄弟节点：nextElementSibling 属性
2）上一个兄弟节点：previousElementSibling 属性
增加节点
1.创建节点
-
即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点
-
创建元素节点方法：
2.追加节点
1）要想在界面看到，还得插入到某个父元素中
2）插入到父元素的最后一个子元素:
3）插入到父元素中某个子元素的前面
4）特殊情况下，我们新增节点，按照如下操作：
-
复制一个原有的节点
-
把复制的节点放入到指定的元素内部
删除节点
1.若一个节点在页面中已不需要时，可以删除它
2.在 JavaScript 原生DOM操作中，要删除元素必须通过父元素删除
3.语法：
4.注意：
-
如不存在父子关系则删除不成功
-
删除节点和隐藏节点（display:none） 有区别的： 隐藏节点还是存在的，但是删除，则从html中删除节点
克隆节点
1.cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值
-
若为true，则代表克隆时会包含后代节点一起克隆--深拷贝
-
若为false，则代表克隆时不包含后代节点--浅拷贝
-
默认为false
案例
1.关闭二维码（父节点）
<body>
<div class="box">
<img src="./images/code.png" alt="" class="code">
<img src="./images/guanbi.png" alt="" class="close">
</div>
<script>
let codes = document.querySelector('.code')
let closes = document.querySelector('.close')
closes.addEventListener('click', function() {
closes.parentNode.style.display = 'none'
})
</script>
</body>
2.多个二维码，点击谁，关闭谁
<body>
<div class="box">
<img src="./images/code.png" alt="" class="code">
<img src="./images/guanbi.png" alt="" class="close">
</div>
<hr>
<div class="box">
<img src="./images/code.png" alt="" class="code">
<img src="./images/guanbi.png" alt="" class="close">
</div>
<hr>
<div class="box">
<img src="./images/code.png" alt="" class="code">
<img src="./images/guanbi.png" alt="" class="close">
</div>
<hr>
<div class="box">
<img src="./images/code.png" alt="" class="code">
<img src="./images/guanbi.png" alt="" class="close">
</div>
<script>
let closes = document.querySelectorAll('.close')
for (let i = 0; i < closes.length; i++) {
closes[i].addEventListener('click', function() {
this.parentNode.style.display = 'none'
})
}
</script>
</body>
3.子节点查找
<style>
ul {
background-color: cornflowerblue;
height: 150px;
}
ul li {
background-color: darkgray;
}
</style>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
let uls = document.querySelectorAll('ul');
let lis = document.querySelectorAll('li');
for (let i = 0; i < uls.length; i++) {
uls[i].addEventListener('click', function() {
for (let j = 0; j < this.children.length; j++) {
this.children[j].style.display = 'none'
}
})
}
</script>
</body>
4.兄弟节点查找
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
let lis = document.querySelectorAll('li');
for (let i = 0; i < lis.length; i++) {
lis[i].addEventListener('click', function() {
this.previousElementSibling.style.backgroundColor = 'blue'
this.nextElementSibling.style.backgroundColor = 'green'
})
}
</script>
</body>
5.创建节点和追加节点
<style>
ul {
height: 100px;
background-color: teal;
}
</style>
<body>
<ul></ul>
<script>
//1.先创建一个li标签节点
let li = document.createElement('li')
li.innerText = "新创建的li标签"
li.style.backgroundColor = "blue"
//2.把li标签插入ul标签中
let ul = document.querySelector('ul');
ul.appendChild(li);
</script>
</body>
6.剪切（追加节点）
<style>
.left {
width: 300px;
height: 300px;
background-color: darkcyan;
float: left;
margin-right: 20px;
color: aliceblue;
}
.left li {
margin: 10px;
}
.right {
width: 300px;
height: 300px;
background-color: darkslateblue;
float: left;
color: aliceblue;
}
.right li {
margin: 10px;
}
</style>
<body>
<ul class="left">
<li>麦麦脆汁鸡</li>
<li>原味板烧堡</li>
<li>麦辣鸡腿堡</li>
<li>吉士汉堡包</li>
<li>酥酥多笋卷</li>
</ul>
<ul class="right"></ul>
<script>
let lis = document.querySelectorAll('li');
let right = document.querySelector('.right')
let left = document.querySelector('.left')
for (let i = 0; i < lis.length; i++) {
lis[i].addEventListener('click', function() {
right.appendChild(lis[i])
})
}
// let lis = document.querySelectorAll('li');
// let right = document.querySelector('.right')
// let left = document.querySelector('.left')
// let perent;
// for (let i = 0; i < lis.length; i++) {
// lis[i].addEventListener('click', function() {
// parent = this.parentNode !== right ? right : left;
// parent.appendChild(this)
// })
// }
</script>
</body>
7.增加节点
<style>
.left {
width: 200px;
height: 200px;
background-color: cornflowerblue;
margin-right: 20px;
float: left;
}
.right {
float: left;
width: 200px;
height: 200px;
background-color: turquoise;
}
</style>
<body>
<ul class="left">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
<ul class="right">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
let c = document.querySelector('.left li:nth-child(3)')
let two = document.querySelector('.right li:nth-child(2)')
let right = document.querySelector('.right')
let left = document.querySelector('.left')
// right.insertBefore(c, two)
let li = document.createElement('li');
li.innerText = 'new';
right.insertBefore(li, two);
left.insertBefore(li, c);
</script>
</body>
8.克隆节点
<style>
div {
width: 100px;
height: 100px;
background-color: teal;
margin-bottom: 20px;
}
</style>
<body>
<div>
<button>按钮</button>
</div>
<script>
let div = document.querySelector('div');
let newBox = div.cloneNode(false) //浅克隆 后代标签不会被克隆
// let newBox = div.cloneNode(true) //深克隆，后代标签会被克隆
document.body.appendChild(newBox)
</script>
</body>
时间对象
本质：用来表示时间的对象
作用：可以得到当前系统时间
实例化
1.在代码中发现了 new 关键字时，一般将这个操作称为实例化
2.创建一个时间对象并获取时间
-
获取当前时间：let date = new Date()
-
获取指定时间：let date = new Date('1949-10-01')
时间对象方法
| 方法 | 作用 | 说明 |
|---|---|---|
| getFullYear( ) | 获得年份 | 获取四位年份 |
| getMonth() | 获得月份 | 取值为0~11 |
| getDate() | 获取月份中的每一天 | 不同月份取值也不同 |
| getDay() | 获取星期 | 取值为0~6 |
| getHours() | 获取小时 | 取值为0~23 |
| getMinutes() | 获取分钟 | 取值为0~59 |
| getSeconds() | 获取秒 | 取值为0~59 |
时间戳
1.什么是时间戳
- 是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式
2.三种方式获取时间：
1）使用getTime()方式
2）简写 +new Date()
3）使用Date.now()
4）无需实例化
5）但是只能得到当前的时间戳，而前面两种可以返回指定时间的时间戳
综合案例
1.发布微博案例
<body>
<div class="w">
<div class="controls">
<img src="images/tip.png" alt="" /><br />
<textarea placeholder="说点什么吧..." id="area" cols="30" rows="100" maxlength="200"></textarea>
<div>
<span class="useCount">0</span>
<span>/</span>
<span>200</span>
<button id="send">发布</button>
</div>
</div>
<div class="contentList">
<ul class="list">
<!-- <li>
<div class="info">
<img class="userpic" src="./images/9.5/06.jpg" />
<span class="username">张良</span>
<p class="send-time">发布于 2022-4-7 15:12:23</p>
</div>
<div class="content">sdfdf</div>
<span class="the_del">X</span>
</li> -->
</ul>
</div>
</div>
<script>
let dataArr = [{
uname: '花木兰',
imgSrc: './images/1花木兰.jpg'
}, {
uname: '芈月',
imgSrc: './images/2芈月.jpg'
}, {
uname: '孙悟空',
imgSrc: './images/3孙悟空.jpg'
}, {
uname: '杨玉环',
imgSrc: './images/4杨玉环.jpg'
}, {
uname: '关羽',
imgSrc: './images/5关羽.jpg'
}, {
uname: '曹操',
imgSrc: './images/6曹操.jpg'
}, {
uname: '鲁班',
imgSrc: './images/7鲁班.jpg'
}, {
uname: '哪吒',
imgSrc: './images/8哪咤.jpg'
}, {
uname: '狂铁',
imgSrc: './images/9狂铁.jpg'
}, {
uname: '廉颇',
imgSrc: './images/10廉颇.jpg'
}, {
uname: '夏侯惇',
imgSrc: './images/11夏侯惇.jpg'
}, {
uname: '狄仁杰',
imgSrc: './images/12狄仁杰.jpg'
}, {
uname: '明世隐',
imgSrc: './images/13明世隐.jpg'
}, {
uname: '伽罗',
imgSrc: './images/14伽罗.jpg'
}, {
uname: '兰陵王',
imgSrc: './images/15兰陵王.jpg'
}, {
uname: '阿珂',
imgSrc: './images/16阿珂.jpg'
}, {
uname: '张飞',
imgSrc: './images/17张飞.jpg'
}, {
uname: '宫本武藏',
imgSrc: './images/18宫本武藏.jpg'
}, {
uname: '成吉思汗',
imgSrc: './images/19成吉思汗.jpg'
}, {
uname: '弈星',
imgSrc: './images/20弈星.jpg'
}]
let area = document.querySelector('#area');
let send = document.querySelector('#send');
let ul = document.querySelector('ul');
let useCount = document.querySelector('.useCount')
//发布
send.addEventListener('click', function() {
//发布的内容等于文本域的内容
let content = area.value;
if (content.trim().length == 0) {
alert('请输入内容')
return
}
//创建一个li标签
let li = document.createElement('li');
let index = Math.round(Math.random() * (dataArr.length - 1))
//li标签里内容
li.innerHTML = `<div class="info">
<img class="userpic" src="${dataArr[index].imgSrc}" />
<span class="username">${dataArr[index].uname}</span>
<p class="send-time">发布于 ${sendTime()}</p>
</div>
<div class="content">${content}</div>
<span class="the_del">X</span>`;
ul.insertBefore(li, ul.children[0]);
//发布后清空
area.value = '';
useCount.innerHTML = 0;
//删除
let del = document.querySelector('.the_del');
del.addEventListener('click', function() {
this.parentNode.remove()
})
})
//字数
area.addEventListener('input', function() {
useCount.innerHTML = area.value.length
})
//发布时间
let sendTime = function() {
let date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
let hour = date.getHours();
let minute = date.getMinutes();
let second = date.getSeconds();
month = month > 10 ? month : '0' + month;
date = day > 10 ? day : '0' + day;
hour = hour > 10 ? hour : '0' + hour;
minute = minute > 10 ? minute : '0' + minute;
second = second > 10 ? second : '0' + second;
return `${year}-${month}-${day} ${hour}:${minute}:${second}`
}
</script>
</body>
2.获取当前时间
<body>
<h1></h1>
<script>
setInterval(function() {
let date = new Date();
console.log(date)
let year = date.getFullYear()
let month = date.getMonth()
let day = date.getDate()
let hour = date.getHours()
let minute = date.getMinutes()
let second = date.getSeconds()
let h1 = document.querySelector('h1')
h1.innerHTML = `北京时间：${year}年${month}月${day}日 ${hour}时${minute}分${second}秒`
}, 1000)
</script>
</body>
