1. 节点概念
网页一切皆节点
- 节点：html中所有内容都是节点
- 元素：也叫元素节点，html中的标签都是元素
- 节点三要素
- nodeName：节点名字
- nodeValue：节点值
- nodeType：节点类型
元素节点的三个要素的特点： nodeType值为1、nodeName为标签名全大写、nodeValue为 null
2. 查找子节点
<!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>
</head>
<body>
<ul>
<!-- 这里是li标签 -->
<li>隔壁老王1</li>
<li>隔壁老王2</li>
<li>隔壁老王3</li>
</ul>
<script>
// 获取子节点，先应该拿到父节点
let ul = document.querySelector("ul");
// 1. 所有子节点（全部包含）：childNodes
console.log(ul.childNodes); //一个换行表示一个text节点，一个注释表示一个comment节点，
// 2. 所有子元素：children
console.log(ul.children); //不能使用forEach
// 3. 获取第一个孩子节点：firstChild
console.log(ul.firstChild);
// 4. 获取第一个孩子元素：firstElementChild
console.log(ul.firstElementChild);
// 5. 最后一个孩子节点：lastChild
console.log(ul.lastChild);
// 6. 最后一个孩子元素：lastElementChild
console.log(ul.lastElementChild);
// 父节点查找子节点：寻找效率高
</script>
</body>
</html>
3. 获取兄弟节点
<!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>
</head>
<body>
<ul>
<li>隔壁老王1</li>
<li>隔壁老王2</li>
<li class="current">隔壁老王3</li>
<li>隔壁老王4</li>
<li>隔壁老王5</li>
</ul>
<script>
// 获取目标元素
let current = document.querySelector(".current");
// 1. 前一个兄弟节点：previousSibling
console.log(current.previousSibling);
// 2. 前一个兄弟元素：previousElementSibling
console.log(current.previousElementSibling);
// 3. 后一个兄弟节点：nextSibling
console.log(current.nextSibling);
//4. 后一个兄弟元素：nextElementSibling
console.log(current.nextElementSibling);
</script>
</body>
</html>
4. 获取父节点
◆ 父节点：parentNode
◆ *父节点：document
◆ 父元素：parentElement
◆ *父元素：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>
</head>
<body>
<div class="box">我是小绵羊</div>
<script>
let box = document.querySelector(".box");
//在实际开发中:找节点最多找到body.parentNode和parentElement都没有区别
// 获取父节点
console.log(box.parentNode);
// 获取父元素
console.log(box.parentElement);
//二者有区别:找节点,*节点是document; 找元素,*元素是html
</script>
</body>
</html>
总结：
5. 案例
点击符号，关闭二维码
<!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>
.box {
position: relative;
width: 107px;
height: 127px;
margin: 100px auto;
}
span {
position: absolute;
width: 22px;
height: 22px;
text-align: center;
left: -24px;
border: 1px solid #ccc;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
<span>X</span>
<img src="images/taobao.jpg" alt="" />
</div>
<script>
// 需求：点击X隐藏图片和按钮本身
// 1. 获取事件源X
// 2. 增加点击事件
// 3. 事件处理：隐藏box父元素
document.querySelector("span").onclick = function () {
this.parentElement.style.display = "none";
};
</script>
</body>
</html>