JavaScript DOM - Basics to give you wings

Table of Contents

• JavaScript DOM - Basics to give you wings

JavaScript DOM - Basics to give you wings

document.getElementById()

document.getElementsByClassName()

document.getElementsByTagName()

document.document.querySelector()

document.querySelectorAll()

Selecting ParentNodes

Selecting ChildNodes (not a good idea to use) instead use children

Note:- We don't use ChildNodes because it prints all the breaks and spaces we insert in our HTML document about which we don't care.

Selecting Children

The Document Object Model (DOM) is a programming interface for HTML and XML documents. It provides a tree-like structure for the content of a document, which can be manipulated using JavaScript.

In JavaScript, the DOM is represented as a hierarchy of objects, with each object representing an element in the document. For example, an h1 element would be represented as a Node object, with properties and methods for manipulating its content and attributes.

Here's a simple example of how to use the DOM in JavaScript:

In this example, we use the document.getElementById() method to get a reference to the h1 and button elements in the document. Then, we add a click event listener to the button using the addEventListener() method, which changes the text of the h1 element when the button is clicked.

Here are some other common tasks that can be performed using the DOM in JavaScript:

Getting an element:

Modifying the content of an element:

Modifying the attributes of an element:

Adding or removing classes:

Adding, removing, or modifying styles:

This is just a brief overview of what can be done with the DOM in JavaScript. There's much more to the DOM, and I encourage you to read the official documentation for more information.

Nodes and Elements: In the DOM, each element in a document is represented as a node. There are several different types of nodes, including Element nodes, Text nodes, Comment nodes, and Document nodes, among others. When working with the DOM in JavaScript, you'll often be dealing with Element nodes, which represent elements in the document such as div, p, h1, etc.

Traversing the DOM Tree: The DOM is structured as a tree, with elements being parent or child nodes to other elements. You can traverse the DOM tree to find elements and their relationships. For example, you can use the parentNode property to get the parent of a node, or the children property to get the children of a node.

Querying the DOM: There are several methods for querying the DOM in JavaScript, including getElementById(), getElementsByTagName(), and querySelector(), among others. These methods allow you to find elements in the document based on their id, tag name, class name, or other criteria.

Creating and Deleting Elements: In addition to manipulating existing elements in the DOM, you can also create new elements and delete existing ones. You can create a new element using the document.createElement() method, and add it to the document using the appendChild() or insertBefore() methods. You can delete an element using the removeChild() method.

Event Listeners: One of the key features of the DOM is the ability to attach event listeners to elements, which allow you to respond to events such as clicks, mouse movements, and form submissions. For example, you can use the addEventListener() method to attach a click event listener to a button, and perform some action when the button is clicked.

These are just some of the basics of the DOM in JavaScript. There is a lot more to learn, and I encourage you to explore the official documentation and experiment with your own code to gain a deeper understanding of the DOM.