节点操作
本质上针对标签本身的增删查
DOM 节点
DOM树里每一个内容都称之为节点
DOM节点的分类
元素节点 比如 div标签 属性节点 比如 class属性 文本节点 比如标签里面的文字
查找节点
节点关系
父节点/查找
语法
子元素.parentNode
注：返回最近一级的父节点，返回的是dom元素，找不到返回为null
子节点/查找
语法
// 获得所有子节点、包括文本节点（空格、换行）、注释节点等（不方便）
父元素.childNodes
// 仅获得所有元素节点，不包含文本和注释（常用）
父元素.children
注：返回的还是一个伪数组
它的遍历不支持forEach，可以用for来做
兄弟节点/查找
语法
// 下一个兄弟节点
元素.nextElementSibling
// 上一个兄弟节点
元素.previousElementSibling
增加节点
创建节点
语法
document.createElement('标签名')
创建元素之后，需要对元素设置内容和样式
内容设置： innerText 添加文本内容/无法解析HTML标签
innerHTML 添加文本内容/可对HTML标签进行解析
属性设置：元素.属性
案例*创建元素
<!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>
<style>
.box {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
</head>
<body>
<button>来一个p元素</button>
<div class="box">
<span>这是原始就有的</span>
</div>
<script>
// 获取元素
let btn = document.querySelector('button')
let box = document.querySelector('.box')
// 为按钮绑定单击事件
btn.addEventListener('click', function () {
// document.createElement('你想创建的元素的标签名称')
let p = document.createElement('p')
// 设置相关内容与样式
p.innerText = '这是内容'
p.style.color = 'red'
// box.insertBefore(你想插入的子元素, 位置参照)
// 使用children 会返回一个伪数组，[0]代表着永远在最前面插入
box.insertBefore(p, box.children[0])
})
</script>
</body>
</html>
追加节点
语法
// 插入到子节点列表的末尾处
父元素.appendChild(要插入的元素)
// 插入在某个子节点的前面
父元素.insertBefore(要插入的元素，在哪个元素前面)
注：父元素.insertBefore(要插入的元素，在哪个元素前面) 一定要传递第二个参数，否则报错
克隆节点
cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值
语法
元素.cloneNode(布尔值)
注：布尔值若为false，则代表克隆时只拷贝元素结构---浅拷贝
布尔值若为true，则代表克隆时拷贝元素结构及内容---深拷贝
删除节点
语法
// 通过父元素删除直接子元素
父元素.removeChild(要删除的元素)
// element.remove()可直接删除元素本身
element.remove():删除元素本身
注：如不存在父子关系则删除不成功
删除节点和隐藏节点（display:none） 有区别的： 隐藏节点还是存在的，但是删除，则从html中删除节点
案例*关闭多个二维码
<!DOCTYPE html>
<html lang="zh-CN">
<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>
.erweima {
position: relative;
width: 160px;
height: 160px;
margin: 100px auto;
}
span {
position: absolute;
left: -20px;
top: 0;
display: block;
width: 20px;
text-align: center;
border: 1px solid #ccc;
/* 鼠标效果 */
cursor: pointer;
}
</style>
</head>
<body>
<div class="erweima">
<img src="images/code.png" alt="" />
<span> X1 </span>
</div>
<!-- <p class="erweima">erweima</p> -->
<div class="erweima">
<img src="images/code.png" alt="" />
<span> X2 </span>
</div>
<div class="erweima">
<img src="images/code.png" alt="" />
<span> X3 </span>
</div>
<div class="erweima">
<img src="images/code.png" alt="" />
<span> X4 </span>
</div>
<div class="erweima">
<img src="images/code.png" alt="" />
<span> X5 </span>
</div>
<script>
// 获取元素
let spans = document.querySelectorAll('span')
// 伪数组需要遍历
spans.forEach(function (ele, index) {
// ele=span 为span元素绑定单击事件
ele.addEventListener('click', function () {
// 每次点击span时，隐藏其父元素
ele.parentNode.style.display = 'none'
})
})
</script>
</body>
</html>
