8. 父子兄弟节点遍历

遍历节点就是从一个元素出发，找它的爸爸、孩子、兄弟。

核心六个：
① parentNode——爸爸
② children / childNodes——孩子（元素 / 全部节点）
③ firstElementChild——第一个元素孩子
④ lastElementChild——最后一个元素孩子
⑤ previousElementSibling——上一个兄弟
⑥ nextElementSibling——下一个兄弟

坑：childNodes 包含空白文本节点、children 只含元素节点、nextSibling 会拿到空白节点。

8.1 互动演示（在这个水果清单里找亲戚）

点按钮： 以香蕉为中心， 亲戚会被点亮， 下面同步代码与结论。

8.2 知识点逐条讲解

① parentElement：找直接爹

// 抓到"香蕉"那一行
let banana = document.getElementById('target');

// 往上问一层：我爹是谁？
let dad = banana.parentElement;

// 打出来 → "UL"，它爹是 ul
console.log(dad.nodeName);

② children：只挑"标签"娃

注意有两组：children 只挑标签娃，把换行空格这些空气娃全滤掉；childNodes 会连空气娃一起算。平时用 children。

// 抓到水果清单 ul
let ul = document.getElementById('fruit');

// 它的所有标签娃（伪数组，空格娃不算）
let kids = ul.children;

// 有几个娃 → 3
console.log(kids.length);

// 挨个打印每个娃的字
for (let i = 0; i < kids.length; i++) console.log(kids[i].innerText);

③ 找左右邻居

// 右边邻居 → 橙子
banana.nextElementSibling;

// 左边邻居 → 苹果
banana.previousElementSibling;

// 如果已经是排头或排尾，就返回 null（没有了）

如果你拿到排头那个 li 还去问"左边邻居是谁"，会得到 null；这时再去 .innerText 就报错。因为排头左边没人；用之前先判一下 null。

实战：用在哪 / 常见坑 / 怎么解决

① 用在哪：点删除按钮要找上一行、找同级兄弟、找父容器。

② 常见坑：排头/排尾取邻居得到 null，再 .innerText 报错。

③ 怎么解决：取到先判 null 再用；children 只取元素，空白文字已自动过滤。

本页重点