Introduction to HTML DOM

Introduction to the DOM

What is the DOM?

The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the structure of a document as a tree of objects, with each object representing a part of the document (such as an element, an attribute, or a piece of text).

How does it represent an HTML or XML document as a tree of objects?

Each element in an HTML or XML document is represented as a node in the DOM tree. The root node of the tree represents the document itself, and the child nodes of the root node represent the elements in the document. Each element node may have further child nodes representing its attributes, child elements, and text content.

Why is it useful to be able to manipulate the DOM programmatically?

The DOM allows you to manipulate the content and structure of a document programmatically, using languages such as JavaScript. This allows you to create dynamic and interactive web pages, as you can update the page's content and layout in response to user input or other events.

Accessing Elements

How to use getElementById to access an element by its unique ID
The getElementById method returns the element with the specified ID from the DOM. It returns a single element, or null if no element with the specified ID exists.
Example:
Copy code

const element = document.getElementById('my-element');

How to use getElementsByTagName to access a group of elements by their tag name

The getElementsByTagName method returns a list of elements with the specified tag name from the DOM. It returns a live HTMLCollection, which means that it updates automatically as elements are added or removed from the DOM.
Example:

const elements = document.getElementsByTagName('p');

How to use querySelector to access an element using a CSS selector

The querySelector method returns the first element that matches the specified CSS selector from the DOM. It returns a single element, or null if no element matches the selector.
Example:

const element = document.querySelector('#my-element .my-class');

Modifying Elements

How to use innerHTML to modify the content of an element
The innerHTML property represents the HTML content of an element. You can use it to get or set the HTML content of an element.
Example:

element.innerHTML = '<p>Hello, World!</p>';

How to use setAttribute to modify an attribute of an element

The setAttribute method sets the value of an attribute on an element. It takes two arguments: the name of the attribute and the value to set.
Example:

element.setAttribute('href', 'http://example.com');

How to use style to modify the style of an element

The style property represents the inline style of an element. You can use it to get or set the style of an element using JavaScript.
Example:

element.style.color = 'red'

Traversing the DOM Tree

How to use parentNode, nextSibling, and previousSibling to navigate between elements in the DOM tree

The parentNode property returns the parent node of an element.
The nextSibling property returns the next sibling node of an element (i.e., the next node at the same level in the DOM tree).
The previousSibling property returns the previous sibling node of an element (i.e., the previous node at the same level in the DOM tree).
Example:

const parent = element.parentNode;
const next = element.nextSibling;
const previous = element.previousSibling;

How to use childNodes to access the children of an element

The childNodes property returns a list of the child nodes of an element. It returns a live NodeList, which means that it updates automatically as nodes are added or removed from the element.
Example:

const children = element.childNodes;

Adding and Deleting Elements

How to use createElement to create a new element

The createElement method creates a new element with the specified tag name.
Example:

const newElement = document.createElement('div');

How to use appendChild to add an element as a child of another element

The appendChild method adds an element as the last child of another element.
Example:

element.appendChild(newElement);

How to use removeChild to delete an element from the DOM

The removeChild method removes an element from the DOM. It removes the element from its parent node, and also from the DOM tree.
Example:

element.removeChild(newElement);

Handling Events

What are events in the context of the DOM?
Events are actions or occurrences that happen in the DOM, such as a user clicking a button or a form being submitted. The DOM allows you to attach event listeners to elements, which allows you to execute code in response to events.

How to use addEventListener to attach an event listener to an element

The addEventListener method attaches an event listener to an element. It takes three arguments: the type of event to listen for, the function to be called when the event occurs, and an optional options object.
Example:

element.addEventListener('click', () => {
  console.log('element was clicked');
});

Examples of common events, such as clicks, hover, and form submissions
Some common events that you might want to listen for include:
click: triggered when an element is clicked
mouseover and mouseout: triggered when the mouse enters or leaves an element
submit: triggered when a form is submitted
focus and
blur: triggered when an element receives or loses focus

Working with Documents

How to use document.title to access and modify the title of a document

The title property of the document object represents the title of the document. You can use it to get or set the title of the document.
Example:

document.title = 'My Page';

How to use document.body to access and modify the body of a document

The body property of the document object represents the body of the document. You can use it to access and modify the body of the document.
Example:

document.body.style.backgroundColor = 'red';

Other useful properties and methods for working with documents

Some other useful properties and methods for working with documents include:

document.head: returns the head element of the document

document.forms: returns a list of the form elements in the document

document.scripts: returns a list of the script elements in the document

document.getElementsByClassName: returns a list of elements with the specified class name

document.getElementsByName: returns a list of elements with the specified name

document.querySelectorAll: returns a list of elements that match the specified CSS selector