JavaScript DOM Flashcards For Frontend Developers

Developers can handle form events using JavaScript, such as submit, reset, and input. Here is an example code for handling a submit event:

/* Form events */
let form = document.querySelector("#my-form");
form.addEventListener("submit", function(event) {
  console.log("The form was submitted.");
  event.preventDefault();
});

Developers can use JavaScript to create, read, and modify cookies, which are small text files stored on the user's computer. Here is an example code for creating a cookie:

/* Cookies */
document.cookie = "username=John Doe; expires=Thu, 18 Mar 2023 12:00:00 UTC; path=/";

Developers can traverse the DOM tree to access parent, child, and sibling elements using JavaScript. Here is an example code for accessing a parent element:

/* DOM traversal */
let element = document.querySelector("#my-element");
let parent = element.parentNode;
console.log(parent); 

// output: <div id="parent-element"></div>

Developers can use JavaScript to store data locally on the user's computer using the local storage API. Here is an example code for setting a value in local storage:

/* Local storage */
localStorage.setItem("username", "John Doe");

When an event occurs on an element, it can propagate (or bubble up) to its parent elements. Developers can use event propagation to handle events on multiple elements at once. Here is an example code for using event propagation:

/* Event propagation */
let parent = document.querySelector("#parent-element");
parent.addEventListener("click", function(event) {
  console.log(event.target);
});

// output: <div id="my-element"></div>

Developers can handle scroll events using JavaScript to detect when the user scrolls the web page. Here is an example code for handling a scroll event:

/* Scroll events */
window.addEventListener("scroll", function(event) {
  console.log("The web page was scrolled.");
});

Developers can use JavaScript to store data temporarily on the user's computer using the session storage API. Here is an example code for setting a value in session storage:

/* Session storage */
sessionStorage.setItem("username", "John Doe");

Events are actions that occur on a web page, such as clicks, scrolls, and key presses. Developers can add event listeners to elements to handle these events using JavaScript. Here is an example code for handling a click event:

/* Event handling */
let element = document.querySelector("#my-element");
element.addEventListener("click", function() {
  console.log("The element was clicked!");
});

HTML elements can have attributes such as id, class, src, and href. Developers can access and modify these attributes using JavaScript. Here is an example code for accessing an element's class attribute:

/* Element attributes */
let element = document.querySelector("#my-element");
let classes = element.classList;
console.log(classes); // output: DOMTokenList ["my-class"]

Developers can use JavaScript to retrieve the user's location using the geolocation API. Here is an example code for retrieving the user's latitude and longitude:

/* Geolocation */
navigator.geolocation.getCurrentPosition(position => {
  console.log(position.coords.latitude, position.coords.longitude);
});

Developers can handle keyboard events using JavaScript, such as keydown, keyup, and keypress. Here is an example code for handling a keydown event:

/* Keyboard events */
document.addEventListener("keydown", function(event) {
  if (event.key === "Enter") {
    console.log("The enter key was pressed.");
  }
});

Once an element has been selected, developers can modify its properties, such as its text content, HTML content, or CSS styles. Here is an example code for modifying an element's text content:

/* DOM modification */
let element = document.querySelector("#my-element");
element.textContent = "Hello, world!";

When an event occurs on a web page, an event object is created that contains information about the event. Developers can access this object using JavaScript. Here is an example code for accessing the event object in a click event listener:

/* Event object */
let element = document.querySelector("#my-element");
element.addEventListener("click", function(event) {
  console.log(event.target); 
});
// output: <div id="my-element"></div>

Developers can handle mouse events using JavaScript, such as click, mouseover, and mouseout. Here is an example code for handling a mouseover event:

/* Mouse events */
let element = document.querySelector("#my-element");
element.addEventListener("mouseover", function(event) {
  console.log("The mouse is over the element.");
});

Some events have a default behavior, such as clicking on a link or submitting a form. Developers can prevent this default behavior using JavaScript. Here is an example code for preventing the default behavior of a click event:

/* Prevent default */
let link = document.querySelector("#my-link");
link.addEventListener("click", function(event) {
  event.preventDefault();
});

The Document Object Model (DOM) allows developers to select and manipulate HTML elements using JavaScript. The most common methods for selecting elements are getElementById, getElementsByClassName, and querySelector. Here is an example code for selecting an element using querySelector:

/* DOM selection */

let element = document.querySelector("#my-element");