DEV Community

Elayaraj C
Elayaraj C

Posted on

Understanding Template Literals and the DOM in JavaScript

#javascript #html

What Are Template Literals?

Template literals are an improved way to handle strings in JavaScript.
Instead of using single quotes ' ' or double quotes " ", template literals use backticks (`).

But they’re not just another way to define strings — they unlock new powers:

  • Insert variables or expressions directly inside strings (string interpolation)
  • Write multi-line strings without extra characters
  • Embed dynamic content cleanly

Basic Syntax

const name = 'Elayaraj';
const greeting = Hello, ${name}!;
console.log(greeting); // Output: Hello, Elayaraj!

Notice:

We use backticks (`).
We embed variables using ${}.

Why Use Template Literals?

Let’s compare.

Without template literals:

const name = 'Elayaraj';
const greeting = 'Hello, ' + name + '!';

With template literals:

const greeting =Hello, ${name}!;

  1. Cleaner
  2. Easier to read
  3. No annoying + signs everywhere Multi-line Strings

Before template literals:

const text = 'This is line one.\n' +
             'This is line two.';
Enter fullscreen mode Exit fullscreen mode

With template literals:

const text = `This is line one.
              This is line two.`;
Enter fullscreen mode Exit fullscreen mode
  • No need for \n
  • Write naturally across lines Embedded Expressions

You can run any expression inside ${}.

const a = 5;
const b = 10;
console.log(The sum is ${a + b}.); // Output: The sum is 15.

You can even call functions:

const name = 'Elayaraj';
const upper =Hello, ${name.toUpperCase()}!;
console.log(upper); // Output: Hello, ELAYARAJ!

Advanced: Tagged Template Literals

You can also create tagged templates — special functions that process template literals.

Example:

`function tag(strings, value) {
return strings[0] + value.toUpperCase() + strings[1];
}

const name = 'Elayaraj';
const result = tagHello, ${name}!;
console.log(result); // Output: Hello, ELAYARAJ!
`
This is useful for advanced use cases like custom formatting or internationalization.
Final Thoughts

Template literals are a game-changer for writing clean, dynamic, and maintainable JavaScript code.

  1. Easier string interpolation
  2. Native multi-line support
  3. Embedded expressions
  4. Extendable with tags

What is the DOM?

The DOM stands for Document Object Model.
It’s a programming interface that represents your HTML page as a tree of objects.

Imagine your HTML like this:

<html>
  <body>
    <h1>Welcome!</h1>
    <p>This is a blog post.</p>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

The browser turns this into a tree where:

  • Each tag (like

    or

    ) is a node.

  • The whole page becomes a structured object JavaScript can access and manipulate.

In short: The DOM is how JavaScript “sees” and interacts with the web page.

Why is the DOM Important?

  1. It lets you read page content
  2. It lets you change what’s displayed dynamically
  3. It lets you respond to user actions (like clicks, form input, etc.) Without the DOM, your JavaScript could not connect to the visual part of your website.

Common DOM Operations

1️) Selecting Elements

You can grab elements from the page using:

document.getElementById('myId');
document.querySelector('.myClass');
document.querySelectorAll('p');
Enter fullscreen mode Exit fullscreen mode

Example:

const title = document.getElementById('title');
Enter fullscreen mode Exit fullscreen mode

2️)Changing Content

You can modify what’s shown on the page:

title.textContent = 'New Heading';
title.innerHTML = '<span>New Heading</span>';
Enter fullscreen mode Exit fullscreen mode
  • textContent → just the text
  • innerHTML → includes HTML markup

3️)Changing Styles

You can directly change styles:

title.style.color = 'blue';
title.style.fontSize = '2em';
Enter fullscreen mode Exit fullscreen mode

Or, for better practice, toggle CSS classes:

title.classList.add('highlight');
title.classList.remove('hidden');
Enter fullscreen mode Exit fullscreen mode

4️) Handling Events

You can make the page respond to user actions:

const button = document.querySelector('button');
button.addEventListener('click', () => {
  alert('Button clicked!');
});
Enter fullscreen mode Exit fullscreen mode

This is how you create interactive web apps.
How the DOM + JavaScript Work Together

Think of JavaScript as the brain and the DOM as the body.
The JavaScript reads, updates, and controls the DOM to make your web page come alive.

  • Some real-world uses:
  • Show or hide elements
  • Load dynamic content
  • Validate forms
  • Build animations and effects
  • Create single-page apps (SPAs)

Top comments (1)

Collapse
 
nathan_tarbert profile image
Nathan Tarbert •

been cool seeing steady progress - it adds up. you think most people start with this stuff and then stick with it just by messing around or is it more about having a clear project to build?