????????? ES6替代jQuery的幾個新特性 ?????????

jQuery 是一個非常流行的 JavaScript 庫，它簡化了許多常見的 DOM 操作、事件處理、動畫等任務。然而，隨著時間的發展，JavaScript 已經發展出了許多新特性，這使得 jQuery 在某些情況下變得不再必要或淘汰。

一些主要的 ES6 特性，它們可以替代或簡化許多常見的 jQuery 用法：

document.querySelector 和 document.querySelectorAll 用于選擇 DOM 元素，類似于 jQuery 的 $()。
Node.textContent 和 Node.innerText 用于設置或獲取文本內容，類似于 jQuery 的 .text()。
Node.getAttribute() 和 Node.setAttribute() 用于獲取或設置屬性，類似于 jQuery 的 .attr()。
Node.classList 用于添加、刪除和切換類，類似于 jQuery 的 .addClass()、.removeClass() 和 .toggleClass()。
Node.appendChild() 和 Node.removeChild() 等方法用于操作 DOM，類似于 jQuery 的 .append() 和 .remove()。
Array.from 可以將類數組對象轉換為數組，類似于 jQuery 的 .toArray()。

一些簡單的 ES6 替代 jQuery 的例子

// 獲取元素
const $element = document.querySelector('.my-element');
 
// 設置文本內容
element.textContent = 'Hello, world!';
 
// 獲取屬性
const value = element.getAttribute('data-value');
 
// 切換類
element.classList.toggle('active');
 
// 添加事件監聽器
element.addEventListener('click', function() {
  alert('Clicked!');
});
 
// 創建元素
const newElement = document.createElement('div');
newElement.textContent = 'New element';
 
// 插入元素
document.body.appendChild(newElement);
 
// 遍歷數組
const arr = Array.from(document.querySelectorAll('.my-elements'));
arr.forEach(el => {
  // 處理每個元素
});