Prarthana

Posted on Mar 7, 2025

JavaScript DOM manipulation and EventHandling

It's going to be pretty lengthy vlog you can directly hover and read one particular command or enjoy extensive reading ❤️💖

Essential JavaScript DOM manipulation commands:

document.getElementById(): Selects an element by its ID.

   const element = document.getElementById('myElement');

document.querySelector(): Selects the first element that matches a CSS selector.

   const element = document.querySelector('.myClass');

document.querySelectorAll(): Selects all elements that match a CSS selector.

   const elements = document.querySelectorAll('.myClass');

document.createElement(): Creates a new HTML element.

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

parentElement.appendChild(): Appends a child element to a parent element.

   parentElement.appendChild(newElement);

parentElement.insertBefore(): Inserts a new element before an existing element.

   parentElement.insertBefore(newElement, existingElement);

element.innerHTML: Gets or sets the HTML content of an element.

   element.innerHTML = '<p>New Content</p>';

element.textContent: Gets or sets the text content of an element.

   element.textContent = 'New Text';

element.setAttribute(): Sets an attribute on an element.

   element.setAttribute('class', 'newClass');

element.removeAttribute(): Removes an attribute from an element.
```
element.removeAttribute('class');
```
element.style.property: Sets the inline style of an element.
```
element.style.color = 'red';
```
element.classList.add(): Adds a class to an element.
```
element.classList.add('newClass');
```
element.classList.remove(): Removes a class from an element.
```
element.classList.remove('oldClass');
```
element.classList.toggle(): Toggles a class on an element.
```
element.classList.toggle('activeClass');
```

element.addEventListener(): Adds an event listener to an element.

element.addEventListener('click', function() {
  alert('Element clicked!');
});

element.removeEventListener(): Removes an event listener from an element.
```
element.removeEventListener('click', clickHandler);
```
element.appendChild(): Appends a child node to an element.
```
element.appendChild(childNode);
```
element.removeChild(): Removes a child node from an element.
```
element.removeChild(childNode);
```
element.replaceChild(): Replaces a child node with another node.
```
element.replaceChild(newChild, oldChild);
```

element.cloneNode(): Clones an element.

const clonedElement = element.cloneNode(true);

element.contains(): Checks if an element contains a specific node.
```
const containsNode = element.contains(childNode);
```
element.parentElement: Returns the parent element of an element.
```
const parent = element.parentElement;
```
element.children: Returns a collection of child elements of an element.
```
const children = element.children;
```
element.firstElementChild: Returns the first child element of an element.
```
const firstChild = element.firstElementChild;
```
element.lastElementChild: Returns the last child element of an element.
```
const lastChild = element.lastElementChild;
```

These commands cover a wide range of DOM manipulation tasks and will be very useful in your web development projects. Happy coding! 🚀💻

EventHandling

Here are some key event handling commands in JavaScript:

element.addEventListener(): Adds an event listener to an element.

   element.addEventListener('click', function() {
     alert('Element clicked!');
   });

element.removeEventListener(): Removes an event listener from an element.

   element.removeEventListener('click', clickHandler);

element.onclick: Sets an event handler for the click event.

   element.onclick = function() {
     alert('Element clicked!');
   };

element.onsubmit: Sets an event handler for the submit event.

   form.onsubmit = function(event) {
     event.preventDefault();
     alert('Form submitted!');
   };

element.onmouseover: Sets an event handler for the mouseover event.

   element.onmouseover = function() {
     element.style.color = 'blue';
   };

element.onmouseout: Sets an event handler for the mouseout event.

   element.onmouseout = function() {
     element.style.color = 'black';
   };

element.onkeydown: Sets an event handler for the keydown event.

   element.onkeydown = function(event) {
     console.log('Key pressed:', event.key);
   };

element.onkeyup: Sets an event handler for the keyup event.

   element.onkeyup = function(event) {
     console.log('Key released:', event.key);
   };

element.onchange: Sets an event handler for the change event (useful for input elements).

   element.onchange = function() {
     console.log('Value changed:', element.value);
   };

element.oninput: Sets an event handler for the input event (useful for real-time input tracking).
```
element.oninput = function() {
  console.log('Input value:', element.value);
};
```

element.onfocus: Sets an event handler for the focus event.

element.onfocus = function() {
  element.style.backgroundColor = 'lightyellow';
};

element.onblur: Sets an event handler for the blur event.

element.onblur = function() {
  element.style.backgroundColor = 'white';
};

element.ondragstart: Sets an event handler for the dragstart event.

element.ondragstart = function(event) {
  console.log('Drag started:', event);
};

element.ondrop: Sets an event handler for the drop event.

element.ondrop = function(event) {
  event.preventDefault();
  console.log('Element dropped:', event);
};

element.ondragover: Sets an event handler for the dragover event.

element.ondragover = function(event) {
  event.preventDefault();
};

element.ondblclick: Sets an event handler for the double-click event.

element.ondblclick = function() {
  alert('Element double-clicked!');
};

element.oncontextmenu: Sets an event handler for the context menu event (right-click).

element.oncontextmenu = function(event) {
  event.preventDefault();
  alert('Right-click menu opened!');
};

element.onresize: Sets an event handler for the resize event (useful for the window object).

window.onresize = function() {
  console.log('Window resized to', window.innerWidth, 'x', window.innerHeight);
};

element.onselect: Sets an event handler for the select event (useful for text input elements).

element.onselect = function() {
  console.log('Text selected:', element.value.substring(element.selectionStart, element.selectionEnd));
};

element.ontouchstart: Sets an event handler for the touchstart event (useful for touch devices).

element.ontouchstart = function(event) {
  console.log('Touch started:', event.touches);
};

element.ontouchend: Sets an event handler for the touchend event (useful for touch devices).

element.ontouchend = function(event) {
  console.log('Touch ended:', event.changedTouches);
};

element.onscroll: Sets an event handler for the scroll event.

window.onscroll = function() {
  console.log('Page scrolled:', window.scrollY);
};

element.onwheel: Sets an event handler for the wheel event (mouse wheel scroll).

element.onwheel = function(event) {
  console.log('Mouse wheel scrolled:', event.deltaY);
};

element.onkeypress: Sets an event handler for the keypress event.

element.onkeypress = function(event) {
  console.log('Key pressed:', event.key);
};

element.oncopy: Sets an event handler for the copy event.

element.oncopy = function(event) {
  console.log('Content copied:', event);
};

These commands should help you handle various events in your JavaScript projects, making your web applications more interactive and responsive to user actions. Happy coding! 🚀💻

Reached till here, then you are the champion !!

DEV Community

JavaScript DOM manipulation and EventHandling

EventHandling

Top comments (0)