目录
- DOM节点
- 查找节点
- 父节点查找
- 子节点查找
- 兄弟关系查找
DOM节点
- DOM节点：
- DOM树里每一个内容都称之为节点
- 节点类型：
- 元素节点：所有的标签，比如body、div
html是根节点 - 属性节点：所有的属性，比如href、class
- 文本节点：所有的文本
- 其他
- 元素节点：所有的标签，比如body、div
查找节点
- 根据节点关系查找目标节点
- 节点关系：针对的找亲戚返回的都是对象
- 父节点
- 子节点
- 兄弟节点
父节点查找
- parentNode属性
- 返回最近一级的父节点，找不到返回为null
示例：
<body><div class="grandpa"><div class="dad"><div class="baby"></div></div></div><script>const baby = document.querySelector('.baby')console.log(baby);//返回DOM对象console.log(baby.parentNode);//返回DOM对象console.log(baby.parentNode.parentNode);//返回DOM对象</script>
</body>
子节点查找
- childNodes（不常用）
- 获得所有子节点、包括文本节点（空格、换行）、注释节点等
- children属性（常用）
- 仅获得所有元素节点
- 返回的还是一个伪数组
示例：
<body><ul><li><p>one 第一段</p></li><li></li><li></li><li></li><li></li></ul><script>const ul = document.querySelector('ul')console.log(ul.children);</script>
</body>
兄弟关系查找
-
下一个兄弟节点
- nextElementSibling属性
-
上一个兄弟节点
- previousElementSibling属性
<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 li2 = document.querySelector('ul li:nth-child(2)')console.log(li2.previousElementSibling);console.log(li2.nextElementSibling);</script>
</body>
