Your extension might fetch data flawlessly and have a beautiful interface, but if screen reader users or keyboard navigators can’t use it, you’ve unintentionally excluded many potential users.

In this article, we will audit a Chrome browser extension for accessibility issues and transform it into an inclusive experience that works for everyone.

Table of Contents

• Why Accessibility Matters in Browser Extensions

• How to Perform Manual Browser Extension Accessibility Tests

• How to Implement Browser Extension Accessibility Improvements

• How to Perform Automated Browser Extension Accessibility Tests

• Best Practices for Accessible Browser Extensions

• Conclusion

Why Accessibility Matters in Browser Extensions

Every click in your browser extension is an opportunity to empower users or exclude them if accessibility isn’t part of your design.

Browser extensions face unique accessibility challenges, as they must inject functionality into existing web pages while maintaining their own accessible interfaces - a dual responsibility that can introduce potential barriers. For example, a popup that traps keyboard users or fails to communicate with screen readers can render an extension unusable.

With over one billion people living with disabilities, according to the World Health Organization, accessible design unlocks a vast user base and creates better experiences for everyone.

For browser extensions, accessibility barriers commonly emerge as:

• Keyboard navigation dead-ends: Popups and interfaces that trap or exclude keyboard users.

• Silent interactions: Missing labels and descriptions, like a button with only an icon announced as “unlabelled button” by screen readers, leaving users guessing about its purpose.

• Unannounced dynamic content updates: Content changes that occur without assistive technology awareness, such as a quote updating without notifying screen readers of the change, including missing feedback for loading states or errors

• Context integration conflicts: Extensions modifying existing web pages can mistakenly break the page's accessibility features or introduce elements that clash with established navigation patterns

By understanding these barriers, developers can take targeted steps to test and improve their extensions’ accessibility.

How to Perform Manual Browser Extension Accessibility Tests

While automated tools catch obvious issues, manual testing reveals the real user experience. Here's how to systematically evaluate your extension's accessibility.

Keyboard Navigation Test

Disconnect your mouse and try to use your extension completely with the keyboard only. Navigate using Tab to move between elements, Enter or Space to activate buttons, and arrow keys within components.

• Is it always clear which element has focus?

• Can you activate buttons with Enter or Space as expected?

• Can users exit modal dialogs or dropdown menus?

If you encounter any dead-ends or confusion points, keyboard users will face the same barriers.

Screen Reader Evaluation

Use your operating system's built-in screen reader to navigate your extension and listen to what is announced. On macOS, enable VoiceOver; on Windows, use Narrator; on Linux, try Orca.

• Does each element’s purpose come through clearly, such as a button announced as “Generate new advice” rather than just “button”?

• Are headings, lists, and other structures properly conveyed?

• Do users understand when content is loading, selected, or has changed?

This testing phase often reveals the gap between what you intended to communicate and what actually reaches users.

Visual Accessibility Review

Examine your extension in different visual contexts. Use developer tools, like WebAIM’s Contrast Checker, to verify that text meets WCAG’s 4.5:1 contrast ratio for readability. Test how your extension appears in system high-contrast settings. Ensure:

• Functionality remains usable at 200% zoom.

• Information isn’t conveyed through colour alone, such as using text labels alongside colour-coded indicators.

These manual tests will uncover critical accessibility issues, paving the way for targeted improvements to make your extension inclusive.

How to Implement Browser Extension Accessibility Improvements

Imagine refreshing a page without knowing it happened or clicking a button with no clear purpose. The manual tests performed above revealed that's the experience for screen reader users of our extension among these three key accessibility issues:

• Missing button label: The dice button only has an image with alt text “Dice icon,” which lacks the context screen readers need

• Silent dynamic updates: When new advice loads, screen readers don't know the content has changed

• No loading states: When fetching advice, users receive no feedback that something is happening

Let's address the issues before conducting automated tests.

How to Address Missing Button Label and Alt text

We’ll add aria-label to clearly explain the button's purpose and provide descriptive alt text for the icon. The role="presentation" attribute ensures the image is treated as decorative by screen readers.

<!--Before: Unclear Button Purpose and icon alt text-->
<button class="dice-button" id="generate-advice-btn">
    <img src="/icons/icon-dice.png" alt="Dice icon">
</button>

<!--After: Clear, Accessible Button and icon alt text-->
<button class="dice-button" id="generate-advice-btn" aria-label="Generate new advice">
     <img src="/icons/icon-dice.png" alt="A dice icon with green background" role="presentation">
</button>

How to Address Silent Dynamic Updates

We’ll add aria-live="polite" for screen readers to announce new advice and aria-atomic="true" to ensure that the entire quote is read. That is:

<!--Before: Silent Dynamic Updates-->
<p class="advice-quote" id="advice-quote">
    "It is easy to sit up and take notice, what's difficult is getting up and taking action."
</p>

<!--After: Announced Content Changes-->
<p class="advice-quote" id="advice-quote" aria-live="polite" aria-atomic="true">
    "It is easy to sit up and take notice, what's difficult is getting up and taking action."
</p>

How to Address No Loading States

We’ll add a setLoadingState function to provide loading indicators, ensuring screen reader users are notified when content is being fetched:

// Before: No Loading Feedback
function requestNewAdvice() {
  chrome.runtime.sendMessage({ action: "fetchAdvice" }, (response) => {
    // No loading indicators...
  });
}

// After: Accessible Loading States
function requestNewAdvice() {
  setLoadingState(true); 
  chrome.runtime.sendMessage({ action: "fetchAdvice" }, (response) => {
    setLoadingState(false);
    // Handle response with proper announcements...
  });
}
function setLoadingState(isLoading) {
  if (isLoading) {
    // Disable button and show loading text
    generateAdviceBtn.disabled = true;
    generateAdviceBtn.setAttribute('aria-label', 'Loading new advice...');
    // Show loading text in the advice quote element
    adviceQuoteElement.textContent = "Loading new advice...";
  } else {
    // Re-enable button
    generateAdviceBtn.disabled = false;
    generateAdviceBtn.setAttribute('aria-label', 'Generate new advice');
  }
}

With the manual testing issues addressed, we can now move on to performing an automated test of the same extension.

How to Perform Automated Browser Extension Accessibility Tests

Manual testing provides crucial insights, but automated tools can efficiently catch common issues and provide ongoing monitoring.

This Extension Accessibility Checker simplifies testing by analyzing browser extension interfaces, such as popups and content scripts, for WCAG compliance, addressing unique challenges like popup constraints and content injection conflicts.

To use the Extension Accessibility Checker:

1. Compress your browser extension folder into a .zip file

2. Upload the .zip file on https://extensiona11ychecker.vercel.app/

3. Review the generated report for specific accessibility violations and implement suggested fixes

As shown in the GIF above, this workflow helps establish accessibility as a routine part of your development process rather than an afterthought.

With automated testing in place, let’s explore best practices to ensure that your extension remains accessible throughout development.

Best Practices for Accessible Browser Extensions

We've transformed our sample advice-generating browser extension from a functional but inaccessible tool into an inclusive one that works for everyone.

Based on our improvements, here are four key principles for designing accessible browser extensions:

1. Semantic HTML and Clear, Descriptive Labels

Always start with proper HTML structure, using appropriate elements (for example, for a “Generate Advice” action, proper heading hierarchy) before adding ARIA attributes.

Ensure that every interactive element has a clear purpose via aria-label, aria-labelledby, or visible text that explains its action.

2. Clear Communication at Every Step

Every interactive element must convey its purpose effectively. Users need to understand:

• • What’s happening (for example, “Loading new advice…” for loading states)

    • What went wrong (for example, “Failed to load advice” for errors)

    • What changed (for example, aria-live regions for updated content)

3. Complete Keyboard Accessibility

All functionality must be available through keyboard navigation. This requires testing with Tab, Enter, Space, and arrow keys as appropriate.

Provide clear and thoughtful focus indicators that move predictably through your interface with obvious ways to exit modals or complex interactions.

4. User Preferences and Content Script Considerations

Respect user choices by supporting system font size settings and not overriding user-defined colour schemes unnecessarily.

When your extension modifies existing web pages, make sure you don't break the page's established accessibility features, focus management and navigation patterns. Ensure any new elements you inject follow accessibility standards.

Conclusion

As we’ve seen with our advice-generating extension, addressing accessibility issues transforms a functional tool into an inclusive one.

However, while fixing issues in existing extensions is helpful, the most effective approach is letting accessibility guide your design and development decisions from the first line of code.

When starting your next browser extension project, ask:

• How would someone navigate this using only a keyboard?

• Is the purpose of every interactive element immediately clear to screen readers?

• How will users understand what's happening during loading states?

Here are some helpful resources

• Chrome Extension Accessibility Documentation

• Extension Accessibility Checker

• Web Content Accessibility Guidelines (WCAG) 2.1

Throughout this guide, we will explore the DOM's hierarchical tree structure, essential properties, and methods for accessing and modifying nodes. We'll also dive into event handling and various techniques for efficient DOM manipulation.

By the end of this guide, you should be able to confidently manipulate the DOM to meet the demands of your web development projects.

Prerequisites:

While this guide is designed to be beginner-friendly and accessible to anyone, having a basic understanding of JavaScript fundamentals will greatly enhance your ability to grasp the practical concepts covered.

Also, familiarity with HTML and CSS is a plus and will help you comprehend and apply the material we cover.

If you're new to JavaScript, consider familiarizing yourself with variables, data types, functions, loops, and basic DOM manipulation techniques before diving into this tutorial. This foundational knowledge will ensure a smoother learning experience as we explore more advanced topics related to the Document Object Model (DOM).

Table of Contents

1. What is the Browser Object Model (BOM)?
2. What is the Document Object Model (DOM)?
3. DOM Tree Structure
   – Types of Nodes in the DOM Tree
   – Node Relationships
4. How to Work with DOM Elements
   – Traversing the DOM
   – Methods for Querying DOM Elements
   – Specialized Selectors (Matches, Closest, Contains)
   – How to Inspect DOM Elements
   – Table Navigation in the DOM
5. How to Modify DOM Elements
   – How to Manipulate Element Content and Visibility
   – How to Modify Element Attributes
   – HTML Insertion Methods
   – How to Manipulate Classes with JavaScript
6. Event Handling in the DOM
   – Common Types of Events
   – Event Handlers
   – Event Propagation
   – Event Bubbling
   – Event Delegation
7. Conclusion

What is the Browser Object Model (BOM)?

The Browser Object Model is like a set of tools provided by the browser itself. It's not part of the official DOM specification, but it's specific to web browsers. As a result, the objects and methods available in the BOM may vary between different browsers.

The BOM provides JavaScript access to browser-specific things like the browser's history, location, and browser window itself.

Window Object

The window Object serves as a global object in the browser, representing the browser window and is the top-level object in JavaScript when we're working in a web browser. You can access it by typing window in the browser console:

console.log(window); // prints the Window object

Since, it's global, you can access it from anywhere and use it to access other global objects such as the console and the alert function.

The window object is a key part of the BOM and provides access to many browser-related things. For example, window.location.href gives you the URL of the current web page.

Functions like alert(), prompt(), and confirm() are also part of the BOM, allowing you to interact with users through pop-up dialogs.

What is the Document Object Model (DOM)?

The Document Object Model (DOM) is a programming interface for web documents. It represents the structure of a web page, allowing interaction with its elements using programming languages like JavaScript.

The DOM contains the document object, which represents the DOM structure of the current web page and has properties and methods that allow you to manipulate the DOM.

You can access the document object by typing document in the browser console:

console.log(document); // prints the DOM object

You use document object to access and manipulate different parts of the HTML document. Elements within the DOM can be accessed using properties and methods of this object.

Examples include accessing the body or title element, retrieving HTML content (innerHTML), accessing text content (innerText) and changing styles.

// Accessing the document's title
console.log(document.title);

// Changing the document's title
document.title = "changed Title";

// Accessing the document's body 
console.log(document.body);

// Changing background color of body element using inline CSS
document.body.style.backgroundColor = "red";

You can use the DOM to interact with web pages dynamically. This allows JavaScript to access, modify, and manipulate the content, structure, and style of a web document in response to user actions or other events.

Let's illustrate the concept of DOM manipulation with a simple example:

<html>
  <body>
    <div id="container">
      <p id="message">Hello, World!</p>
      <button id="changeText">Change Text</button>
    </div>

    <script>
      // we select the paragraph element by its ID
      let messageElement = document.getElementById("message");

      // let's add event listener to button element using ID
      document
        .getElementById("changeText")
        .addEventListener("click", function () {
          // this  will change the text content of the paragraph element
          messageElement.textContent = "Text Changed!";
        });
    </script>
  </body>
</html>

In this example, we have an HTML document with a <div> container containing a <p> element and a <button> element.

Using JavaScript, we can select the <p> element by its ID and attach an event listener to the <button> element. When the button is clicked, the text content of the paragraph element is changed dynamically.

DOM Tree Structure

The DOM represents the layout of HTML and XML documents as a tree-like structure, resembling the hierarchical arrangement of elements on a web page. In this tree, each node represents a part of the document, such as HTML elements, attributes, and text.

The top-level node in the tree is called the document node, which represents the entire HTML document. From there, it branches out to include all elements and their relationships within the document. Here's a visual representation of that:

DOM Tree of Objects

Types of Nodes in the DOM Tree

There are two main types of nodes in the DOM:

1. Element Nodes: Represent HTML elements such as <div>, <h1>, <p>, <span>, and so on. These nodes make up the backbone of the DOM tree and form the structure of the HTML document.
2. Text Nodes: Represent text content within HTML elements. Text always serves as the last child (leaf node) of an element node and cannot contain any child nodes.

In HTML, whitespace such as spaces, tabs, and line breaks are considered part of the text content within HTML elements and are represented as text nodes.

Linebreak is 1st child node, div (Blue) is 2nd, linebreak again 3rd

We can see all the nodes here including non-element ones (like text nodes or comment nodes)

We also have:

• Attribute Nodes: Represent attributes of HTML elements, for example id, class, src, href, and so on.
• Comment Nodes: Nodes representing comments within the HTML markup.

To access and manipulate DOM elements, we can "walk" through the tree structure using JavaScript. For instance:

• document.head: Selects the <head> element of the current HTML document.
• document.body: Selects the <body> element of the current HTML document.
• document.documentElement: Selects the root element of the DOM tree, that is <html>.

Once we access an element, we can modify its attributes or properties accordingly. For example, we can alter the background color of the <body> element to red by executing document.body.style.backgroundColor = "red" in the console.

We can see the body color has changed to "red"

Node Relationships

Nodes in the DOM tree have parent-child relationships, which form the hierarchical structure of the tree. A child is an element that directly resides within another element (the parent).

<div id="container">
    <p>Hello, World!</p>
    <button>Click Me</button>
</div>

In the DOM tree, sibling elements are arranged linearly. The element to the right of the current element is called the next sibling, while the element to the left is called the previous sibling.

In the above example, the <p> element (previous sibling of ) and the <button> element (next sibling of

) are sibling nodes as they share the same parent. They are both children nodes of the <div> element with the ID "container". So the <div> element serves as the parent node of both the <p> and <button> elements.

Elements positioned above a given element in the DOM tree hierarchy are called ancestors. In the given code, the <html> element acts as the ancestor of the <body>, <h1>, and <p> elements, and they are descendants of the <html> element.

How to Work with DOM Elements

Now, let's dive into accessing nodes in the DOM using various properties and methods.

Traversing the DOM:

When working with the Document Object Model (DOM), it's important to understand the distinction between element nodes (HTML elements) and non-element nodes (like text nodes, comments, and so on). Certain properties and methods specifically deal with either element nodes or all types of nodes, including non-element nodes.

NodeList vs. HTMLCollection: Different properties return different collections of nodes. NodeList contains all types of nodes, while HTMLCollection specifically holds element nodes. Understanding this distinction is crucial for interpreting the results.

Properties for All Nodes (Including Non-element Nodes): These properties return nodes of all types, including element nodes, text nodes, and comment nodes.

childNodes returns a NodeList containing all child nodes and the parentNode property returns the parent node of the specified node. For example:

// Access the first child of the body node
console.log(document.body.childNodes[0]);


// parentnode; the parent of a <p> element within a <div> would be the <div> itself.
let p = document.querySelector('p'); // Select the <p> element
console.log(p.parentNode); // Output: <div> element (parent of p);

Spaces between tags and line returns in HTML code are considered text nodes by the browser. So, the actual first child node might not be what you expect.

firstChild/lastChild: Returns the first/last child node, again including all types.

document.body.firstChild; // Outputs: First child node (likely a linebreak(text node))
document.body.lastChild; // Outputs: Last child node (likely a script tag)

So we can say the following:

element.childNodes[0] === element.firstChild;
element.childNodes[element.childNodes.length - 1] === element.lastChild;

nextSibling/previousSibling: returns the next sibling/previous sibling node, including all of them.

Element specific properties or Element only navigation: These properties provide a convenient way to access only element nodes, excluding text nodes and comments.

children returns a live HTMLCollection of direct child elements, and the parentElement property returns the parent element node of the specified node.

In the below screenshot, you can see the difference between childNodes and children:

Here, Linebreak (text node) will be considered 1st child node of body element, whereas div.color (Blue) will be considered the 1st child.

For instance, let's say we have this code:

// childnode
console.log(document.body.childNodes);

// children
console.log(document.body.children);

// childnode
NodeList(19) [text, div.color, text, div.color, text, comment, text, div.color, text, div.color, text, div.color, text, script, text, comment, text, script, text]


// children
HTMLCollection(7) [div.color, div.color, div.color, div.color, div.color, script, script]

and, if we refresh the page, the output gets:

NodeList(14) [text, div.color, text, div.color, text, comment, text, div.color, text, div.color, text, div.color, text, script]
HTMLCollection(6) [div.color, div.color, div.color, div.color, div.color, script]

Initially, the NodeList contains 19 nodes. These nodes consist of text nodes, div elements with the class "color", a comment node, and script elements. The HTMLCollection contains 7 elements, which are the div elements with the class "color" and script elements.

When the page is refreshed, some elements or nodes are removed or modified dynamically through JavaScript or other means, leading to the observed changes in the DOM structure.

firstElementChild/lastElementChild returns the first/last child, excluding non-element nodes.

// Both will exclude text nodes and comment nodes.
document.body.firstElementChild; // Outputs: <div class="color">
document.body.lastElementChild; // Outputs: <script src="script.js">

Key Points:

• Choose the right property based on whether you need to target all nodes or specifically element nodes.
• Remember that properties like firstChild and previousSibling might return element and non-element nodes, while their element-specific counterparts (firstElementChild and previousElementSibling) focus only on elements.

Methods for Querying DOM Elements:

JavaScript provides several methods for accessing elements in the DOM:

• getElementById: This method retrieves an element by its unique ID attribute.

let element = document.getElementById("myElement");

• getElementsByClassName: This method returns a collection of elements with the specified class name.

let elements = document.getElementsByClassName("myClass");

• getElementsByTagName: This method returns a list of collection of elements with the specified tag name.

let elements = document.getElementsByTagName("div");

• querySelector: This method retrieves the first element that matches a specified CSS selector.

let element = document.querySelector("cssSelector");

• querySelectorAll: This method retrieves all elements that match a CSS selector.

let elements = document.querySelectorAll("cssSelector");

You might be wondering how querySelector differs from querySelectorAll.

Well, querySelector returns the first element within the document that matches the specified selector. On the other hand, querySelectorAll returns a static NodeList representing a list of the document's elements that match the specified group of selectors.

When you're using querySelectorAll, you receive a NodeList, which is similar to an array but not exactly the same. You cannot directly manupulate all elements like appling styles to all elements within a NodeList using methods like style.backgroundColor = 'red'. So we use a forEach loop. For example:

console.log(document.querySelectorAll(".box"));

document.querySelectorAll('.box').forEach(element => {
    // Within the forEach loop, we access each element and set its background color to green.
    element.style.backgroundColor = "green";
});

Let's see what's going on in this code:

• In the first line, we directly change the background color of the element with the class 'box' using querySelector.
• In the second line, we use querySelectorAll to select all elements with the class 'box' and log the NodeList to the console.
• In third line, since querySelectorAll returns a NodeList, we need to iterate through each element in the NodeList in order to apply the background color to each element separately.
• so basically, we can say querySelector is equivalent to querySelectorAll('section')[0].

Alright, one last method to consider:

• getElementsByName: This method returns a list of collection of elements with the specified name attribute.

let items = document.getElementsByName('some-name-attribute');
console.log(items);

These methods are important to understand because they are used in various situations.

For example, when we want to select all the div elements in the document, we can use the querySelectorAll method or the getElementsByTagName method. Both methods will return the same result, but querySelectorAll is more flexible because it can select elements that match any CSS selector. getElementsByTagName can only select elements that have the same tag name.

Matches, Closest, and Contains:

When you're working with JavaScript and dealing with web pages, you often need to find specific parts of the page or do things with them. Three methods you might use are matches(), closest(), and contains().

matches() checks if an element matches a certain style rule. For example, if you have a button and you want to see if it has a class of "active", you could use button.matches('.active'). It will return true if the button has that class, and false if it doesn't.

const button = document.querySelector('button');
if (button.matches('.active')) {
  console.log('The button is active');
} else {
  console.log('The button is not active');
}

If you have an element and you want to find its nearest parent with a certain class, you can use **closest()** like this: element.closest('.classname').

For instance, if you have a link inside a list item and you want to find the nearest list item, you could do link.closest('li').

const link = document.querySelector('a');
const listItem = link.closest('li');
console.log(listItem); // This will give you the nearest list item

And contains() checks if one element is inside another. For example, if you have a div and a paragraph inside it, you could check if the div contains the paragraph with div.contains(paragraph). It will return true if the paragraph is inside the div, and false if it's not.

const div = document.querySelector('div');
const paragraph = document.querySelector('p');
if (div.contains(paragraph)) {
  console.log('The div contains a paragraph');
} else {
  console.log('The div does not contain any paragraph');
}

These methods are handy for navigating around your web page and doing different things with its elements.

How to Inspect DOM Elements

Using console.dir(): console.dir() is not a method of the DOM. It's a method provided by the browser's Console API, specifically used for logging JavaScript objects to the console.

If we log an element using console.log(), we see its HTML representation. But with console.dir(), we get an interactive list showing all available attributes and functions for that element.

tagName and nodeName: tagName is a property specific to HTML elements. It returns the tag name of an HTML element in uppercase letters. For example, if you have an HTML element <div>, tagName will return "DIV".

On the other hand, nodeName is a property of DOM nodes that represents the name of the node. For element nodes, it returns the tag name in uppercase. For other types of nodes, it returns a string representing the type of node (for example, "#text" for text nodes, "#comment" for comment nodes).

Discovering a node's type: Each node in the DOM has a nodeType property that indicates its type. It has a numeric value: 1 for elements, 2 for attributes, 3 for text nodes, 8 for comment and 9 for document. Read-only. This property can be used to distinguish between element nodes and text nodes. For example:

const element = document.createElement('div');
console.log(element.nodeType); // Output: 1

Table Navigation in the DOM

Now, let's learn how to navigate a table element and its child nodes using the DOM. Here, instead of manually writing a table, we will use Bootstrap's pre-designed table.

Before diving into table navigation, let's discuss Bootstrap, a popular front-end framework offering pre-designed components and styles for building responsive web pages efficiently.

To integrate Bootstrap into our project, we'll:

1. Copy the pre-designed table from here.
2. Paste it into a container <div> in our HTML.
3. Include Bootstrap's CSS and JS files in our webpage (which you can copy from here).

Here's how our HTML code will look after integration:

<!DOCTYPE html>
<html>
<head>
    <title>Table Navigation</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
</head>
<body>
   <div class="container">
    <!-- Bootstrap Table -->
    <table class="table">
        <!-- Table Header -->
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
          </tr>
        </thead>
        <!-- Table Body -->
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td colspan="2">Larry the Bird</td>
            <td>@twitter</td>
          </tr>
        </tbody>
      </table>
   </div>
    <script src="script.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</body>
</html>

Table navigation properties:

The table element supports various properties for convenient navigation, such as:

• table.rows: Returns an HTMLCollection of all rows in the table.
• table.caption: Returns the caption element of the table.
• table.tHead: Returns the thead element of the table.
• table.tFoot: Returns the tfoot element of the table.
• table.tBodies: Returns an HTMLCollection of all tbody elements in the table.

Similarly, the tr (table row) element supports properties like:

• tr.cells: Returns an HTMLCollection of all cells in the row.
• tr.sectionRowIndex: Returns the index of the row in the current section (thead, tbody, or tfoot).
• tr.rowIndex: Returns the index of the row in the table.

The td (table cell) element also supports the td.cellIndex property, returning the index of the cell in the row.

For instance, to print all rows in the table:

let t = document.body.firstElementChild.firstElementChild; // Selecting the table
for (let i = 0; i < t.rows.length; i++) {
    let row = t.rows[i];
    console.log(row)
}

To print cells in the first row:

let t = document.body.firstElementChild.firstElementChild; // Selecting the table
let row = t.rows[0]; // Selecting the first row
for (let i = 0; i < row.cells.length; i++) {
    let cell = row.cells[i];
    console.log(cell)
}

How to Modify DOM Elements

Once you have access to DOM elements, you can modify them in various ways using JavaScript.

How to Manipulate Element Content and Visibility

innerHTML and outerHTML

You can use innerHTML to access or change the HTML content inside an element as a string. outerHTML, on the other hand, lets you get or set the HTML content of an element as a string, including the original element itself.

Here's an example:

<body>
    Hello World
    <span>Hey I am span</span>
    <script src="script.js"></script>
</body>

let first = document.getElementsByTagName("span")[0]; // 

// log and change inner HTML
console.log(first.innerHTML); // Output: Hey I am span
first.innerHTML = "Hey I am changed"; // Modify the content of the <span> element

// log and change outer HTML
console.log(first.outerHTML); // Output: <span>Hey I am span</span>
first.outerHTML = "<h1>Hey I am changed</h1>"; // Reload the page to see the change

textContent property

The textContent property allows you to set or retrieve the text content of an element, ignoring any HTML tags within it. It's useful when you want to update the text content of an element without affecting its HTML structure.

console.log(first.textContent); // output: Hey I am span

// change the text content
first.textContent = "Hey I am changed";

innerText property

The innerText property returns only the visible text content of an element, excluding any text within <script> and <style> elements, and accounting for CSS styling that affects visibility. It takes into account CSS styling, such as display: none, visibility: hidden, and so on and returns only the text that is rendered on the screen.

style property

This property provides access to an object for manipulating an element's inline styles (for example, element.style.color = "red").

hidden property

The hidden provides a simple and convenient way to control the visibility of elements in the DOM without directly manipulating their style properties.

document.getElementsByTagName('span')[0].hidden = true;

// When hidden is set to false, the element is visible.

Note that setting an element's hidden property to true only hides it from view, but it still occupies space in the document layout.

How to Modify Element Attributes

The getAttribute() method retrieves the value of a specified attribute of an element, while setAttribute() sets or updates the value of a specified attribute.

hasAttribute() checks whether an element has a specific attribute, returning true or false. The removeAttribute() method removes a specified attribute from an element.

In HTML5, it's possible to define custom attributes for elements. But to prevent potential conflicts with future HTML or JavaScript updates, you should prefix custom attributes with data-. For instance:

<div id="element1" class="sample" data-category="music" data-rating="5">
    This is the first element.
</div>

To access these custom attributes using JavaScript, we can utilize the dataset property. For example:

console.log(element1.dataset);

This will display a DOMStringMap object containing all the custom attributes associated with the "element1" div. Specific custom attributes can also be accessed by their names. For example:

console.log(element1.dataset.category);

// This code would output the value of the "category" custom attribute, which in this case is "music"

HTML Insertion Methods

In HTML, there are several ways to insert new content or modify existing content dynamically using JavaScript. These are known as HTML insertion methods.

Consider the following HTML as our example:

<html>
<head>
</head>
<body>
    <div class="container">
        <div id="first">first element</div>
    </div>
    <script src="script.js"></script>
</body>
</html>

Classic Way to Insert HTML:

A conventional way to insert HTML is by using the innerHTML property. For example, let's say we want to add an h1 element with the text "Hello World" inside the first div. We can do this using the following code:

let a = document.getElementsByTagName('div')[0];
a.innerHTML = '<h1>Hello World</h1>';

We could also append new HTML to the existing HTML inside the div element. For example:

// This will retain the old content and add a new h1 element.
let a = document.getElementsByTagName('div')[0];
a.innerHTML = a.innerHTML + '<h1>Hello World</h1>';

Using createElement to Insert HTML:

Another method involves creating a new element using createElement, setting its content using innerHTML, and subsequently appending it to the target element using appendChild.

Other HTML Insertion Methods:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
I am outside div (start)
<div class="container">
    I am start of this container
        <div id="first">I am first element</div>
    I am end of this container
</div>
I am outside div (end)
    <script src="script.js"></script>
</body>
</html>

Now, let's consider other methods for inserting HTML content dynamically:

let a = document.getElementsByTagName('div')[0];

// Using createElement and appendChild
let div = document.createElement('div');
div.innerHTML = '<h1>Hello World (append)</h1>';
a.appendChild(div);

// Using prepend
let div = document.createElement('div');
div.innerHTML = '<h1>Hello World (prepend)</h1>';
a.prepend(div);

// Using before
let div = document.createElement('div');
div.innerHTML = '<h1>Hello World (before)</h1>';
a.before(div);

// Using after
let div = document.createElement('div');
div.innerHTML = '<h1>Hello World (after)</h1>';
a.after(div);

// Using replaceWith
let div = document.createElement('div');
div.innerHTML = '<h1>Hello World (replaced)</h1>';
a.replaceWith(div);

This code demonstrates different methods for dynamically inserting HTML content into the DOM using JavaScript.

• a.append(div): This method appends the div element as the last child of the a element.
• a.prepend(div): This method adds the div element as the first child of the a element.
• a.before(div): This method adds the div element before the a element.
• a.after(div): This method adds the div element after the a element.
• a.replaceWith(div): This method replaces the a element with the div element.

The insertAdjacentHTML, insertAdjacentElement, and insertAdjacentText Methods

These methods are used to insert content into the DOM at a specified position relative to a given element. They are helpful when you need to dynamically add new elements or text to your webpage.

insertAdjacentHTML:

insertAdjacentHTML allows you to insert a string of HTML at a specified position relative to the element.

The first parameter specifies where the HTML string will be inserted:

• beforebegin: Before the element itself.
• afterbegin: Just inside the element, before its first child.
• beforeend: Just inside the element, after its last child.
• afterend: After the element itself.

Example usage:

let element = document.getElementById('example');
element.insertAdjacentHTML('beforebegin', '<div>New content</div>');

insertAdjacentElement:

It's similar to insertAdjacentHTML, but instead of inserting HTML, you can insert a DOM element.

Example usage:

let element = document.getElementById('example');
let newElement = document.createElement('div');
newElement.textContent = 'New content';
element.insertAdjacentElement('beforebegin', newElement);

insertAdjacentText:

It's similar to insertAdjacentHTML, but instead of inserting HTML, you can insert plain text.

Example usage:

let element = document.getElementById('example');
element.insertAdjacentText('beforebegin', 'New content');

Node Removal:

The remove method removes the element from the DOM.

Example usage:

let element = document.getElementById('example');
element.remove();

These methods allow you to manipulate the DOM dynamically, adding or removing content based on certain conditions or user interactions.

When using insertAdjacentHTML, insertAdjacentElement, or insertAdjacentText, you specify where the new content should be inserted relative to the given element.

When using remove, you simply remove the element from the DOM entirely.

These methods are helpful for dynamically updating the content of your webpage without having to reload the entire page.

How to Manipulate Classes with JavaScript

In HTML, we use classes to group elements and apply styles using CSS. For example, we have a div with an id of "first" in our HTML.

<div id="first">
    <span>Hello, this is text</span>
</div>

We also have CSS styles for classes like "yellow", "red", and "text-dark" to change background color and text color.

.yellow {
    background-color: yellow;
    color: white;
}
.red {
    background-color: red;
    color: white;
}
.text-dark {
    color: black;
}

className: In JavaScript, we can change the class of an element using the className property. For instance, if we want to change the class of the element with the id "first" to "red text-dark", we would do:

// we are applying 2 classes here
first.className = "red text-dark";

If we want to add another class without removing the existing ones, we use the += operator:

first.className += " yellow"; // Adds the class "yellow" without removing existing classes

classList: The classList property allows you to manipulate the classes of an element. We can use methods like add, remove, toggle, and contains to add, remove, toggle, or check the presence of a class.

• classList.remove(): Removes a specific class from the element:

first.classList.remove('text-dark'); // Removes the class "text-dark"

• classList.add(): But wait, it looked better with that class! We can also add it back with:

first.classList.add('text-dark'); // Adds the class "text-dark"

• classList.toggle(): Toggles a class on or off based on its presence:

first.classList.toggle('text-dark'); // Toggles the class "text-dark" (adds if absent, removes if present)

• classList.contains(): Checks if a class is present on the element:

console.log(first.classList.contains('text-dark')); // Returns true if the class "text-dark" is present

Event Handling in the DOM

Events are actions or occurrences that happen in the system you are programming, that the system may need to respond to in some way.

In the context of web development, events (Browser Events) can be user interactions like clicks, mouse movements, key presses, and so on. JavaScript allows you to handle these events and perform actions in response to them.

In HTML, you can directly specify what should happen when an event occurs using attributes like onclick, onmouseover, and so on. For example:

<button onclick="alert('hello')">Click me</button>

While you can write JavaScript directly in HTML attributes, it's always better to keep your HTML clean and handle events in JavaScript code separately. This makes your code easier to read and maintain.

You can do this by selecting elements from the webpage using JavaScript and then attaching an event handler to them. Here's how you might do it:

let container = document.getElementById("container");
container.onclick = function() {
    console.log("Hey, this is logged from the script!");
}

In this code, we select the element with the id "container" using document.getElementById(). Then, we attach a function to the onclick event of that element. This function will be executed whenever the element is clicked.

Common Types of Events:

1. Mouse Events: These events are related to interactions with the mouse.

2. click: When you click on an element.

3. contextmenu: When you right-click on an element.
4. mouseover / mouseout: When the mouse cursor enters or leaves an element.
5. mousedown / mouseup: When you press or release a mouse button over an element.
6. mousemove: When the mouse is moved.

Some Examples of Mouse Events:

// Mouse Button Property Example:

<div onmousedown="console.log('Mouse button:', event.button)">Click me</div>

In this example, the event.button property is used to log which mouse button was pressed.

// Modifier Keys Example:

<div onclick="if(event.ctrlKey) console.log('Ctrl + Click!')">Ctrl + Click Me</div>

This example logs a message when the user clicks the element while holding the Ctrl key.

// Coordinates Example:

<div onmousemove="console.log('clientX:', event.clientX, 'clientY:', event.clientY)">Move your mouse here</div>

This example logs the clientX and clientY coordinates of the mouse pointer as it moves over the element.

// Preventing Selection Example:

<span ondblclick="console.log('Double clicked!')" onmousedown="return false;">Double-click me</span>

In this example, the return false statement in the onmousedown event handler prevents the default selection behavior when the element is double-clicked.

2. Keyboard Events – keydown / keyup: When a key is pressed or released on the keyboard.

Some Examples of Keyboard Events:

<input type="text" onkeydown="console.log('Key pressed!')" onkeyup="console.log('Key released!')">

In this example, the input field triggers events when a key is pressed (keydown) and released (keyup).

// Event Modifiers Example:

<input type="text" onkeydown="if(event.ctrlKey && event.key === 'c') console.log('Ctrl + C pressed!')">

This example logs a message when the user presses the Ctrl key and 'c' key simultaneously in the input field.

// Accessing Key Information Example:

<input type="text" onkeydown="console.log('Key pressed:', event.key)">

This example logs the key that was pressed in the input field.

3. Form Element Events: These events occur when you interact with form elements, like submitting a form, focusing on an input field, and so on.

4. Document Events: These events are related to the document object itself. Example: DOMContentLoaded (when the HTML is fully loaded and the DOM is ready)

5. CSS Events: These events are related to CSS animations. Example: transitionend (When a CSS animation finishes)

Now, let's see an example demonstrating the practical application of event handling and input validation in web development:

<html>
<head>
<title>Input Validation Example</title>
<script>
function checkPhoneNumber(event) {
  const validKeys = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '+', '(', ')', '-'];
  if (!validKeys.includes(event.key)) {
    event.preventDefault(); // Prevent default action for invalid keys
  }
}
</script>
</head>
<body>
<label for="phone">Enter Phone Number:</label>
<input type="tel" id="phone" onkeydown="checkPhoneNumber(event)">
<p>Only digits, +, (, ), and - are allowed.</p>
</body>
</html>

In this example, we're implementing input validation for a phone number input field. The onkeydown event triggers the checkPhoneNumber function, which checks if the pressed key is valid (digits, plus sign, parentheses, or hyphen). If the key is not valid, the default action (character input) is prevented.

You can explore more about events here.

Event Handlers

To react to these events, we use event handlers. An event handler is simply a function that runs when a specific event occurs. There are different ways to assign event handlers in JavaScript:

1. HTML Attribute: You can set an event handler directly in the HTML code using an attribute like onclick, onmouseover, etc.

<button onclick="alert('Button clicked!')">Click me</button>

2. DOM Property: You can assign a handler using a DOM property like onclick, onmouseover, and so on.

<button id="myButton">Click me</button>
<script>
  document.getElementById("myButton").onclick = function() {
    alert('Button clicked!');
  };
</script>

3. Event Listeners: Event listeners are functions that wait for a specific event to occur and then execute a designated function. This is typically done using the addEventListener method.

addEventListener() and removeEventListener():

These are methods used to assign and remove event handlers, respectively, in JavaScript.

• **addEventListener()** is used to attach an event listener to an element, which listens for a specific event (for example, a click or mouseover). It provides more flexibility, especially when you need to add multiple handlers to the same event.

<button id="myButton">Click me</button>
<script>
  document.getElementById("myButton").addEventListener('click', function() {
    alert('Button clicked!');
  });
</script>

const btn = document.getElementById('btn');

// Example 1: Adding event listeners directly with anonymous functions
btn.addEventListener('click', function(e) {
    console.log("Button clicked!"); // Logs a message when the button is clicked
});

// Example 2: Defining functions separately and then adding event listeners
function greet() {
    console.log("Hello!");
}
function farewell() {
    console.log("Goodbye!");
}
btn.addEventListener('mouseenter', greet); // Greets when the mouse enters the button
btn.addEventListener('mouseleave', farewell); // Says goodbye when the mouse leaves the button

With addEventListener, you can also specify additional options as a third argument. Some common options are:

• once: A boolean value that specifies whether the event listener should be removed after it is invoked once.
• capture: A boolean value that specifies whether the event should be captured during the capturing phase. The capturing phase happens before the bubbling phase.

For example:

btn.addEventListener('click', handleClick, { once: true, capture: true });

This will add a click event listener to the button element that is triggered only once and captures the event during the capturing phase.

• **removeEventListener()** is used to remove a previously attached event listener from an element.

// Example 1

<button id="myButton">Click me</button>
<script>
  function handleClick() {
    alert('Button clicked!');
  }

  document.getElementById("myButton").addEventListener('click', handleClick);
  // Remove the event handler
  document.getElementById("myButton").removeEventListener('click', handleClick);
</script>

// Example 2
// Assume a user preference
const allowGreetings = true;

// Removing event listeners based on user preference
if (!allowGreetings) {
    btn.removeEventListener('mouseenter', greet);
}

Object Handlers: handleEvent

Instead of assigning a function as an event handler, you can also assign an object that has a handleEvent method. When the event occurs, the handleEvent method of the object will be called.

<button id="myButton">Click me</button>
<script>
  let myObject = {
    handleEvent: function(event) {
      alert('Button clicked!');
    }
  };

  document.getElementById("myButton").addEventListener('click', myObject);
</script>

In this example, when the button is clicked, the handleEvent method of myObject is called.

Event Object:

When an event occurs, the browser creates an event object that contains information about the event, such as the type of event, the target element, and any additional data.

This object is passed as an argument to the event handler function which can be accessed within the callback function of an event listener.

element.addEventListener('click', function(event) {
    console.log(event.type); // Output: "click"
    console.log(event.target); // Output: The element that was clicked
     // We can access more properties like event.clientX, event.clientY, etc.
});

Event Propagation:

Events in the DOM can propagate through the DOM tree in two phases: the capturing phase and bubbling phase.

When an event happens on an element, like a click or a key press, the browser needs to decide which elements should be notified about the event.

Event capturing and bubbling describe the order in which elements are notified about the event. Understanding event propagation is important when dealing with nested elements and event delegation.

1. Capturing Phase: In the capturing phase, the event starts from the top of the DOM hierarchy (usually the <html> element) and travels down to the target element. During this phase, event handlers attached with addEventListener and the capture option set to true are triggered. These handlers are executed before the event reaches the target element.
2. Target Phase: Once the event reaches the target element, it enters the target phase. Event handlers attached with addEventListener without the capture option (or with false as the value) are triggered during this phase. Handlers attached in this phase are executed when the event is directly targeting the element.
3. Bubbling Phase: After the target phase, the event bubbles up from the target element to the top of the DOM hierarchy. During this phase, event handlers attached with addEventListener without the capture option (or with false as the value) are triggered again. Handlers attached in this phase are executed as the event travels up from the target element.

Let's look at an example. Consider a <div> nested inside another <div>. If a click event occurs on the inner <div>, the capturing phase starts from the outer <div> and goes down to the inner <div>. Then, the target phase happens on the inner <div>, and finally, the bubbling phase occurs from the inner <div> back up to the outer <div>.

<div id="outerDiv">
  Outer Div
  <div id="innerDiv">Inner Div</div>
</div>

<script>
  const outerDiv = document.getElementById('outerDiv');
  const innerDiv = document.getElementById('innerDiv');

  outerDiv.addEventListener('click', () => console.log('Capturing: Outer Div'), true);
  innerDiv.addEventListener('click', () => console.log('Target: Inner Div'));
  outerDiv.addEventListener('click', () => console.log('Bubbling: Outer Div'));
</script>

Let's understand Bubbling in detail.

Event Bubbling:

Event bubbling is a mechanism in JavaScript where, when an event occurs on an element, such as a click, that event first triggers on the target element and then "bubbles" up through its ancestor elements all the way up to the root of the document (usually <html>). This triggers the same event on each ancestor along the way. Here's an example:

<form onclick="alert('form')">
  FORM
  <div onclick="alert('div')">
    DIV
    <p onclick="alert('p')">P</p>
  </div>
</form>

If you click on the <p> element, the click event will first trigger on the <p> element, then on the <div>, and finally on the <form>. This is because the event bubbles up through each parent element in the DOM hierarchy.

event.target vs. this:

• event.target refers to the element that initiated the event. It remains the same throughout the bubbling process. In the above example, if you click on the <p> element, event.target will be the <p> element.
• this (or event.currentTarget) refers to the current element that the event handler is attached to. In the above example, if the event handler is attached to the <form>, this will be the <form> element.

How to stop event bubbling:

Sometimes, you might want to stop the event from bubbling up further. You can do this using the event.stopPropagation() method. This method stops the event from propagating to parent elements.

<body onclick="alert('the bubbling doesn't reach here')">
  <button onclick="event.stopPropagation()">Click here</button>
</body>

In this example, clicking the button won't trigger the alert on the body element because event.stopPropagation() is called in the button's click event handler.

event.stopImmediatePropagation() is similar to event.stopPropagation(), but also prevents other handlers on the current element from executing.

Event Delegation:

Event delegation is a technique that allows you to handle events more efficiently by attaching a single event listener to a parent element instead of attaching multiple event listeners to individual child elements. This is particularly useful when you have a large number of similar elements that need the same event handling logic.

parentElement.addEventListener('click', function(event) {
    if (event.target.classList.contains('childElement')) {
        // Action to be performed when a child element is clicked
    }
});

<!-- Example: Event delegation -->
<ul id="myList">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<script>
    // Adding a click event listener to the parent ul element
    document.getElementById("myList").addEventListener("click", function(event) {
        // Checking if the clicked element is an li
        if (event.target.tagName === "LI") {
            // Code to execute when an li is clicked
            console.log("Item clicked:", event.target.textContent);
        }
    });
</script>

This approach reduces the number of event listeners and improves performance.

Conclusion

The DOM, or Document Object Model, is an interface that represents the structure of HTML documents. It serves as the bridge between JavaScript code and the browser, allowing manipulation of HTML elements, styles, attributes, and event handling.

The DOM API provides methods and properties to interact with the DOM tree. Examples include querySelector, addEventListener, createElement, innerHTML, textContent, etc.

Through DOM manipulation, developers can dynamically change various aspects of a web page, including text content, HTML attributes, and the structure of the document itself (for example, inserting, updating, or deleting HTML elements).

JavaScript frameworks and libraries like React often utilize DOM manipulation capabilities to efficiently manage and update user interfaces. This lets developers create complex web applications with interactive and responsive user experiences.

To learn more about the DOM, here are a few resources you can check out:

First of all, I wrote a follow-up article, which you can find here:
Client-Side Form Handling with JavaScript.

You can also read more in the following articles:

• DOM Events Lifecycle and Efficient script Loading
• The JavaScript DOM manipulation handbook
• The MDN web docs
• JavaScript DOM manipulation best practices
• JS DOM manipulation in Spanish - full course

The data stored in the Web Storage use the key/value pair format, and both data will be stored as strings.

There are two types of storage introduced in the Web Storage API: Local Storage and Session Storage.

In this article, I’m going to show you how to use the Web Storage API and why it’s useful for web developers.

How the Web Storage API Works

The Web Storage API exposes a set of objects and methods that you can use to store data in the browser. The data you store in Web Storage is private, which means no other website can access it.

In Google Chrome, you can view Web Storage by opening the developer tools window and going to the Application tab as shown below:

The web storage location in Google Chrome

In the picture above, you can see that the Storage menu also has other storage types like Indexed DB, Web SQL, and cookies. The Web SQL standard has been deprecated, and IndexedDB is rarely used because it’s too complex. Any data you store in IndexedDB might better be stored on the server.

As for cookies, it’s a more traditional mechanism of storing data that only allows you to store a maximum of 4 KB of data. By contrast, the Local Storage capacity is 10 MB and the session storage has 5 MB capacity.

This is why we’re going to focus only on Local Storage and Session Storage in this article.

Local Storage and Session Storage Explained

Local Storage and Session Storage are the two standard mechanisms supported by the Web Storage API.

Web storage is domain specific, meaning data stored under one domain (netflix.com) can’t be accessed by another domain (www.netflix.com or members.netflix.com)

Web storage is also protocol specific. This means the data you store in a http:// site won’t be available under the https:// site.

The main difference between Local and Session Storage is that Local Storage will store your data forever. If you want to remove the data, you need to use the available method or clear it manually from the Applications tab.

By contrast, the data stored in session storage is only available during the page session. When you close the browser or the tab, the session storage for that specific tab is removed.

Both Local and Session Storage can be accessed through the window object under the variables localStorage and sesionStorage, respectively. Let’s see the methods and properties of these storage types next.

Methods and Properties of Local and Session Storage

Both Local and Session Storage have the same methods and properties. To set a new key/value pair in the Local Storage, you can use the setItem() method of the localStorage object:

localStorage.setItem('firstName', 'Nathan');

If you look into the Local Storage menu in the browser, you should see the data above saved into the storage as follows:

Storing a key/value pair in Local Storage

The key you used in localStorage must be unique. If you set another data with a key that already exists, then the setItem() method will replace the previous value with the new one.

To get the value out of local storage, you need to call the getItem() method and pass the key you used when saving the data. If the key doesn’t exist, then getItem() will return null back:

const firstName = localStorage.getItem('firstName');
console.log(firstName); // Nathan

const lastName = localStorage.getItem('lastName');
console.log(lastName); // null

To remove the data you have in local storage, call the removeItem() method and pass the key pointing to the data you want to remove:

localStorage.removeItem('firstName');

The removeItem() method will always return undefined. When the data you want to remove doesn’t exist, the method simply does nothing.

If you want to clear the storage, you can use the clear() method:

localStorage.clear();

The clear() method removes all key/value pairs from the storage object you are accessing.

Properties of Local and Session Storage

Both storage types have only one property, which is the length property that shows the amount of data stored in them.

sessionStorage.setItem('firstName', 'Nathan');
sessionStorage.setItem('lastName', 'Sebhastian');

console.log(sessionStorage.length); // 2

sessionStorage.clear();
console.log(sessionStorage.length); // 0

And that’s all the methods and properties you can access in localStorage and sessionStorage.

How to Store JSON Strings in Web Storage Storage

Since Web Storage always stores data as strings, you can store complex data as a JSON string, and then convert that string back into an object when you access it.

For example, suppose I want to store the following information about a user:

const user = {
  firstName: 'Nathan',
  lastName: 'Sebhastian',
  url: 'https://codewithnathan.com',
};

At first, I might store the data as a series of key/value pairs like this:

localStorage.setItem('firstName', user.firstName);
localStorage.setItem('lastName', user.lastName);
localStorage.setItem('url', user.url);

But a better way is to convert the JavaScript object into a JSON string, and then store the data under one key as follows:

const user = {
  firstName: 'Nathan',
  lastName: 'Sebhastian',
  url: 'https://codewithnathan.com',
};

const userData = JSON.stringify(user);

localStorage.setItem('user', userData);

Now the local storage will have only one key/value pair with the JSON string as its value. You can open the Applications tab to see this:

Storing a JSON string in Local Storage

When you need the data, call the getItem() and JSON.parse() methods as follows:

const getUser = JSON.parse(localStorage.getItem('user'));

console.log(getUser);
// {firstName: 'Nathan', lastName: 'Sebhastian', url: 'https://codewithnathan.com'}

Here, you can see that the data is returned as a regular JavaScript object.

Local Storage vs Session Storage – Which One to Use?

Based on my experience, localStorage is the preferred Web Storage mechanism because the data will persist as long as you need it to. When you don’t need the data, you can remove it using the removeItem() method.

sessionStorage is only used when you need to store temporary data, like tracking whether a popup box has been shown to the user or not.

But this is also open to discussion because you might not want to show a popup every time the user logs into your web application, but only once. In that case, you should use localStorage instead.

My rule of thumb is to use localStorage first, and sessionStorage when the situation needs it.

Benefits of Using the Web Storage API

Now that you know how the Web Storage API works, you can see that there are some benefits of using it:

1. Storing data on the browser reduces the need to make a server request for a piece of information. This can improve the performance of your web applications.
2. The simple key/value pair format allows you to store user preferences and local settings that should persist between sessions.
3. The Web Storage API is simple to use, providing only a few methods and one property. It’s simple to set and retrieve data using JavaScript
4. It has offline support. By storing necessary data locally, the Web Storage enables your web application to work offline.
5. The Web Storage is also a standardized API, meaning the code you write will work in many different browsers.

But of course, not all data should be stored in the Web Storage API. You still need a server database to keep records that are important for your application.

Conclusion

Web Storage is a useful API that allows you to quickly store and retrieve data from the browser. Using Web Storage, you can store the user’s preferences when accessing your application.

localStorage allows you to store data forever until it’s removed manually, while sessionStorage will persist as long as the browser or tab is open.

Some benefits of using the Web Storage API include reducing server requests, offline support, and a simple API that’s easy to use. It’s also standardized, so it will work on different browsers.

If you enjoyed this article and want to take your JavaScript skills to the next level, I recommend you check out my new book Beginning Modern JavaScript here.

The book is designed to be easy for beginners and accessible to anyone looking to learn JavaScript. It provides a step-by-step gentle guide that will help you understand how to use JavaScript to create a dynamic web application.

Here's my promise: You will actually feel like you understand what you're doing with JavaScript.

See you later!

In that case, the browser has run a check on the SSL (secure socket layer) certificate and found a problem with it – the SSL could have expired or might not have been installed at all.

In some cases, the problem could be because of your browser and not the website. So, in this article, I will show you how to fix the “Your connection is not private” error on a Chrome browser.

What We'll Cover

• How to Fix the “Your connection is not private” Error on a Chrome Browser
  • Reload the Web Page
  • Clear Chrome’s Cache
  • Make Sure your Computer’s Date and Time are Correct
  • Disable your Antivirus and VPN
• Final Thoughts

How to Fix the “Your connection is not private” Error on a Chrome Browser

Reload the Web Page

The first thing I would advise you do is to reload the page.

Reloading the web page is the old trick everyone tries if there is a problem with that web page.

In addition, there are chances that SSL-related work is going on with the website, so if you wait a while and reload the page, the issue could disappear.

If reloading doesn’t fix the issue for you, proceed to other solutions in this article.

Clear Chrome’s Cache

The SSL data of the website in your Chrome browser cache might have expired. So if you clear the cache, the error may go away.

Follow the steps below to clear your Chrome browser cache:

Step 1: Click the 3 vertical dots on the top-right corner and select Settings:

Step 2: Click the “Privacy and Security” tab on the left sidebar and select “Clear browsing data”:

Step 3: Select Cache and Cookies, then click “Clear data”:

Make Sure your Computer’s Date and Time are Correct

If your computer clock is behind or ahead, your browser will show you a “Your connection is not secure” error.

These days, the error message has become more accurate in Chrome:

In this case, you should set your date and time to the correct one and make it automatic, so nothing readjusts it again:

Disable your Antivirus and VPN

Some Antivirus programs with SSL scanning features can make your browser show the “Your connection is not private” error if they detect any irregularity with the SSL certificate of a website.

In the same vein, a VPN (virtual private network) conceals your IP address and other information. The problem is that the privacy a VPN gives you could have a negative effect on some sites' SSL.

Due to this, you should consider disabling your antivirus and VPN programs, at least temporarily, to see if that fixes the error.

Final Thoughts

Other fixes that might get rid of the “Your connection is not private” error for you include:

• Trying to access the web page in incognito mode. In Chrome, you can open an incognito tab by pressing CTRL + SHIFT + N.
• Restarting your Router
• Restarting your computer
• Updating your OS

If all the fixes fail to work, the problem could be from the website. This means there is a problem with the website’s SSL certificate. So, try to contact the site admin.

If you find no admin to contact, you should stay off that website and make sure you don’t share sensitive information with the site.

If you’re a site admin and your users complain about this error, I wrote an article on how you can restore your site’s SSL.

Every resource used on the internet has a media type, also known as a MIME type which stands for Multipurpose Internet Mail Extension. This information is necessary for transactions between server and client.

The browser needs to know the media type of resources sent to it so that it can handle them properly.

The same goes for the server. It needs to know the type of resources sent to it for accurate parsing and processing.

Where is the Content-Type declared?

The media type of any resource is declared in the Content-Type property of the request header (on the client, when making a request to the server) or in the response header (on the server, when sending a response).

Without explicitly declaring the content type of a resource, the client may attempt to automatically detect the type, but the result may not be accurate. This is why it's important to explicitly declare it.

Media Types

Media types exist in various forms. They are categorized into various groups:

• application
• audio
• font
• example
• image
• message
• model
• multipart
• text
• and video

These categories also have their types. For example, application/json is a type under application and text/html is a type under text.

You can find a complete list of media types in the IANA (a body that coordinates some of the key elements on the internet) media types.

All these types cover various data types like text, audio, images, HTML, and many more types that are used across the internet.

The browser needs to know the media type of a resource

As I mentioned above, the browser needs to know what type of content it receives. Here's an example to illustrate that.

The following code is a Node server that serves an HTML file:

const http = require("http");
const fs = require("fs");
const path = require("path");

const server = http.createServer(function (req, res) {
    const filePath = path.join(__dirname, "index.html");
    var stat = fs.statSync(filePath);

    res.writeHead(200, {
        "Content-Type": "text/css",
        "Content-Length": stat.size,
    });

    const readStream = fs.createReadStream(filePath);
    readStream.pipe(res);
});

server.listen(5000);

console.log("Node.js web server at port 5000 is running..");

Do not worry about the specifics of the code. All you're concerned with is the index.htm file we're serving and that the Content-Type is text/css.

Here's the content of index.html:

<h1>Homepage</h1>

Of course, an HTML document is different from a CSS file. Here's the result on localhost:5000 when the server is started:

You can also confirm the response gotten by checking the headers in the network tab of the DevTools.

Here's the result on a Chrome browser:

The browser got the content as a CSS type, therefore, it tried treating it as CSS.

Also, note that full knowledge of the type of content gotten by the browser also reduces security vulnerabilities as the browser knows security standards to put in place for that data.

Now that you understand the concept of MIME types and their importance, let's head over to JSON.

The Correct Content-Type for JSON

JSON has to be correctly interpreted by the browser to be used appropriately. text/plain was typically used for JSON, but according to IANA, the official MIME type for JSON is application/json.

This means when you're sending JSON to the server or receiving JSON from the server, you should always declare the Content-Type of the header as application/json as this is the standard that the client and server understand.

Conclusion

As stated above, the server (just like the browser) needs to know the type of data sent to it, say, in a POST request. That's the reason forms with files usually contain the enctype attribute with a value of multipart/form-data.

Without encoding the request this way, the POST request won't work. Also, once the server knows the type of data it has gotten, it then knows how to parse the encoded data.

In this article, we looked at what MIME types are and their purpose. Also, we looked at the official content type for JSON. I hope you now know why it's important to declare resource types when used across the internet.

In this article, I will demystify the difference between encodeURI and encodeURIComponent.

What is a URI and how is it different from a URL?

URI stands for Uniform Resource Identifier. URL stands for Uniform Resource Locator.

Anything that uniquely identifies a resource is its URI, such as id, name, or ISBN number. A URL specifies a resource and how it can be accessed (the protocol). All URLs are URIs, but not all URIs are URLs.

Why do we need to encode?

URLs can only have certain characters from the standard 128 character ASCII set. Reserved characters that do not belong to this set must be encoded.

This means that we need to encode these characters when passing into a URL. Special characters such as &, space, ! when entered in a url need to be escaped, otherwise they may cause unpredictable situations.

Use cases:

1. User has submitted values in a form that may be in a string format and need to be passed in, such as URL fields.
2. Need to accept query string parameters in order to make GET requests.

What is the difference between encodeURI and encodeURIComponent?

encodeURI and encodeURIComponent are used to encode Uniform Resource Identifiers (URIs) by replacing certain characters by one, two, three or four escape sequences representing the UTF-8 encoding of the character.

encodeURIComponent should be used to encode a URI Component - a string that is supposed to be part of a URL.

encodeURI should be used to encode a URI or an existing URL.

Here's a handy table of the difference in encoding of characters

Which characters are encoded?

encodeURI() will not encode: ~!@#$&*()=:/,;?+'

encodeURIComponent() will not encode: ~!*()'

The characters A-Z a-z 0-9 - _ . ! ~ * ' ( ) are not escaped.

Examples

const url = 'https://www.twitter.com'

console.log(encodeURI(url))             //https://www.twitter.com
console.log(encodeURIComponent(url))    //https%3A%2F%2Fwww.twitter.com


const paramComponent = '?q=search'
console.log(encodeURIComponent(paramComponent)) //"%3Fq%3Dsearch"
console.log(url + encodeURIComponent(paramComponent)) //https://www.twitter.com%3Fq%3Dsearch

When to encode

1. When accepting an input that may have spaces.

    encodeURI("http://www.mysite.com/a file with spaces.html") //http://www.mysite.com/a%20file%20with%20spaces.html
   

2. When building a URL from query string parameters.

    let param = encodeURIComponent('mango')
    let url = "http://mysite.com/?search=" + param + "&length=99"; //http://mysite.com/?search=mango&length=99
   

3. When accepting query parameters that may have reserved characters. ```JS let params = encodeURIComponent('mango & pineapple') let url = "http://mysite.com/?search=" + params; //http://mysite.com/?search=mango%20%26%20pineapple

```

Summary

If you have a complete URL, use encodeURI. But if you have a part of a URL, use encodeURIComponent.

Interested in more tutorials and JSBytes from me? Sign up for my newsletter. or follow me on Twitter

###

When I consider the performance of a website, several things come to mind. I think about looking at the requests of a page, understanding what resources are being loaded, and how long these resources take to be available to users.

The network tab will give you a table containing all assets loaded on the page. It will also show you relevant information about the origin of those assets (domain, HTTP status code, size), who initiated the request, and the order in which they were loaded in a waterfall representation.

You can add more information to this table by right-clicking one of the table headers and choosing other columns.

The size, time and waterfall columns will be crucial to understanding the performance of a page. The size value will present the gzipped size of the resource (when applicable), while the time column shows the total duration from the start of the request to the receipt of the final byte in the response.

Last, but not least, the waterfall column demonstrates when the asset is loaded along with the other requests.

Performance improvements are noticeable by changes in your code/environment. So how do we keep track of what is being analyzed by the Network tab? By exporting the page in HAR format.

What is a HAR file?

A HAR (short for HTTP Archive) file is a JSON file containing all information about a browser’s interactions with a page. It will contain the HTML document and its respective JS and CSS files.

Along with this content, a HAR file will also contain all headers’ information and the browser metadata (that is, the time of each request).

It is important to mention here that cookies and form data will also be logged in the file, so be careful to not include sensitive information (personal details, passwords, credit card numbers) while auditing pages.

Also, you should audit pages in private windows, which avoids browser extensions. It's important to avoid a browser’s extensions since they may modify the loading times of a page.

Generating HAR files

Google Chrome

• Close all incognito windows in Google Chrome.
• Open a new incognito window in Google Chrome.
• Go to View > Developer > Developers Tools.
• In the Developer Tools panel, choose the Network tab.
• Check the Preserve Log and Disable cache checkboxes to record all interactions.
• Refresh the page.
• Click the Export HAR (down arrow icon) to export the HAR file.
• Save the HAR file.

Firefox

• Close all private windows in Firefox.
• Open a new private window in Firefox.
• Go to Tools > Developer > Network or ctrl-shift-E.
• Refresh the page.
• In the Cog icon (upper right side of the page), choose Save All As Har.
• Save the HAR file.

Safari

• Ensure that Show Develop menu in menu bar checkbox is checked under Safari > Preferences > Advanced.
• Choose File > Open New Private Window.
• Visit the web page where the issue occurs.
• Choose Develop > Show Web Inspector. The Web Inspector window appears.
• Refresh the page.
• Click Export on the upper right side of the pane.
• Save the HAR file.

Reading HAR files

Once you have a HAR file, you can try a few HAR viewers online. My personal favourite is the one created by Jan Odavarko.

What I like about this viewer in particular is the fact you can have multiple files open at the same time, which makes it easier to compare them.

Using HAR files to analyze the performance of a page

HAR files can be useful to collect information about the assets of a page. Since you have detailed information about their content, you can compare what has improved (or in some cases, not improved) after a new feature is launched or a redesign is completed, for example.

During my workflow, I like to keep track of the final size/time values of a few pages of the product that I am working on.

More information

• Measure Resource Loading Times
• HAR Viewer source code

Also posted on my blog. If you like this content, follow me on Twitter and GitHub. Cover photo by William Daigneault/Unsplash

As front end developers, most of our time is spent in the browser with DevTools open (almost always, unless we are watching YouTube ... sometimes even then).

One of the major sections in DevTools is the network tab. There are a couple of things you can do in the network tab, like the following:

• Find network requests by text
• Find network requests by regex expression
• Filter (exclude) out network requests
• Use the property filter to see network requests by a certain domain
• Find network requests by resource type

For the purposes of this tutorial I am using freeCodeCamp's home page, freecodecamp.org/news. Simply go to the page and open the network tab.

You can see the network tab by hitting cmd + opt + j on your Mac or ctrl + shift + j in Windows. It will open up the console tab in DevTools by default.

Clicking "cmd + opt + j" opens up console panel in DevTools

Once the console tab is open, simply click on the network tab to make it visible.

Clicking on the "network" tab will show you all network requests being made for a certain page

Once the network tab is open we can begin our tutorial.

Let's begin

Make sure the correct page is open (freecodecamp.org/news) and the "network" tab panel is open in DevTools:

Illustration on where the filter bar is in network panel.

• The green box here illustrates the icon that can hide/show the filter area in the network panel tab.
• The red box here illustrates the filter area box. With this box we can filter out network requests.

Find network request by text

Type analytics into the Filter text box. Only the files that contain the text analytics are shown.

Find network request by regex expression

Type /.*\min.[c]s+$/. DevTools filters out any resources with filenames that end with a min.c followed by 1 or more s characters.

Filter (exclude) out network request

Type -min.js. DevTools filters out all files that contain min.js. If any other file matches the pattern they will also be filtered out and won't be visible in the network panel.

Use property filter to see network request by a certain domain

Type domain:code.jquery.com into the filter area. It will only show network requests that belong to the URL code.jquery.com.

Find network request by resource type

If you only want to see which font(s) file is being used on a certain page click Font:

Filtering network requests by "font" type files only

Or if you only want to see the web socket files being loaded on a certain page click WS:

Filtering network requests by "web socket" type files only

You can also go one step further and view both Font & WS files together. Simply click on Font first and then cmd click on WS to multi-select tabs. (If you are on a Windows machine you can multi-select by using ctrl click).

Multi selecting multiple resource types by "cmd` click on types

That is it for this tutorial. If you found it useful do share it with your colleagues and let me know what you think as well on twitter.com/adeelibr.