• Becoming an eLearning Hacker
  • Glossary
  • Regular Expressions (Regex)
  • Projects
  • Challenges
  • Essential Tools
  • HTML
  • CSS
  • JavaScript
  • Web Scraping
  • Learning Analytics
  • Images
  • Download
  • Translations
  • Challenge 7

    Get the Navigation Outline of a Google Doc as a Table

    Background

    Google Docs creates a navigation outline on the left sidetray that is useful for navigating a document. Your employer wants to see a copy of this outline in a Google Sheet so that they can more easily get a sense for the size and structure of the document.

    Task

    Using JavaScript in the Inspector Console, get the titles of a document's navigation outline items as a table that can be copy/pasted to a spreadsheet.

    Solution

    Here's an example function that could work:

    // Find all elements with the class "navigation-item"
    const navigationItems = document.querySelectorAll('.navigation-item');

    // Create an array to store the text content of the navigation items
    const navigationText = [];

    // Iterate through the elements and add their text content to the array
    navigationItems.forEach((item) => {
        navigationText.push({
            'Navigation Item': item.textContent.trim()
        });
    });

    // Display the results in a table in the console
    console.table(navigationText);

    This content is provided to you freely by EdTech Books.

    Access it online or download it at https://edtechbooks.org/elearning_hacker/get_the_navigation_outline_of_a_google_doc_as_a_table.