JavaScript Academy · 课时

遍历父元素、子元素和兄弟元素

Q: 「遍历父元素、子元素和兄弟元素」这节课中我会学到什么？

在相关节点之间遍历 DOM 树。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

在相关节点之间遍历 DOM 树。

遍历父元素、子元素和兄弟元素 是 CoddyKit 上的免费 JavaScript Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 4 节课。

为什么要遍历

获得一个元素后，您经常还需要找到它的相关元素：包围它的容器、其中的项目，或紧邻它的元素。DOM 遍历属性可以让您在这棵树中移动。

parentElement

parentElement 会返回包含当前元素的元素；如果当前元素位于树的顶层，则返回 null。

const item = document.querySelector(".item");
const container = item.parentElement;
console.log(container.className);

children

children 是一个动态的 HTMLCollection，包含元素的直接子元素（不包括文本节点）。

const list = document.querySelector("ul");
console.log(list.children.length);

firstElementChild 和 lastElementChild

这两个属性可以直接跳转到第一个或最后一个子元素，跳过所有文本节点和注释节点。

const list = document.querySelector("ul");
console.log(list.firstElementChild.textContent);
console.log(list.lastElementChild.textContent);

nextElementSibling

nextElementSibling 会返回当前元素在同一父元素内紧邻其后的元素。

const current = document.querySelector("li.active");
const after = current.nextElementSibling;

previousElementSibling

previousElementSibling 会向相反方向移动。如果没有兄弟元素，两者都会返回 null。

const current = document.querySelector("li.active");
const before = current.previousElementSibling;

元素属性与节点属性

请注意：childNodes、nextSibling 和 parentNode 会包含文本节点（包括空白）。通常，您需要的是带有 *Element* 的版本。

list.childNodes;          // includes whitespace text nodes
list.children;            // only elements

closest

closest 会从当前元素开始沿树向上查找，并返回与选择器匹配的最近祖先元素（也可能是元素自身）。

const btn = document.querySelector(".delete");
const row = btn.closest("tr");

使用 closest 实现事件委托

当点击落在内部元素上，但您需要找到负责处理它的外部容器时，closest 非常理想。

function onClick(e) {
  const card = e.target.closest(".card");
  if (card) {
    console.log(card.dataset.id);
  }
}

matches

matches 会测试元素自身是否符合某个选择器，并返回布尔值。它与遍历结合使用非常方便。

const el = document.querySelector(".item");
console.log(el.matches(".item.active"));

组合遍历

您可以链接多个遍历步骤来导航复杂结构，例如从按钮向上找到其所在行，再移动到下一行。

const next = btn.closest("tr").nextElementSibling;

快速检查

选择正确的属性。

回顾

您可以使用 parentElement 和 closest 向上移动，使用 children、firstElementChild 和 lastElementChild 进入子元素，并使用 nextElementSibling 和 previousElementSibling 横向移动。请优先使用仅针对元素的属性，以跳过空白文本节点。

常见问题解答

「遍历父元素、子元素和兄弟元素」课时是免费的吗？

是的 — 「遍历父元素、子元素和兄弟元素」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 4 节课。

「遍历父元素、子元素和兄弟元素」这节课中我会学到什么？

在相关节点之间遍历 DOM 树。你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「遍历父元素、子元素和兄弟元素」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 JavaScript Academy 课中编写并运行代码吗？

能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 JavaScript Academy