什么是DOM节点
元素节点是重点
查找节点
父级节点的查找
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>父节点</title>
</head><body><div class="dad"><div class="baby"></div></div><script>const baby = document.querySelector('.baby')console.log(baby)//子节点console.log(baby.parentNode)//父节点console.log(baby.parentNode.parentNode)//父节点的父节点</script>
</body></html>
实际应用
李伟兴 09:31:13
<!DOCTYPE html>
<html lang="en"><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: 1000px;height: 200px;background-color: pink;margin: 100px auto;text-align: center;font-size: 50px;line-height: 200px;font-weight: 700;}.box1 {position: absolute;right: 20px;top: 10px;width: 20px;height: 20px;background-color: skyblue;text-align: center;line-height: 20px;font-size: 16px;cursor: pointer;}</style>
</head><body><div class="box">我是广告<div class="box1">X</div></div><div class="box">我是广告<div class="box1">X</div></div><div class="box">我是广告<div class="box1">X</div></div><script>const closeBtn = document.querySelectorAll('.box1')for (let i = 0; i < closeBtn.length; i++) {closeBtn[i].addEventListener('click', function () {this.parentNode.style.display = 'none'})}</script>
</body></html>
字节点查找
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>子节点</title>
</head><body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><script>const ul = document.querySelector('ul')console.log(ul.children)//依旧伪数组const li = document.querySelector('ul li:nth-child(2)')console.log(li.previousElementSibling)//上一个兄弟console.log(li.nextElementSibling)//下一个兄弟</script>
</body></html>
