Science Knowings: JavaScript Course For Social Media

Manipulating DOM Elements

Review: DOM Selection Methods

We've explored various DOM selection methods in the previous session, allowing us to interact with HTML elements.

Introducing: Manipulating DOM Elements

Now, let's delve into the exciting world of manipulating DOM elements!

getElementById Method

The getElementById method returns the element with the specified id.

document.getElementById('element-id');

getElementsByClassName Method

The getElementsByClassName method returns an array of elements with the specified `class name`.

document.getElementsByClassName('class-name');

getElementsByTagName Method

The getElementsByTagName method returns an array of elements with the specified `tag name`.

document.getElementsByTagName('tag-name');

querySelector Method

The querySelector method returns the first element that matches the specified CSS selector.

document.querySelector('css-selector');

querySelectorAll Method

The querySelectorAll method returns an array of all elements that match the specified CSS selector.

document.querySelectorAll('css-selector');

Creating New Elements

Now, let's dive into creating brand new HTML elements dynamically using JavaScript!

createElement Method

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

document.createElement('tag-name');

createTextNode Method

The createTextNode method creates a new text node with the specified text content.

document.createTextNode('text-content');

appendChild Method

The appendChild method appends a node to the end of the specified parent node.

parent-node.appendChild(new-node);

insertBefore Method

The insertBefore method inserts a node before the specified reference node.

parent-node.insertBefore(new-node, reference-node);

replaceChild Method

The replaceChild method replaces a node with another node.

parent-node.replaceChild(new-node, old-node);

removeChild Method

The removeChild method removes a node from its parent.

parent-node.removeChild(node-to-remove);

Modifying Element Attributes

Next up, let's explore how to modify attributes of existing HTML elements!

setAttribute Method

The setAttribute method sets the specified attribute value.

element.setAttribute('attribute-name', 'attribute-value');

getAttribute Method

The getAttribute method returns the value of the specified attribute.

element.getAttribute('attribute-name');

removeAttribute Method

The removeAttribute method removes the specified attribute.

element.removeAttribute('attribute-name');

Adding and Removing Event Listeners

Last but not least, let's learn how to handle user interactions through event listeners!

addEventListener Method

The addEventListener method attaches an event listener to the specified element.

element.addEventListener('event-type', listener-function);

removeEventListener Method

The removeEventListener method removes an event listener from the specified element.

element.removeEventListener('event-type', listener-function);

Next Topic: Events and Event Handlers

In the next session, we'll dive deeper into events and event handlers, empowering you to make your web pages interactive. Follow us to stay updated!