Understanding the Basic Example

Before we look at the code, we need to understand one important idea:

Every element on a webpage has an address. Selectors are how you find it.

Just like your home has a street address, every element in your HTML can be found using a selector. Different selectors work like different ways of identifying someone — by their name, their job title, or what they're wearing.

Let's break down the four types used in this example, one by one.

The full example (we'll explain every line)

javascript

Selector.update({
  '#header': { textContent: 'Welcome!' },
  '.btn': { disabled: true },
  'p': { style: { lineHeight: '1.6' } },
  'input[type="email"]': { placeholder: 'Email' }
});

At first glance this might look complex. But once you understand each selector, it reads like plain English. Let's go line by line.

Line 1: The `#` symbol — targeting by ID

javascript

'#header': { textContent: 'Welcome!' }

What does `#` mean?

The # symbol means "find the element with this ID".

An ID is a unique name given to a specific element in your HTML. Think of it like a social security number — no two elements should share the same ID. There is only one.

What does it look like in HTML?

html

<h1 id="header">Loading...</h1>

See that id="header"? That's how the element identifies itself. The #header selector finds exactly this element.

What's the connection?

HTML:                          JavaScript:
id="header"       ←——————→     '#header'

The # in JavaScript says: "I'm looking for an element with this ID."

What does this line do?

javascript

'#header': { textContent: 'Welcome!' }

It finds the one element with id="header" and changes its text to "Welcome!".

Before:

┌──────────────────────────────┐
│  Loading...                  │  ← The h1 before the update
└──────────────────────────────┘

After:

┌──────────────────────────────┐
│  Welcome!                    │  ← Text changed by textContent
└──────────────────────────────┘

The key rule for `#`:

# = one specific element (because IDs are unique)

Line 2: The `.` symbol — targeting by class

javascript

'.btn': { disabled: true }

What does `.` mean?

The . symbol means "find all elements with this class".

A class is like a label or a group membership. Multiple elements can share the same class. Think of it like a school uniform — many students wear it, and saying "the students in uniform" refers to all of them at once.

What does it look like in HTML?

html

<button class="btn">Save</button>
<button class="btn">Cancel</button>
<button class="btn">Delete</button>

All three buttons have class="btn". The .btn selector finds all three of them.

What's the connection?

HTML:                          JavaScript:
class="btn"       ←——————→     '.btn'

The . in JavaScript says: "I'm looking for every element wearing this class label."

What does this line do?

javascript

'.btn': { disabled: true }

It finds every element with class="btn" and disables all of them at once.

Before:

┌──────────────┐  ┌──────────────┐  ┌──────────────┐
│   Save       │  │   Cancel     │  │   Delete     │
│  (clickable) │  │  (clickable) │  │  (clickable) │
└──────────────┘  └──────────────┘  └──────────────┘

After:

┌──────────────┐  ┌──────────────┐  ┌──────────────┐
│   Save       │  │   Cancel     │  │   Delete     │
│  (disabled)  │  │  (disabled)  │  │  (disabled)  │
└──────────────┘  └──────────────┘  └──────────────┘

One line of code. Three buttons disabled. All at once.

The key rule for `.`:

. = every element sharing this class (could be 1, could be 100)

Line 3: No symbol — targeting by tag name

javascript

'p': { style: { lineHeight: '1.6' } }

What does writing just a word mean?

When you write a selector with no # or . in front of it, you're targeting an HTML tag directly.

A tag is the building block of HTML. <p> is a paragraph tag. <h1> is a heading tag. <button> is a button tag. When you write just 'p' as a selector, you're saying "find every paragraph on the page".

What does it look like in HTML?

html

<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p>

The selector 'p' matches all three — and every other <p> on the page.

What does this line do?

javascript

'p': { style: { lineHeight: '1.6' } }

It finds every paragraph on the page and sets its lineHeight to 1.6.

What is lineHeight?
It's the space between lines of text. Like the spacing setting in a word processor.

lineHeight: '1' = tight, lines close together
lineHeight: '1.6' = comfortable reading spacing
lineHeight: '2' = double-spaced

Before (tight spacing):

This is a paragraph with
tight line spacing. The lines
feel cramped and hard to read.

After (1.6 spacing):

This is a paragraph with

comfortable line spacing. The

lines are easier to read now.

The key rule for tag selectors:

Just the tag name = every element of that type on the page

Line 4: The `[]` brackets — targeting by attribute

javascript

'input[type="email"]': { placeholder: 'Email' }

What does `[]` mean?

The square brackets [] let you target elements based on their attributes — specific settings or properties that are written inside the HTML tag.

This is like saying: "Find me every person who has a blue badge" — you're targeting something specific about them, not just their job title or name.

What does it look like in HTML?

html

<input type="text">
<input type="email">
<input type="password">
<input type="email">

Here we have four <input> elements, but only two of them have type="email". The selector 'input[type="email"]' finds exactly those two — and ignores the others.

Breaking it down piece by piece:

input  [  type  =  "email"  ]
  │     │   │   │      │
  │     │   │   │      └── The value we're looking for
  │     │   │   └───────── Must equal this
  │     │   └───────────── The attribute name
  │     └───────────────── "that has this attribute..."
  └─────────────────────── Find elements of this type

In plain English: "Find all input elements that have a type attribute set to email."

What does this line do?

javascript

'input[type="email"]': { placeholder: 'Email' }

It finds every email input and adds a placeholder — the light grey hint text that appears inside an empty input field.

Before:

┌─────────────────────────────┐
│                             │  ← Empty, no hint
└─────────────────────────────┘

After:

┌─────────────────────────────┐
│ Email                       │  ← Placeholder text (greyed out hint)
└─────────────────────────────┘

Notice it only targets email inputs. Your type="text" and type="password" inputs are untouched.

The key rule for `[]`:

[attribute="value"] = elements with this specific attribute and value

Now let's read the whole example together

javascript

Selector.update({
  '#header': { textContent: 'Welcome!' },        
  '.btn': { disabled: true },                    
  'p': { style: { lineHeight: '1.6' } },        
  'input[type="email"]': { placeholder: 'Email' }
});

Reading it like a beginner now, after understanding each part:

Selector	Translation
`'#header'`	"The one element named header"
`'.btn'`	"Every element wearing the btn label"
`'p'`	"Every paragraph on the page"
`'input[type="email"]'`	"Every input that accepts emails"

In plain English this code says:

"Update the header's text to 'Welcome!', disable all buttons with class btn, give every paragraph comfortable line spacing, and add a placeholder to every email input."

All in one call. Four different things. Zero loops.

The cheat sheet

Stick this somewhere you can see it:

#name     →  One specific element  (unique ID)
.name     →  Group of elements     (shared class)
tag       →  All of that tag type  (p, button, div...)
[x="y"]   →  Elements with this attribute set to this value

A visual summary

Your HTML page:
┌─────────────────────────────────────────┐
│  <h1 id="header">...</h1>               │ ← #header finds this ONE
│                                         │
│  <button class="btn">Save</button>      │ ← .btn finds ALL of these
│  <button class="btn">Cancel</button>    │ ←
│  <button class="btn">Delete</button>    │ ←
│                                         │
│  <p>First paragraph...</p>             │ ← 'p' finds ALL of these
│  <p>Second paragraph...</p>            │ ←
│                                         │
│  <input type="text">                   │ ← NOT targeted
│  <input type="email">                  │ ← input[type="email"] gets this
│  <input type="email">                  │ ← and this
└─────────────────────────────────────────┘

Now Selector.update() updates them — all in one call.

What makes this different from `#` and `.` in CSS?

If you've written CSS before, you've already seen these symbols:

css

/* CSS */
#header { color: blue; }
.btn { padding: 10px; }
p { line-height: 1.6; }
input[type="email"] { border: 1px solid blue; }

The selectors work exactly the same way.

The only difference is:

In CSS, you change appearance (colors, spacing, fonts)
In Selector.update(), you change anything (text, behavior, attributes, events, and yes — styles too)

Same language. More power.

Understanding the Basic Example ​

The full example (we'll explain every line) ​

Line 1: The # symbol — targeting by ID ​

What does # mean? ​

What does it look like in HTML? ​

What's the connection? ​

What does this line do? ​

The key rule for #: ​

Line 2: The . symbol — targeting by class ​

What does . mean? ​

What does it look like in HTML? ​

What's the connection? ​

What does this line do? ​

The key rule for .: ​

Line 3: No symbol — targeting by tag name ​

What does writing just a word mean? ​

What does it look like in HTML? ​

What does this line do? ​

The key rule for tag selectors: ​

Line 4: The [] brackets — targeting by attribute ​

What does [] mean? ​

What does it look like in HTML? ​

Breaking it down piece by piece: ​

What does this line do? ​

The key rule for []: ​

Now let's read the whole example together ​

The cheat sheet ​

A visual summary ​

What makes this different from # and . in CSS? ​

Understanding the Basic Example

The full example (we'll explain every line)

Line 1: The `#` symbol — targeting by ID

What does `#` mean?

What does it look like in HTML?

What's the connection?

What does this line do?

The key rule for `#`:

Line 2: The `.` symbol — targeting by class

What does `.` mean?

What does it look like in HTML?

What's the connection?

What does this line do?

The key rule for `.`:

Line 3: No symbol — targeting by tag name

What does writing just a word mean?

What does it look like in HTML?

What does this line do?

The key rule for tag selectors:

Line 4: The `[]` brackets — targeting by attribute

What does `[]` mean?

What does it look like in HTML?

Breaking it down piece by piece:

What does this line do?

The key rule for `[]`:

Now let's read the whole example together

The cheat sheet

A visual summary

What makes this different from `#` and `.` in CSS?