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>