Modifying Web Page DOM

Welcome to modifying web page content! This lesson teaches you how to change what users see on a website using your extension.

We'll dive into the Document Object Model (DOM), which is like a tree structure representing all the elements on a web page. Your extension's content scripts can interact with this tree.

Before you can change an element, you need to find it! JavaScript provides several ways to select elements from the DOM.

• document.querySelector(): Finds the first element matching a CSS selector.
• document.querySelectorAll(): Finds all elements matching a CSS selector.
• document.getElementById(): Finds an element by its unique ID.

These are your primary tools for targeting specific parts of a web page.