JavaScript - DOM Methods & Properties

Overview

Estimated time: 20–30 minutes

Learn the most important DOM methods and properties for selecting, traversing, and manipulating elements in the document.

Learning Objectives

• Select elements using getElementById, querySelector, etc.
• Modify element attributes, classes, and styles.

Prerequisites

• JavaScript - DOM Basics

Selecting Elements

const el = document.getElementById('myId');
const items = document.querySelectorAll('.item');

Modifying Elements

el.classList.add('active');
el.setAttribute('data-role', 'main');
el.style.color = 'red';

Traversing the DOM

el.parentElement;
el.children;
el.nextElementSibling;

Common Pitfalls

• querySelector/querySelectorAll return null/empty NodeList if no match.

Summary

Mastering DOM methods and properties is essential for building interactive web pages.