← 返回目录

8. 父子兄弟节点遍历

在树上找亲戚：parentElement 找爹，children 找所有娃，nextElementSibling / previousElementSibling 找左右邻居。它们都只认标签，会自动把空白文字、注释这些"空气亲戚"过滤掉。

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

8.2 知识点逐条讲解

① parentElement：找直接爹

let banana = document.getElementById('target'); // 抓到"香蕉"那一行
let dad = banana.parentElement; // 往上问一层：我爹是谁？
console.log(dad.nodeName);      // 打出来 → "UL"，它爹是 ul
	

② children：只挑"标签"娃

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

let ul = document.getElementById('fruit'); // 抓到水果清单 ul
let kids = ul.children;     // 它的所有标签娃（伪数组，空格娃不算）
console.log(kids.length);  // 有几个娃 → 3
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 只取元素，空白文字已自动过滤。