dom节点遍历子元素和父级节点需区分node与element：children只返回元素子节点，parentnode返回任意父节点，parentelement仅返回元素父节点，closest()用于查找匹配的祖先元素。
DOM 节点遍历子元素和父级节点，核心是用好几个关键属性：children、parentNode、parentElement，以及注意它们的区别和适用场景。
遍历直接子元素（只找元素节点）
element.children 返回一个 HTMLCollection，只包含子“元素节点”（即 `
`、`
` 这类标签），自动过滤掉文本节点、注释节点等。这是最常用、最安全的子元素遍历方式。
Java JDK 25
下载
Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。
- 用
for...of遍历：for (const child of parent.children) { console.log(child); } - 转成数组后操作更灵活：
Array.from(parent.children).forEach(child => {...}) - 避免用
childNodes，它包含所有节点类型（空格、换行也会算作文本节点），容易出错
向上查父级节点（元素 vs 通用节点）
node.parentNode 和 node.parentElement 都能往上找，但行为不同：
-
parentNode返回任意类型的父节点（可能是 Document、DocumentFragment 或元素） -
parentElement只返回父“元素节点”，如果父节点不是元素（比如根节点是document），就返回null - 日常开发中推荐优先用
parentElement，语义更明确，避免误操作非元素节点
跨层级查找（祖辈或特定祖先）
如果要找某个祖先元素（比如最近的 `.card` 容器），用 closest() 最简洁：
-
el.closest('section')—— 向上找最近的<section></section>元素（包括自己） -
el.closest('.modal')—— 支持 CSS 选择器，返回匹配的祖先或null - 比手动循环调用
parentElement更可靠，也更易读
注意事项：别混淆 node 和 element
DOM 中有两类基本对象：Node（节点）和 Element（元素）。Element 是 Node 的子类，所以所有元素都是节点，但不是所有节点都是元素。
-
children、parentElement、closest()只对 Element 有效 -
childNodes、parentNode、nextSibling属于 Node 接口，任何节点都能用，但结果可能不符合预期 - 不确定类型时，先用
node instanceof Element判断再调用方法，更稳妥
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
