Prarthana

Posted on Mar 7

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)