DOM- 节点操作
节点操作
初识节点
1.什么是节点？
DOM树里每一个内容都称之为节点
2.节点的类型
- 元素节点
- 所有的标签 比如 body、 div
- html 是根节点
- 属性节点
- 所有的属性 比如 href
- 文本节点
- 所有的文本
查找节点
节点关系
- 父节点
- 子节点
- 兄弟节点
父节点查找
子级可以通过parentNode 查找到最近的父级,并给父级修改属性。
- parentNode 属性
- 返回最近一级的父节点 找不到返回为null
语法
代码展示
<body>
<div>
<span></span>
</div>
<script>
let span = document.querySelector('span')
span.parentNode.innerText = '这是父级节点测试'
</script>
</body>
案例
1.关闭单个淘宝二维码：通过点击子盒子，让父盒子隐藏
<body>
<div>
<img src="./image/1.png" alt="" class="img">
<img src="./image/2.png" alt="">
</div>
<script>
let img = document.querySelector('.img')
img.addEventListener('click', function () {
img.parentNode.style.display = 'none'
})
</script>
</body>
2.选择关闭多个二维码
<body>
<div>1
<img src="./image/1.png" alt="" class="img">
<img src="./image/2.png" alt="" class="img2">
</div>
<div>2
<img src="./image/1.png" alt="" class="img">
<img src="./image/2.png" alt="" class="img2">
</div>
<div>3
<img src=" ./image/1.png" alt="" class="img">
<img src="./image/2.png" alt="" class="img2">
</div>
<div>4
<img src=" ./image/1.png" alt="" class="img">
<img src="./image/2.png" alt="" class="img2">
</div>
<script>
let imgList = document.querySelectorAll('.img')
// let imgList2 = document.querySelectorAll('img2')
for (let index = 0; index < imgList.length; index++) {
imgList[index].addEventListener('click', function () {
imgList[index].parentNode.style.display = 'none'
// this.parentNode.style.display = 'none'
})
}
</script>
</body>
子节点查找
- childNodes
- 获得所有子节点、包括文本节点（空格、换行）、注释节点等
- children （重点）
- 仅获得所有元素节点
- 返回的还是一个伪数组
语法
兄弟关系查找
- 下一个兄弟节点
- nextElementSibling 属性
- 上一个兄弟节点
- previousElementSibling 属性
增加节点
步骤
- 创建一个新的节点
- 把创建的新的节点放入到指定的元素内部
1.创建节点
-
即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点
-
创建元素节点方法
-
创建文本节点
document.createTextNode(data)data : 字符串值，可规定此节点的文本。
2.追加节点
-
要想在界面看到，还得插入到某个父元素中
-
插入到父元素中某个子元素的前面
-
插入到父元素的最后一个子元素
案例
增加节点
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
// 增加节点li
// let li = document.createComment('li')
let li = document.createElement('li');
li.innerText = "这个是新创建的li标签";
// 插入
let ul = document.querySelector('ul')
// ul.appendChild(li)
ul.appendChild(li);
</script>
</body>
3.克隆节点
-
特殊情况下，我们新增节点，按照如下操作：
- 复制一个原有的节点
- 把复制的节点放入到指定的元素内部
-
克隆节点
-
cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值
-
若为true，则代表克隆时会包含后代节点一起克隆--深拷贝
-
若为false，则代表克隆时不包含后代节点--浅拷贝
-
默认为false
代码展示
<style>
div {
width: 100px;
height: 100px;
background-color: aqua;
border: 1px solid black;
}
</style>
</head>
<body>
<div>
<button>点击</button>
</div>
<script>
let div = document.querySelector('div')
let newBox = div.cloneNode()
let newBox2 = div.cloneNode(true)
document.body.appendChild(newBox) //浅克隆,不会克隆div中的子节点
document.body.appendChild(newBox2) //深克隆,会将其中的所有节点克隆进去
</script>
</body>
删除节点
- 若一个节点在页面中已不需要时，可以删除它
- 在 JavaScript 原生DOM操作中，要删除元素必须通过父元素删除
语法
代码展示
<body>
<button>点击删除</button>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
<script>
let button = document.querySelector('button')
let ul = document.querySelector('ul')
button.addEventListener('click', function () {
let li = document.querySelector('li:nth-child(1)');
ul.removeChild(li)
/* 父元素.removeChild(要删除的元素) */
// button.remove()
// 父元素.remove() 删除自己
})
</script>
</body>
注意
- 如不存在父子关系则删除不成功
- 删除节点和隐藏节点（display:none） 有区别的： 隐藏节点还是存在的，但是删除，则从html中删除节点
时间对象
- 时间对象：用来表示时间的对象
- 作用：可以得到当前系统时间
1.实例化
- 在代码中发现了 new 关键字时，一般将这个操作称为实例化
- 创建一个时间对象并获取时间
获取当前时间
获取指定时间
2.时间对象方法
- 因为时间对象返回的数据我们不能直接使用，所以需要转换为实际开发中常用的格式
格式
| 方法 | 作用 | 说明 |
|---|---|---|
| getFullYear() | 获得年份 | 获取四位年份 |
| getMonth() | 获得月份 | 取值为 0 ~ 11 |
| getDate() | 获取月份中的每一天 | 不同月份取值也不相同 |
| getDay() | 获取星期 | 取值为 0 ~ 6 |
| getHours() | 获取小时 | 取值为 0 ~ 23 |
| getMinutes() | 获取分钟 | 取值为 0 ~ 59 |
| getSeconds() | 获取秒 | 取值为 0 ~ 59 |
案例
需求：将当前时间以：YYYY-MM-DD HH:mm 形式显示在页面
分析：
- ①：调用时间对象方法进行转换
- ②：字符串拼接后，通过 innerText 给 标签
3.时间戳
定义
1.什么是时间戳
是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式
语法
三种方式获取时间戳
-
使用 getTime() 方法
-
简写 +new Date()
-
使用 Date.now()
- 无需实例化
- 但是只能得到当前的时间戳， 而前面两种可以返回指定时间的时间戳
代码展示
<script>
// 获取时间戳的三种方式
let date = new Date();
console.log(date.getTime()); //方式一
// 方式二
console.log(+new Date());
// 方式三
console.log(Date.now());
</script>
案例
在线时钟案例,在页面中显示年月日时分秒
<body>
<h1></h1>
<!-- 1.先写出当前的年月日
2.再使用定时器,将数据包含 -->
<script>
let h1 = document.querySelector('h1')
setInterval(() => {
let date = new Date();
let years = date.getFullYear();
let month = date.getMonth() + 1;
let dates = date.getDate();
let hours = date.getHours();
let minimum = date.getMinutes();
let seconds = date.getSeconds();
h1.innerText = `${years}-${month}-${dates} ${hours}:${minimum}:${seconds}`
}, 1000);
</script>
</body>
4.综合案例
发布微博案例
- 需求1：检测用户输入字数\
- 注册input事件
- 将文本的内容的长度赋值给对应的数值
- 表单的maxlength属性可以直接限制在200个数之间
- 需求2： 输入不能为空
- 表单的maxlength属性可以直接限制在200个数之间
- 防止输入无意义空格, 使用字符串.trim()去掉首尾空格 并将表单的value值设置为空字符串 同时下面红色为设置为0
- 需求3： 新增留言
- 创建一个小li，然后里面通过innerHTML追加数据
- 随机获取数据数组里面的内容, 替换newNode的图片和名字以及留言内容
- 利用时间对象将时间动态化 new Date().toLocaleString()
- 追加给 ul
- 需求4：删除留言
- 在事件处理函数里面获取点击按钮,注册点击事件
- (易错点: 必须在事件里面获取,外面获取不到)
- 删除对应的元素 (通过this获取对应的那条需要删除的元素)
- 教你一招: 放到追加进ul的前面，这样创建元素的同时顺便绑定了事件，赞~~
- 需求5：重置
- 将表单域内容重置为空
- 将userCount里面的内容重置为0
案例成品
完整代码:
<!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>Document</title>
<link rel="stylesheet" href="css/weibo.css" />
</head>
<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>
<!-- <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/9.5/01.jpg' },
{ uname: '女娲', imgSrc: './images/9.5/02.jpg' },
{ uname: '百里守约', imgSrc: './images/9.5/03.jpg' },
{ uname: '亚瑟', imgSrc: './images/9.5/04.jpg' },
{ uname: '虞姬', imgSrc: './images/9.5/05.jpg' },
{ uname: '张良', imgSrc: './images/9.5/06.jpg' },
{ uname: '安其拉', imgSrc: './images/9.5/07.jpg' },
{ uname: '李白', imgSrc: './images/9.5/08.jpg' },
{ uname: '阿珂', imgSrc: './images/9.5/09.jpg' },
{ uname: '墨子', imgSrc: './images/9.5/10.jpg' },
{ uname: '鲁班', imgSrc: './images/9.5/11.jpg' },
{ uname: '嬴政', imgSrc: './images/9.5/12.jpg' },
{ uname: '孙膑', imgSrc: './images/9.5/13.jpg' },
{ uname: '周瑜', imgSrc: './images/9.5/14.jpg' },
{ uname: '老夫子', imgSrc: './images/9.5/15.jpg' },
{ uname: '狄仁杰', imgSrc: './images/9.5/16.jpg' },
{ uname: '扁鹊', imgSrc: './images/9.5/17.jpg' },
{ uname: '马可波罗', imgSrc: './images/9.5/18.jpg' },
{ uname: '露娜', imgSrc: './images/9.5/19.jpg' },
{ uname: '孙悟空', imgSrc: './images/9.5/20.jpg' },
{ uname: '黄忠', imgSrc: './images/9.5/21.jpg' },
{ uname: '百里玄策', imgSrc: './images/9.5/22.jpg' },
];
// 绑定点击事件
let ul = document.querySelector('ul')
let send = document.querySelector('#send')
let useCount = document.querySelector('.useCount')
send.addEventListener('click', function () {
// 随机选择头像跟名字
let index = Math.round(Math.random() * (dataArr.length - 1))
let user = dataArr[index]
// 构建架构
let li = document.createElement('li')
let info = document.createElement('div')
info.classList.add('info')
let userpic = document.createElement('img')
userpic.classList.add('userpic')
// userpic.src = "./images/9.5/06.jpg"
userpic.src = user.imgSrc
let username = document.createElement('span')
username.classList.add('username')
username.innerText = user.uname
let sendTime = document.createElement('p')
sendTime.classList.add('send-time')
sendTime.innerText = `发布于 ${getTime()}`
// 包起来
info.append(userpic, username, sendTime)
let content = document.createElement('div')
content.classList.add('content')
content.innerText = area.value
let theDel = document.createElement('span')
theDel.classList.add('the_del')
theDel.innerText = 'X' //删除"X"标签
theDel.addEventListener('click', function () {
// theDel.parentNode.remove()
this.parentNode.remove()
})
li.append(info, content, theDel)
ul.appendChild(li)
area.value = ''
useCount.innerText = '0'
})
// Input事件
area.addEventListener('input', function () {
useCount.innerText = area.value.length;
})
function getTime() {
let date = new Date();
let years = date.getFullYear();
let month = date.getMonth() + 1;
let dates = date.getDate();
let hours = date.getHours();
let minimum = date.getMinutes();
let seconds = date.getSeconds();
return `${years}-${month}-${dates} ${hours}:${minimum}:${seconds}`
}
</script>
</body>
</html>
