PY
JS

Python to JavaScript

11 lessons

Progress0%
1Variables and Constants2Functions and Closures3Lists vs Arrays4Dicts vs Objects and Map5Classes and Prototypes6Modules and Imports7Async Programming8DOM and Browser APIs9Type Hints vs TypeScript10Error Handling11Build Tools and npm
All Mirror Courses
PY
JS
DOM and Browser APIs
MirrorLesson 8 of 11
Lesson 8

DOM and Browser APIs

Interacting with web pages (Python has no equivalent)

Introduction

In this lesson, you'll learn about dom and browser apis in JavaScript. Coming from Python, you already have a foundation for understanding this concept. We'll build on that knowledge while highlighting the key differences.

Mirror Card
PY
From Python:

In Python, you're familiar with interacting with web pages (python has no equivalent).

JS
In JavaScript:

JavaScript has its own approach to interacting with web pages (python has no equivalent), which we'll explore step by step.

The JavaScript Way

Let's see how JavaScript handles this concept. Here's a typical example:

JS
JavaScript Example
// Select elements
const heading = document.querySelector("h1");
const items   = document.querySelectorAll(".item");

// Read / modify content
heading.textContent = "Hello, World!";
heading.innerHTML   = "<em>Hello</em>";

// Style
heading.style.color = "blue";
heading.classList.add("active");
heading.classList.toggle("hidden");

// Create & append
const btn = document.createElement("button");
btn.textContent = "Click me";
document.body.appendChild(btn);

// Events
btn.addEventListener("click", (e) => {
  console.log("Clicked!", e.target);
});

// Fetch data and update UI
const res  = await fetch("/api/data");
const data = await res.json();
heading.textContent = data.title;

Comparing to Python

Here's how you might have written similar code in Python:

PY
Python (What you know)
# Python runs on the SERVER — it has no DOM.
# Closest equivalents:

# 1. BeautifulSoup – parse HTML on the server
from bs4 import BeautifulSoup
soup = BeautifulSoup("<h1>Hello</h1>", "html.parser")
h1 = soup.find("h1")
print(h1.text)  # "Hello"

# 2. Selenium – control a browser from Python
from selenium import webdriver
driver = webdriver.Chrome()
driver.get("https://example.com")
el = driver.find_element("id", "btn")
el.click()

# 3. Flask/Django – generate HTML dynamically
# There is no direct equivalent to live DOM manipulation.
Mirror Card
PY
From Python:

You may be used to different syntax or behavior.

JS
In JavaScript:

DOM manipulation is JavaScript's unique superpower — Python cannot do this in browsers

Mirror Card
PY
From Python:

You may be used to different syntax or behavior.

JS
In JavaScript:

querySelector/querySelectorAll select elements by CSS selector

Mirror Card
PY
From Python:

You may be used to different syntax or behavior.

JS
In JavaScript:

Events (click, keydown, submit) are central to front-end JS

Mirror Card
PY
From Python:

You may be used to different syntax or behavior.

JS
In JavaScript:

Fetch + DOM update is the core web development loop

Step-by-Step Breakdown

1. Selecting Elements

querySelector returns the first match; querySelectorAll returns a NodeList of all matches.

PY
Python
# No equivalent — Python runs on the server
JS
JavaScript
document.querySelector("#id")       // by id
document.querySelector(".class")   // by class
document.querySelectorAll("li")    // all <li> elements

2. Modifying the DOM

textContent is safe (escapes HTML); innerHTML renders HTML (use carefully to avoid XSS).

PY
Python
# Python renders HTML before it reaches the browser
JS
JavaScript
el.textContent = "Safe text";
el.innerHTML = "<b>Bold</b>"; // ⚠️ XSS risk with user input
Common Pitfall
Never set innerHTML with user-provided data — always sanitize first to prevent XSS.

3. Event Listeners

addEventListener attaches a function that fires when the event occurs.

PY
Python
# Python: handle HTTP requests (not live user events)
JS
JavaScript
btn.addEventListener("click", (e) => {
  console.log(e.target);
});
// Remove it:
btn.removeEventListener("click", handler);
Rule of Thumb
Prefer addEventListener over onclick attributes — it allows multiple handlers and is easier to remove.

Common Mistakes

When coming from Python, developers often make these mistakes:

  • DOM manipulation is JavaScript's unique superpower — Python cannot do this in browsers
  • querySelector/querySelectorAll select elements by CSS selector
  • Events (click, keydown, submit) are central to front-end JS
Common Pitfall
Don't assume JavaScript works exactly like Python. While the concepts may be similar, the syntax and behavior can differ significantly.

Key Takeaways

  • DOM is JavaScript-only — Python manipulates HTML on the server
  • querySelector/querySelectorAll for element selection
  • addEventListener for user interaction
Rule of Thumb
The best way to learn is by doing. Try rewriting some of your Python code in JavaScript to practice these concepts.
PreviousNext