Das Erlernen der Elementvorgeschichte in JavaScript

Einführung

In diesem Lab werden wir untersuchen, wie man mit JavaScript alle Vorfahren eines Elements von der Dokumentenwurzel bis zum angegebenen Element abruft. Dazu wird Node.parentNode und eine while-Schleife verwendet werden, um den Vorfahrenbaum hinauf zu navigieren, und Array.prototype.unshift() wird verwendet, um jeden neuen Vorfahren am Anfang eines Arrays hinzuzufügen. Am Ende des Labs sollten Sie eine solide Vorstellung davon haben, wie man Elementvorgänger mit JavaScript abruft.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/DOMManipulationGroup(["DOM Manipulation"]) javascript(("JavaScript")) -.-> javascript/ToolsandEnvironmentGroup(["Tools and Environment"]) javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) 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{{"Elementvorgänger abrufen"}} javascript/data_types -.-> lab-28350{{"Elementvorgänger abrufen"}} javascript/arith_ops -.-> lab-28350{{"Elementvorgänger abrufen"}} javascript/comp_ops -.-> lab-28350{{"Elementvorgänger abrufen"}} javascript/loops -.-> lab-28350{{"Elementvorgänger abrufen"}} javascript/dom_select -.-> lab-28350{{"Elementvorgänger abrufen"}} javascript/dom_traverse -.-> lab-28350{{"Elementvorgänger abrufen"}} javascript/bom -.-> lab-28350{{"Elementvorgänger abrufen"}} end

Elementvorgänger abrufen

Um die Vorgänger eines Elements von der Dokumentenwurzel bis zum angegebenen Element abzurufen, führen Sie die folgenden Schritte aus:

Öffnen Sie das Terminal/SSH und geben Sie node ein, um mit der Codeausführung zu beginnen.
Verwenden Sie Node.parentNode und eine while-Schleife, um den Vorgängerbaum des Elements hinauf zu bewegen.
Verwenden Sie Array.prototype.unshift(), um jeden neuen Vorgänger am Anfang des Arrays hinzuzufügen.

Hier ist ein Beispielcode, der die obigen Schritte implementiert:

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

Um die Vorgänger eines bestimmten Elements abzurufen, verwenden Sie die querySelector()-Methode, um das Element auszuwählen und es als Argument an die getAncestors()-Funktion zu übergeben. Beispiel:

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

Dies wird ein Array aller Vorgänger des angegebenen Elements in der Reihenfolge von der Dokumentenwurzel bis zum Element selbst zurückgeben.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Lab "Get Element Ancestors" abgeschlossen. Sie können in LabEx weitere Labs absolvieren, um Ihre Fähigkeiten zu verbessern.