// 1.

getElementById():
// const element = document.getElementById("myElement");

// 2. querySelector():
// const element = document.querySelector(".myClass");

// 3. querySelectorAll():
// const elements = document.querySelectorAll("p");

// 4. getElementsByTagName():
// const elements = document.getElementsByTagName("div");

// 5. getElementsByClassName():
// const elements = document.getElementsByClassName("myClass");

// 6. createElement():
// const newElement = document.createElement("div");

// 7. createTextNode():
// const textNode = document.createTextNode("Hello, DOM!");

// 8. createDocumentFragment():
// const fragment = document.createDocumentFragment();

// 9. appendChild():
// parentElement.appendChild(childElement);

// 10. removeChild():
// parentElement.removeChild(childElement);

// 11. replaceChild():
// parentElement.replaceChild(newChild, oldChild);

// 12. cloneNode():
// const clone = originalElement.cloneNode(true);

// 13. parentNode:
// const parent = element.parentNode;

// 14.nextSibling:
// const next = element.nextSibling;

// 15. previousSibling:
// const prev = element.previousSibling;
// 16. firstChild:
// const first = parentElement.firstChild;

// 17. lastChild:
// const last = parentElement.lastChild;

// 18. hasChildNodes():
// const hasChildren = parentElement.hasChildNodes();

// 19. setAttribute():
// element.setAttribute("data-id", 123);

// 20. getAttribute():
// const value = element.getAttribute("data-id");

// 21. removeAttribute():
// element.removeAttribute("data-id");

// 22. classList.add():
// element.classList.add("active");

// 21. classList.remove():
// element.classList.remove("inactive");

// 23. classList.toggle():
// element.classList.toggle("selected");

// 24. classList.contains():
// const hasClass = element.classList.contains("highlight");

// 25. classList.replace():
// element.classList.replace("oldClass", "newClass");

// 26. classList.item():
// const thirdClass = element.classList.item(2);

// 27. classList.entries():
// for (const entry of element.classList.entries()) {
// console.log(entry);
// }

// 28. classList.forEach():
// element.classList.forEach(className => {
// console.log(className);
// });
// 29. classList.keys():
// const classKeys = element.classList.keys();

// 30. classList.values():
// const classValues = element.classList.values();

// 31. classList.length:
// const numClasses = element.classList.length;

// 32. style.property:
// element.style.backgroundColor = "red";

// 33. textContent:
// element.textContent = "Updated text content";

// 34. innerText:
// element.innerText = "Inner text";

// 35. innerHTML:
// element.innerHTML = "<strong>Formatted</strong> text";

// 36. outerHTML:
// const outer = element.outerHTML;

// 37. value (for form elements):

// const inputValue = inputElement.value;

// 38. selectedIndex (for select elements):

// const selectedIndex = selectElement.selectedIndex;

// 39. options (for select elements):

// const options = selectElement.options;

// 40. disabled (for form elements):

// inputElement.disabled = true;

// 41. checked (for input elements):

// checkboxElement.checked = true;

// 42. required (for input elements):

// emailInput.required = true;

// 43. readOnly (for input elements):

// textInput.readOnly = true;

// 44. hidden (for elements):

// element.hidden = true;

// 45. offsetWidth:
// const width = element.offsetWidth;

// 46. offsetHeight:
// const height = element.offsetHeight;

// 47. offsetLeft:
// const left = element.offsetLeft;

// 48. offsetTop:
// const top = element.offsetTop;

// 49. clientWidth:
// const clientWidth = element.clientWidth;

// 50. clientHeight:
// const clientHeight = element.clientHeight;

// 51. scrollWidth:
// const scrollWidth = element.scrollWidth;

// 52. scrollHeight:
// const scrollHeight = element.scrollHeight;

// 53. scrollLeft:
// const scrollLeft = element.scrollLeft;

// 54. scrollTop:
// const scrollTop = element.scrollTop;

// 55. addEventListener():
// element.addEventListener("click", event => {
// console.log("Clicked!");
// });

// 56. removeEventListener():
// function clickHandler(event) {
// console.log("Clicked!");
// }
// element.addEventListener("click", clickHandler);
// element.removeEventListener("click", clickHandler);
// 57. dispatchEvent():
// const event = new Event("customEvent");
// element.dispatchEvent(event);

// 58. event.preventDefault():
// element.addEventListener("click", event => {
// event.preventDefault();
// });

// 59. event.stopPropagation():
// element.addEventListener("click", event => {
// event.stopPropagation();
// });

// 60. event.target:
// element.addEventListener("click", event => {
// console.log(event.target);
// });

// 61. event.currentTarget:
// element.addEventListener("click", event => {
// console.log(event.currentTarget);
// });

// 62. event.type:
// element.addEventListener("click", event => {
// console.log(event.type);
// });

// 63. window.location:
// console.log(window.location.href);

// 64. window.document:
// const docTitle = window.document.title;

// 65. window.alert():
// window.alert("Hello, world!");

// 66. window.confirm():
// const result = window.confirm("Are you sure?");

// 67. window.prompt():
// const input = window.prompt("Enter your name:");

// 68. window.setTimeout():
// const timeoutId = window.setTimeout(() => {
// console.log("Timeout done!");
// }, 1000);

// 69 window.clearTimeout():
// window.clearTimeout(timeoutId);

// 70. window.setInterval():
// const intervalId = window.setInterval(() => {
// console.log("Interval tick!");
// }, 1000);

// 71. window.clearInterval():
// window.clearInterval(intervalId);

// 72. window.localStorage:
// localStorage.setItem("username", "john");
// const username = localStorage.getItem("username");
// localStorage.removeItem("username");

// 73. window.sessionStorage:
// sessionStorage.setItem("token", "abc123");
// const token = sessionStorage.getItem("token");
// sessionStorage.removeItem("token");

// 74. XMLHttpRequest:
// const xhr = new XMLHttpRequest();
// xhr.open("GET", "https://api.example.com/data", true);
// xhr.onreadystatechange = function () {
// if (xhr.readyState === 4 && xhr.status === 200) {
// const response = JSON.parse(xhr.responseText);
// console.log(response);
// }
// };
// xhr.send();

// 75. fetch():
// fetch("https://api.example.com/data")
// .then(response => response.json())
// .then(data => console.log(data))
// .catch(error => console.error(error));

// 76. FormData:
// const formData = new FormData();
// formData.append("username", "john");
// formData.append("email", "[email protected]");

// 77. element.scrollIntoView():
// element.scrollIntoView({ behavior: "smooth" });
// 78. element.focus():
// inputElement.focus();

// 79. element.blur():
// inputElement.blur();

// 80. element.dataset:
// const userId = element.dataset.userId;

// 81. element.contentEditable:
// element.contentEditable = true;

// 82. element.isContentEditable:
// const isEditable = element.isContentEditable;

// 83. element.getBoundingClientRect():
// const rect = element.getBoundingClientRect();
// console.log(rect.top, rect.left, rect.width, rect.height);

// 84. element.getClientRects():
// const rects = element.getClientRects();
// for (const rect of rects) {
// console.log(rect.top, rect.left, rect.width, rect.height);
// }

// 85. element.addEventListener() (additional example):

// element.addEventListener("mousemove", event => {
// console.log(`Mouse position: ${event.clientX}, ${event.clientY}`);
// });

// 86. element.animate():
// element.animate(
// [{ transform: "translateX(0)" }, { transform: "translateX(100px)" }],
// { duration: 1000, iterations: Infinity }
// );

// 87. element.requestFullscreen():
// element.requestFullscreen();

// 88. element.exitFullscreen():
// document.exitFullscreen();

// 89. element.requestPointerLock():
// element.requestPointerLock();

// 90. element.exitPointerLock():
// document.exitPointerLock();
// 91. element.requestAnimationFrame():
// function animate(timestamp) {
// // Update animation
// requestAnimationFrame(animate);
// }
// requestAnimationFrame(animate);

// 92. element.offsetWidth:
// const offsetWidth = element.offsetWidth;

// 93. element.offsetHeight:
// const offsetHeight = element.offsetHeight;

// 94. element.getComputedStyle():
// const styles = window.getComputedStyle(element);
// console.log(styles.color, styles.fontSize);

// 95. window.innerWidth:
// const windowWidth = window.innerWidth;

// 96. window.innerHeight:
// const windowHeight = window.innerHeight;

// 97. element.cancelAnimationFrame():
// const animationId = requestAnimationFrame(animate);
// cancelAnimationFrame(animationId);