JavaScript DOM Methods and Properties

Published March 25, 2024 | By Matt

Have you ever wondered how web pages go from static blocks of text to the interactive experiences we use every day? Think about buttons that change things, menus that appear when you hover over them, or forms that magically validate your input. The secret lies in the Document Object Model (DOM) and JavaScript’s ability to manipulate it.

The DOM Made Simple

Imagine your HTML page as a family tree. Each HTML tag is like a member of that family. At the top, you have the <html> element as the grandparent, then elements like <head> and <body> as its children, and so on. The DOM is this tree-like representation that JavaScript can interact with.

Why It Matters

Understanding the DOM is the foundation for adding any kind of dynamic behavior to your web pages. Without it, websites would be pretty boring!

DOM Properties – Your Access Points

Think of DOM properties as the way you describe different elements in that HTML family tree.

Key Node Properties
- nodeType: Tells you if you’re dealing with an element, text, or something else.
- nodeName: The tag name of an element (like “DIV,” “P,” “IMG”).
- nodeValue: The actual text content within a text node.
Document Properties
- document.body: Represents the entire <body> section of your page.
- document.title: Contains the text within the <title> tag.

Example: Changing the Page Title

JavaScript

document.title = “My New Awesome Title!”;

DOM Methods – Your Power Tools

If properties are for describing elements, methods are the actions you can take on them.

The Art of Selection
- getElementById(‘my-button’): Grabs a single element with the specified ID.
- getElementsByTagName(‘p’): Returns a collection of all paragraph elements.
- querySelectorAll(‘.special-image’): The most flexible, uses CSS-like selectors.
Transformation
- createElement(): Lets you build new HTML elements from scratch.
- appendChild(): Adds a new element as a child of another.
- removeChild(): Removes an element from the page.
Style and Content
- element.textContent: Gets or sets the plain text inside an element.
- element.innerHTML: Gets or sets the full HTML content within an element.
- element.style.color = ‘blue’: Changes CSS styles directly.

It’s Alive! Events and the DOM

The DOM lets you react to user actions:

Brief Intro to Events: Clicks, hovers, form submissions—these are all events.
Example: A Revealing Button

JavaScript

const button = document.getElementById(‘secret-button’);

button.addEventListener(‘click’, function() {

const hiddenMessage = document.getElementById(‘secret-message’);

hiddenMessage.style.display = ‘block’;

});

Leveling Up

There’s Always More: This is a foundational guide – explore resources like MDN Web Docs to dive deeper.
Frameworks and Libraries: React, Vue.js, and others streamline DOM manipulation for large projects.

Conclusion

Now that you have a grasp of the DOM, you’re ready to start making your websites interactive. Start small, experiment, and have fun!