Basic JavaScript

Home / Topic / Basic JavaScript / DOM Manipulation

DOM Manipulation

DOM (Document Object Model) manipulation is one of the key skills you need to master as a frontend developer. The DOM is a structured representation of the webpage, allowing JavaScript to access and modify its content and structure in real-time. In this chapter, we will learn how to select, modify, and respond to events in HTML elements using JavaScript.

What is the DOM?

The DOM is a programming interface that represents the structure of an HTML or XML document as a tree of nodes. Each HTML element becomes a node in this tree, and JavaScript can access these nodes to read or change their content, attributes, and style.

Selecting DOM Elements

To manipulate elements on a webpage, we first need to select them. JavaScript provides several methods to do this.

`getElementById`

This method selects an element in the DOM using its id attribute.

javascript

"Here we use the getElementById method to select an element with the identifier header. We then print the text content of that element using textContent."

`querySelector` and `querySelectorAll`

The querySelector method selects the first element that matches a CSS selector, while querySelectorAll selects all elements that match the selector.

javascript

"In this example, we use querySelector to select the first paragraph and querySelectorAll to select all paragraphs on the page. We then print the text of the first paragraph and the total number of paragraphs."

`getElementsByClassName` and `getElementsByTagName`

These methods allow you to select elements based on their class or HTML tag.

javascript

"Here we use getElementsByClassName to select all elements with the class btn and getElementsByTagName to select all div elements. We then print the number of buttons and divs on the page."

Modifying Content and Attributes

Once you have selected an element, you can modify its content, attributes, and styles using JavaScript.

Modifying Text

You can change the text content of an element using textContent or innerHTML.

javascript

"In this example, we select an element with the identifier title and change its text content to New Title using textContent."

Modifying Attributes

You can modify an element's attributes using setAttribute or by directly accessing the element's properties.

javascript

"Here we select a link using querySelector and change its href attribute to point to example.com. We also change the target attribute to open the link in a new tab."

Styles and Classes

JavaScript also allows you to change the CSS styles and classes of elements.

Modifying Inline Styles

You can modify styles directly using the element's style property.

javascript

"In this example, we select an element with the class box and change its background color to blue and its width to two hundred pixels using the style property."

Adding and Removing Classes

To modify an element's CSS classes, you can use the methods classList.add, classList.remove, or classList.toggle.

javascript

"Here we select a button with the class btn. We add the class active using classList.add, remove the class inactive with classList.remove, and toggle the class highlight with classList.toggle."

JavaScript Events

Events allow JavaScript to respond to user interactions like clicking a button, moving the mouse, or submitting a form. You can use the addEventListener method to listen for events and execute a function when a specific event occurs.

Click Event

javascript

"Here we add a listener to the button with the identifier myButton. When the button is clicked, the message Button clicked is printed to the console."

Other Common Events

Some common events in JavaScript are:

mouseover: when the mouse moves over an element.
keydown: when a key is pressed.
submit: when a form is submitted.

javascript

"In this example, we add a listener to an input field to detect when a key is pressed. We print the name of the pressed key to the console."

Conclusion

In this chapter, you have learned how to manipulate the DOM using JavaScript to select, modify, and react to events in HTML elements. The ability to dynamically interact with the webpage is what makes JavaScript so powerful.

Back to previous chapter

Mark as read and continue

Ask me anything