JavaScript における要素の祖先のマスター

はじめに

この実験では、JavaScript を使ってドキュメントルートから指定された要素までの要素のすべての祖先を取得する方法を探ります。これには、Node.parentNode と while ループを使って祖先ツリーを辿り、Array.prototype.unshift() を使って各新しい祖先を配列の先頭に追加する必要があります。実験が終了するまでに、JavaScript を使って要素の祖先を取得する方法を十分に理解しているはずです。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/DOMManipulationGroup(["DOM Manipulation"]) javascript(("JavaScript")) -.-> javascript/ToolsandEnvironmentGroup(["Tools and Environment"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") javascript/BasicConceptsGroup -.-> javascript/loops("Loops") javascript/DOMManipulationGroup -.-> javascript/dom_select("DOM Selection") javascript/DOMManipulationGroup -.-> javascript/dom_traverse("DOM Traversal") javascript/ToolsandEnvironmentGroup -.-> javascript/bom("Browser Object Model") subgraph Lab Skills javascript/variables -.-> lab-28350{{"要素の祖先を取得する"}} javascript/data_types -.-> lab-28350{{"要素の祖先を取得する"}} javascript/arith_ops -.-> lab-28350{{"要素の祖先を取得する"}} javascript/comp_ops -.-> lab-28350{{"要素の祖先を取得する"}} javascript/loops -.-> lab-28350{{"要素の祖先を取得する"}} javascript/dom_select -.-> lab-28350{{"要素の祖先を取得する"}} javascript/dom_traverse -.-> lab-28350{{"要素の祖先を取得する"}} javascript/bom -.-> lab-28350{{"要素の祖先を取得する"}} end

要素の祖先を取得する

ドキュメントルートから指定された要素までの要素の祖先を取得するには、次の手順に従います。

ターミナル/SSH を開き、コーディングを練習するために node と入力します。
Node.parentNode と while ループを使って、要素の祖先ツリーを辿ります。
Array.prototype.unshift() を使って、各新しい祖先を配列の先頭に追加します。

以下は、上記の手順を実装したサンプルコードです。

const getAncestors = (el) => {
  let ancestors = [];
  while (el) {
    ancestors.unshift(el);
    el = el.parentNode;
  }
  return ancestors;
};

特定の要素の祖先を取得するには、querySelector() メソッドを使って要素を選択し、それを getAncestors() 関数に引数として渡します。たとえば：

getAncestors(document.querySelector("nav"));
// [document, html, body, header, nav]

これにより、指定された要素のすべての祖先が、ドキュメントルートから要素自体までの順序で配列として返されます。

まとめ

おめでとうございます！あなたは「要素の祖先を取得する」実験を完了しました。あなたの技術を向上させるために、LabExでさらに多くの実験を練習することができます。