HTML DOM Tutorial

Introduction to the DOM

The Document Object Model (DOM) is a programming interface for web documents. It represents the structure of a document as a tree of objects that can be modified with scripting languages like JavaScript.

Accessing Elements

To access an HTML element, JavaScript uses the document.getElementById() method. This method returns the element with the specified ID.

Try yourself 
        
            
// Example: Accessing an element by ID
let myElement = document.getElementById('myElementId');

Manipulating Elements

You can change the content of an HTML element using the innerHTML property or modify its attributes.

Try yourself 
        
            
// Example: Changing the content of an element
let myElement = document.getElementById('myElementId');
myElement.innerHTML = 'New Content';

// Example: Modifying an attribute
myElement.setAttribute('src', 'newImage.jpg');

Changing Styles

You can change the style of an HTML element using the style property. This property allows you to set CSS properties directly.

Try yourself 
        
            
// Example: Changing the style of an element
let myElement = document.getElementById('myElementId');
myElement.style.color = 'red';
myElement.style.fontSize = '24px';

Handling Events

Events are actions that happen to HTML elements. JavaScript can be used to trigger events or respond to them.

Try yourself 
        
            
// Example: Adding an event listener
let myButton = document.getElementById('myButtonId');
myButton.addEventListener('click', function() {
    alert('Button Clicked!');
});

Creating Elements

You can create new HTML elements using JavaScript with the document.createElement() method.

Try yourself 
        
            
// Example: Creating a new element
let newElement = document.createElement('div');
newElement.innerHTML = 'New Element';
document.body.appendChild(newElement);

Adding and Removing Elements

Elements can be added or removed from the DOM using methods like appendChild() and removeChild().

Try yourself 
        
            
// Example: Adding an element
let parentElement = document.getElementById('parentElementId');
let newElement = document.createElement('div');
parentElement.appendChild(newElement);

// Example: Removing an element
let elementToRemove = document.getElementById('elementToRemoveId');
elementToRemove.parentNode.removeChild(elementToRemove);

Working with Classes

You can add, remove, or toggle classes on elements using the classList property.

Try yourself 
        
            
// Example: Adding a class
let myElement = document.getElementById('myElementId');
myElement.classList.add('myClass');

// Example: Removing a class
myElement.classList.remove('myClass');

// Example: Toggling a class
myElement.classList.toggle('active');

Traversing the DOM

Traversing means moving up, down, and sideways in the DOM tree. You can navigate using properties like parentNode and children.

Try yourself 
        
            
// Example: Navigating up the DOM tree
let myElement = document.getElementById('myElementId');
let parentElement = myElement.parentNode;

// Example: Navigating down the DOM tree
let children = parentElement.children;

// Example: Navigating sideways in the DOM tree
let firstSibling = myElement.nextElementSibling;
let previousSibling = myElement.previousElementSibling;

Conclusion

The DOM is a powerful tool for manipulating web pages. With JavaScript, you can dynamically change content, respond to user actions, and create interactive web applications.