<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
padding: 0 40px;
}
p {
color: #333;
}
ul {
padding: 0 0 0 20px;
}
table {
width: 480px;
text-align: center;
border-collapse: collapse;
}
table,
td {
border: 1px solid #ccc;
}
td {
padding: 10px 0;
}
</style>
</head>
<body>
<!-- 父子关系的查找 -->
<!-- parentNode属性 返回最近一级的父节点,找不到返回为null -->
<!-- 子节点的查找 -->
<!-- childNodes -->
<!-- 获得所有子节点/包括文本节点(空格/换行)/注释节点等 -->
<!-- children -->
<!-- 进货的所有元素的子节点 -->
<!-- 第一个子节点和最后一个子节点 -->
<h3>父子关系</h3>
<hr>
<button class="btn1">所有的子节点</button>
<button class="btn2">第1个子节点</button>
<button class="btn3">最后1个子节点</button>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript 基础</li>
<li>Web APIs</li>
<!-- 注释 -->
</ul>
<hr>
<div class="box">
<p></p>
<a href=""></a>
<img src="" alt="">
</div>
<table>
<tr>
<td width="60">序号</td>
<td>课程名</td>
<td>难度</td>
<td width="80">操作</td>
</tr>
<tr>
<td>1</td>
<td><span>HTML</span></td>
<td>初级</td>
<td><button>变色</button></td>
</tr>
<tr>
<td>2</td>
<td><span>CSS</span></td>
<td>初级</td>
<td><button>变色</button></td>
</tr>
<tr>
<td>3</td>
<td><span>Web APIs</span></td>
<td>中级</td>
<td><button>变色</button></td>
</tr>
</table>
<script>
let btns = document.querySelectorAll('table button')
for (let i = 0; i < btns.length; i++) {
btns[i].addEventListener('click', function () {
this.parentNode.parentNode.style.backgroundColor = 'red'
})
}
let ul = document.querySelector('ul')
console.log(ul.childNodes);
console.log(ul.children);
let btn1 = document.querySelector('.btn1')
let arr = ['red', 'blue', 'gold', 'pink']
for (let i = 0; i <= arr.length; i++) {
btn1.addEventListener('click', function () {
for (let j = 0; j < ul.children.length; j++) {
ul.children[j].style.color = 'red'
}
})
}
let btn2 = document.querySelector('.btn2')
let btn3 = document.querySelector('.btn3')
btn2.addEventListener('click', function () {
ul.firstElementChild.style.color = 'red'
})
btn3.addEventListener('click', function () {
ul.lastElementChild.style.color = 'red'
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.erweima {
width: 149px;
height: 152px;
border: 1px solid #000;
position: relative;
}
.close {
position: absolute;
right: -52px;
top: -1px;
width: 50px;
height: 50px;
cursor: pointer;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="erweima">
<span class="close"></span>
</div>
<hr />
<div class="erweima">
<span class="close"></span>
</div>
<hr />
<div class="erweima">
<span class="close"></span>
</div>
<hr />
<div class="erweima">
<span class="close"></span>
</div>
<script>
let btns = document.querySelectorAll('.close')
for (let i = 0; i < btns.length; i++) {
btns[i].addEventListener('click', function () {
btns[i].parentElement.style.display = "none"
})
}
</script>
</body>
</html>