はじめに
この実験では、JavaScript を使ってドキュメントルートから指定された要素までの要素のすべての祖先を取得する方法を探ります。これには、Node.parentNode
と while
ループを使って祖先ツリーを辿り、Array.prototype.unshift()
を使って各新しい祖先を配列の先頭に追加する必要があります。実験が終了するまでに、JavaScript を使って要素の祖先を取得する方法を十分に理解しているはずです。
This tutorial is from open-source community. Access the source code
💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください
この実験では、JavaScript を使ってドキュメントルートから指定された要素までの要素のすべての祖先を取得する方法を探ります。これには、Node.parentNode
と while
ループを使って祖先ツリーを辿り、Array.prototype.unshift()
を使って各新しい祖先を配列の先頭に追加する必要があります。実験が終了するまでに、JavaScript を使って要素の祖先を取得する方法を十分に理解しているはずです。
ドキュメントルートから指定された要素までの要素の祖先を取得するには、次の手順に従います。
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でさらに多くの実験を練習することができます。