dom节点遍历父级和子级主要依赖原生属性：parentnode返回任意父节点，parentelement仅返回元素父节点；children只获取元素子节点，childnodes包含所有子节点；closest()可查找匹配的祖先元素。
获取 DOM 节点的父级和子级，主要靠元素自带的属性，不需要额外库，原生 JS 就能直接操作。
获取父级节点
最常用的是 parentNode 和 parentElement：
- parentNode 返回任意类型的父节点（可能是元素、文档片段、甚至文本节点），兼容性最好；
-
parentElement 只返回父级元素节点（即
HTMLElement），如果父节点不是元素（比如是 Document 或 DocumentFragment），就返回null，更安全常用。
例如：
const child = document.getElementById('box');<br>
const parentEl = child.parentElement; // 推荐用这个<br>
const parentAny = child.parentNode;
获取子级节点
有两类常用方式：获取所有子节点（含文本、注释等），或只获取元素子节点：
-
childNodes：返回包含所有子节点的
NodeList（包括空格、换行产生的文本节点）； -
children：只返回子元素节点，忽略文本和注释，返回
HTMLCollection； - firstChild / lastChild：获取第一个/最后一个子节点（可能是文本）；
- firstElementChild / lastElementChild：获取第一个/最后一个元素子节点，更实用。
例如：
const parent = document.getElementById('container');<br>
console.log(parent.children); // 只有 <div></div> 这类元素<br>
console.log(parent.childNodes); // 还可能包含换行符生成的 text 节点
向上/向下遍历的实用技巧
实际开发中常需要跳过非元素节点，或查找特定祖先/后代：
- 用 parentElement.parentElement 逐级向上，或写个循环找指定标签名的祖先；
- 用 element.closest('selector') 直接查找最近的匹配祖先元素（支持 CSS 选择器，现代浏览器都支持）；
- 用 element.querySelector('selector') 或 element.querySelectorAll('selector') 获取符合条件的子元素，比单纯遍历 children 更灵活。
例如：
const btn = document.querySelector('button');<br>
const form = btn.closest('form'); // 找到按钮最近的 form 祖先<br>
const inputs = form.querySelectorAll('input[type="text"]');
注意节点类型判断
当不确定节点类型时，可用 node.nodeType 或 node.nodeName 判断：
-
node.nodeType === 1表示是元素节点（最常用）； -
node.nodeType === 3是文本节点； -
node instanceof HTMLElement也可用于判断是否为元素节点。
这样能避免对文本节点调用 .children 或 .querySelector 报错。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
