|
|
节点 node ： 网页一切内容皆为节点
节点作用 ： 让渲染引擎准确的渲染dom树
四种节点： 元素节点、 属性节点 、 文本节点 、 注释节点
最重要： 元素节点(标签) 查找元素
querySelector()：查找元素 根据选择器查询 (相当于身份证找人)
节点：查找元素 根据dom树关系来查找
1.子节点：
获取子元素 : 元素.children 一定是伪数组
获取兄弟元素
获取父元素
- <!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></head><body> <ul> <!-- 我是注释哟 --> 我是文本哈 <li>我是班长1</li> <li>我是班长2</li> <li>我是班长3</li> <li>我是班长4</li> <li>我是班长5</li> </ul> <script> /* 学习目标： 查询节点 1.获取子元素 : 元素.children 一定是伪数组 2.获取兄弟元素 3.获取父元素 */ //获取父元素 let ul = document.querySelector('ul') //1.1 获取子节点 console.log(ul.childNodes)//获取 元素节点、文本节点、注释节点//13个 //1.2 获取子元素 console.log(ul.children)// 获取子元素//5个 console.log(ul.children[4])//我是班长5 </script></body></html>
2.兄弟节点
获取子元素 : 父元素.children
获取兄弟元素 :
获取上一个元素 ： 元素.previousElementSibling
获取下一个元素 ： 元素.nextElementSibling
获取父元素 :
let li2 = document.querySelector('#li2')
//班长2
//1.获取上一个元素 console.log(li2.previousElementSibling)
//班长1
//2.获取下一个元素 console.log(li2.nextElementSibling)
//班长3
3.父节点
获取子元素 : 父元素.children
获取兄弟元素 :
获取上一次元素 ： 元素.previousElementSibling
获取下一次元素 ： 元素.nextElementSibling
获取父元素 : 父元素.parentNode
console.log(li2.parentElement)//ulconsole.log(li2.parentNode.parentNode)//bodyconsole.log(li2.parentNode.parentNode.parentNode)//htmlconsole.log(li2.parentNode.parentNode.parentNode.parentNode)//documentconsole.log(li2.parentNode.parentNode.parentNode.parentNode.parentNode)//null 宇宙尽头
父节点的尽头是 null
|
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡