Introduction to JavaScript Objects and the DOM

Introduction to JavaScript Objects and the DOM

JavaScript is a powerful language that lets you create dynamic, interactive web pages. Two fundamental concepts you’ll use daily are JavaScript Objects and the DOM (Document Object Model). Let’s break down what they are and why they matter.

1. What Are JavaScript Objects?

An object is a collection of related data and functions (called properties and methods). Objects help organize and structure your code by grouping related information.

Example: A simple JavaScript object

• Properties: name and age store data.

• Method: greet is a function inside the object that can use its data.

2. What is the DOM?

The DOM (Document Object Model) is a programming interface for web pages. It represents the page as a tree of objects (nodes) that JavaScript can interact with — like elements, text, and attributes.

Think of the DOM as a bridge between JavaScript and HTML: it lets JS read, change, add, or remove elements on the page dynamically.

3. Accessing the DOM with JavaScript Objects

When you use JavaScript to select parts of the webpage, you get DOM objects representing elements.

Example: Selecting and changing content

Here:

• document.getElementById('demo') returns a DOM object for the paragraph.

• We change its textContent property to update the visible text.

4. Common DOM Object Methods and Properties

• Selecting elements:

  • document.getElementById()

  • document.querySelector()

  • document.querySelectorAll()

• Changing content:

  • .textContent — changes the text inside an element

  • .innerHTML — changes the HTML content inside an element

• Modifying styles:

  • .style property (e.g., element.style.color = "red")

• Adding event listeners:

  • .addEventListener("click", function)

5. Why Are JavaScript Objects and the DOM Important Together?

• JavaScript objects let you structure your data and logic.

• DOM objects represent the webpage elements that your JavaScript can manipulate.

Together, they let you build interactive, dynamic web experiences — like updating content without reloading the page, responding to user clicks, or validating forms.

Quick Recap