DOM Properties and Methods

The Document Object Model (DOM) is the "representation of the objects that comprise the structure and content of a document on the web." It represents the page in a way that programs, like JavaScript, can manipulate the document structure, style, and content.

The DOM defines:

HTML elements as objects (i.e., how an HTML element is represented when assigned to a variable).

const mainHeading = document.querySelector("#main-heading");

The properties of HTML element objects, which are similar to attributes in HTML.

Properties can be set:

headshotImage.src = "images/headshot.webp";

Properties can also be read:

const volume = sliderInput.value;

The methods (actions) that can be performed on or by HTML element objects. Methods are like functions defined within an object (notice that they have parentheses). Many (but not all) methods require arguments inside the ().

primaryButton.classList.toggle("active");

The events that can be triggered by HTML elements.

primaryButton.addEventListener("click", toggleState);

Getting Started with Properties

Here are some common examples of setting and reading properties in JavaScript.

innerText

To change the text displayed in an HTML element via JavaScript, assign a value to the innerText property:

element.innerText = "Hello!";

See the Pen innerText (IMS322 Docs) by Eric Sheffield (@ersheff) on CodePen.

value

<input> elements have a value attribute that can be read or assigned in JavaScript.

In the example below, four sliders each have a different initial value set in the HTML (as an attribute), which is why they start at different positions (sliders default to a range of 0 to 100).

See the Pen Input Values (IMS322 Docs) by Eric Sheffield (@ersheff) on CodePen.

These values can be read in JavaScript by listening for the input event (e.g., in response to user ineraction), or set programmatically.

See the Pen Getting and Setting Values (IMS322 Docs) by Eric Sheffield (@ersheff) on CodePen.

Getting Started with Methods

Some methods - like document.querySelector(), console.log(), .addEventListener(), and classList.toggle() - are used so frequently that they become second nature. At times, you might need to reference online documentation to explore more methods (or properties and events) associated with an object. For example, the play() method is described in the Basic Usage section of the MDN Web Docs article on HTML Audio Elements.

See the Pen Audio Element Methods (IMS322 Docs) by Eric Sheffield (@ersheff) on CodePen.