Everything You Need to Know About JavaScript DOM (Document Object Model)

Introduction

JavaScript is an essential programming language that allows developers to create dynamic and interactive web pages. The DOM (Document Object Model) is a key feature of JavaScript, allowing developers to effectively manipulate and interact with web pages.

In this blog post, we will explore various aspects of DOM manipulation such as selecting and modifying elements in the document, creating and removing elements, manipulating element styles and handling events.

What is the DOM?

The Document Object Model (DOM) is a programming interface that allows us to select and modify elements, create and remove elements and manipulate element styles in the document.

DOM represents the structure of an HTML document as a tree-like structure. The document is the root of the tree and contains one child node that is <html> element. Within the <html> element, there are two children: the <head> and <body> elements. The <head> and <body> elements contain their respective children.

JavaScript DOM (Document Object Model)

Selecting Elements in the Document

The DOM provides the following methods to select elements.

  • getElementById() selects the element by its unique id.

Here’s the javascript code:

The output will be as shown below:

JavaScript DOM (Document Object Model)
  • getElementsByClassName() selects elements by their class name.

Here’s the javascript code:

The output will be as shown below:

JavaScript DOM (Document Object Model)
  • getElementsByTagName() selects elements by their tag name.

Here’s the javascript code:

The output will be as shown below:

JavaScript DOM (Document Object Model)
  • querySelector() selects the first element that matches the specified CSS selector.

Here’s the javascript code:

The output will be as shown below:

JavaScript DOM (Document Object Model)
  • querySelectorAll() selects all elements that match the specified CSS selector.

Here’s the javascript code:

Output will be as shown below:

JavaScript DOM (Document Object Model)

Modifying Attributes of Selected Elements

The DOM provides the following methods to modify attributes of selected elements.

  • getAttribute() returns the value of the specified attribute.

JavaScript code:

Output:

JavaScript DOM (Document Object Model)
  • hasAttribute() returns true or false.

JavaScript code:

Output:

JavaScript DOM (Document Object Model)
  • setAttribute() sets the value of the specified attribute.

JavaScript code:

Output:

JavaScript DOM (Document Object Model)
  • removeAttribute() removes the specified attribute.

JavaScript code:

Output:

JavaScript DOM (Document Object Model)

Modifying Classes of Selected Elements

The DOM provides the following methods to modify classes of selected elements.

  • classList.add()adds a class.

JavaScript code:

Output:

JavaScript DOM (Document Object Model)
  • classList.toggle() toggles a class on or off.

JavaScript code:

Output:

JavaScript DOM (Document Object Model)
  • classList.contains() checks if the class value exists.

JavaScript code:

Output:

JavaScript DOM (Document Object Model)
  • classList.replace() replace existing class value with new class value.

JavaScript code:

Output:

JavaScript DOM (Document Object Model)
  • classList.remove() remove a class value.

JavaScript code:

Output:

JavaScript DOM (Document Object Model)

Adding New Elements

Here’s the basic structure of the HTML document.

createElement()method creates a new element specified by the tag name.

appendChild() method adds the newly created element to the document.

innerHTML property sets the HTML content of the element.

Let’s create one more element in the document.

Now append this element inside the div before created.

textContent property is used to add the text to the element.

Putting it all together:

This will be the output:

JavaScript DOM (Document Object Model)

Removing Elements

Here’s the basic structure of the HTML document.

remove() method removes the element from the DOM completely.

removeChild() method removes a child element from its parent element.

Manipulating Element Styles

You can change the style of any element using style property.

Here’s the basic structure of the HTML document.

JavaScript code:

Output:

JavaScript DOM (Document Object Model)

JavaScript code:

Output:

JavaScript DOM (Document Object Model)

Similarly, you can change the other styles of the elements using the style property.

When modifying the style of elements using the DOM, always keep in mind to use the property names with camel case. For example, instead of using “font-size,” use “fontSize,” and instead of “background-color,” use “backgroundColor.”

Handling Events

Here’s the basic structure of the HTML document.

Get the button using querySelector() method (you can use any method of your choice).

The addEventListener() method is used to attach an event handler function to an HTML element.

The addEventListener() method takes in an event type and a function.

Here’s another example:

Conclusion

The Document Object Model (DOM) is a key feature of JavaScript, allowing developers to effectively manipulate and interact with web pages. DOM manipulation has various aspects such as selecting and modifying elements in the document, creating and removing elements, manipulating element styles and handling events.

You can select the elements using getElementById() , getElementsByClassName() , getElementsByTagName() , querySelector() and querySelectorAll() methods.

For modifying the attributes of selected elements, you can use getAttribute() , hasAttribute() , setAttribute() and removeAttribute() methods.

To modify the classes of selected elements, you can use classList.add() ,classList.toggle() , classList.contains() , classList.replace() and classList.remove() methods.

You can create new elements using createElement() method and append it to the document using appendChild() method.

To remove elements, you can use remove() method and removeChild() method.

To change the style of any element use style property.

You can handle events using addEventListener() method.

Keep coding!!

Click here to get a comprehensive javascript loop structure!

Check out toast.log, a browser extension that lets you see errors, warnings, and logs as they happen on your site — without having to open the browser’s console. Click here to get a 25% discount on toast.log.

Leave a Comment