HTML DOM 导航节点关系
2025-04-24
16
参考资料
HTML DOM 导航节点关系
详细介绍
HTML DOM (文档对象模型) 提供了多种方式来导航和访问文档中的节点。节点关系指节点之间的层级和连接方式,包括父子关系、兄弟关系等。
主要节点关系属性
父节点关系
parentNode
- 返回节点的父节点parentElement
- 返回节点的父元素节点
子节点关系
childNodes
- 返回包含所有子节点的 NodeListchildren
- 返回包含所有子元素的 HTMLCollectionfirstChild
- 返回第一个子节点lastChild
- 返回最后一个子节点firstElementChild
- 返回第一个子元素lastElementChild
- 返回最后一个子元素
兄弟节点关系
nextSibling
- 返回下一个兄弟节点previousSibling
- 返回前一个兄弟节点nextElementSibling
- 返回下一个兄弟元素previousElementSibling
- 返回前一个兄弟元素
用法示例
基本用法
// 获取元素 const element = document.getElementById('example'); // 获取父元素 const parent = element.parentNode; // 获取所有子元素 const children = element.children; // 获取下一个兄弟元素 const nextSibling = element.nextElementSibling;
遍历子节点
const parent = document.getElementById('parent'); for (let i = 0; i < parent.children.length; i++) { console.log(parent.children[i]); }
CSS 扩展
:first-child 伪类
选择作为其父元素的第一个子元素的元素
li:first-child { color: red; }
:last-child 伪类
选择作为其父元素的最后一个子元素的元素
li:last-child { font-weight: bold; }
:nth-child() 伪类
选择作为其父元素的第n个子元素的元素
li:nth-child(odd) { background-color: #f2f2f2; }
综合示例
<!DOCTYPE html> <html> <head> <style> .highlight { background-color: yellow; } li:first-child { color: blue; } li:nth-child(3) { font-weight: bold; } </style> </head> <body> <div id="container"> <h1>DOM 导航示例</h1> <ul id="list"> <li>第一项</li> <li>第二项</li> <li>第三项</li> <li>第四项</li> </ul> </div> <script> const list = document.getElementById('list'); // 获取父元素 console.log(list.parentNode.id); // "container" // 获取第一个和最后一个子元素 const firstItem = list.firstElementChild; const lastItem = list.lastElementChild; firstItem.classList.add('highlight'); lastItem.classList.add('highlight'); // 遍历所有子元素 Array.from(list.children).forEach(item => { console.log(item.textContent); }); // 使用CSS伪类选择器 const thirdItem = document.querySelector('#list li:nth-child(3)'); thirdItem.style.color = 'red'; </script> </body> </html>
功能总结
允许在DOM树中上下左右导航
提供多种方式访问相关节点
可以与CSS选择器结合使用
支持动态修改文档结构和内容
为DOM操作和遍历提供基础功能
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。