JavaScript 操作 DOM 层级关系需通过 parentNode/parentElement 获取父节点、children/firstElementChild/lastElementChild 遍历子元素、nextElementSibling/previousElementSibling 定位兄弟元素，并用 appendChild/insertBefore 移动插入节点。
JavaScript 操作页面元素的层级关系，核心是理解 DOM 树中节点之间的父子、兄弟等嵌套结构，并通过标准属性精准访问和修改。不依赖 ID 或类名，而是靠位置关系动态定位元素，特别适合模板复用、列表操作或响应式交互场景。
获取父级元素
每个元素都有唯一直接父节点，用 parentNode 或更安全的 parentElement 获取（后者只返回元素节点，跳过文本/注释节点）：
-
element.parentNode：返回最近的父节点（可能是文本节点或注释，需判断） -
element.parentElement：只返回父元素节点，推荐日常使用 - 例如点击按钮时关闭其所在卡片：
btn.parentElement.parentElement.classList.add('hidden')
遍历子元素节点
要获取某容器下的所有“标签子元素”，避开空格换行等文本节点，优先用 children：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
-
container.children：返回 HTMLCollection，仅含元素节点（<div>、<p>等） -
container.firstElementChild和container.lastElementChild：快速取首尾子元素 - 避免用
childNodes，它包含空白文本节点，容易导致索引错位
定位相邻兄弟元素
同级元素间常需联动（如展开/收起、高亮切换），用 nextElementSibling 和 previousElementSibling 最可靠：
立即学习“Java免费学习笔记（深入）”；
-
item.nextElementSibling：下一个兄弟元素（跳过空格、换行） -
item.previousElementSibling：上一个兄弟元素 - 若需兼容老浏览器且必须用
nextSibling，记得加类型判断：node.nodeType === 1
移动或插入到指定层级位置
改变元素在 DOM 中的位置，本质是调整其父节点引用：
-
parent.appendChild(child)：追加到父元素末尾 -
parent.insertBefore(newEl, refEl)：插到refEl前面（refEl必须是 parent 的子节点） - 注意：移动已有元素时，它会自动从原位置脱离，无需先
remove()
