1、使用 addEventListener() 方法與 options

最常用的DOM方法之一是 addEventListener() ，它允許我們將事件監聽器附加到元素上。除了事件類型和回調函數之外， addEventListener() 還接受一個 options 對象，允許我們定義其他屬性。這些屬性包括 capture ， once 和 passive 。讓我們進一步探討它們。

capture

capture 屬性是一個布爾值，用于確定事件處理程序在事件傳播階段中的執行順序。當 capture 設置為 true 時，在到達目標元素之前，事件會在捕獲階段被捕獲。如果設置為 false 或者省略，則事件會在冒泡階段處理，即在事件到達目標元素之后。

once

once 屬性是另一個布爾值。當設置為 true 時，表示事件監聽器只會被觸發一次，然后自動移除。這樣就不需要使用 removeEventListener() 手動移除事件監聽器了。

passive

passive 屬性是一個布爾值，當設置為 true 時，表示事件監聽器將永遠不會調用 preventDefault() 方法，即使它包含在函數體中。這對于改善滾動和觸摸事件處理程序的性能非常有用。

讓我們來看一個使用 options 對象和 addEventListener() 的例子：

const button = document.getElementById('myButton');

button.addEventListener('click', handleClick, { once: true });
function handleClick(event) {
  console.log('Button clicked!');
}

在上面的例子中， handleClick 函數只會在按鈕被點擊時被調用一次，這要歸功于將 once 屬性設置為 true 。這樣就不需要手動刪除事件監聽器了。

2、使用 scrollTo() 方法實現平滑滾動

scrollTo() 方法于 window 對象，并指示瀏覽器滾動到頁面上的指定位置。默認情況下， scrollTo() 執行突然滾動，類似于使用帶有指定哈希URL的本地鏈接。然而，通過結合 ScrollToOptions 對象，我們可以實現平滑的動畫滾動效果。

看一個例子：

window.scrollTo({
  top: 1000,
  behavior: 'smooth'
});

在這個例子中，頁面將平滑滾動到垂直位置 1000 像素。設置 behavior 屬性為 'smooth' 確保滾動效果是動畫的。如果 behavior 屬性設置為 'auto' ，滾動將是突然的。

3、與 classList 一起進行類操作

在JavaScript中，當與元素一起工作時，類操作是一項常見任務。classList 屬性提供了一組方法，簡化了在元素上添加、刪除和切換類的操作。

我們來探索一下 classList 屬性上可用的一些方法：

• add(className) ：將一個類添加到元素的類列表中。
• remove(className) ：從元素的類列表中移除一個類。
• toggle(className) ：切換元素的類列表中的類的存在。
• contains(className)：檢查元素是否具有特定的類。

這是一個使用這些方法的示例：

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

element.classList.add('active');
element.classList.remove('inactive');
element.classList.toggle('highlight');

console.log(element.classList.contains('active')); // true

在這個例子中，我們給 element 添加了類 'active' ，移除了類 'inactive' ，并切換了類 'highlight' 。然后， contains() 方法會檢查元素是否具有類 'active' 。

4、matches() 元素匹配的方法

matches() 方法是一個強大的元素匹配工具。它允許我們檢查一個元素是否與特定的CSS選擇器匹配。

這是一個使用 matches() 方法的示例：

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

if (element.matches('.container .item')) {
  console.log('The element matches the selector');
} else {
  console.log('The element does not match the selector');
}

在這個例子中，我們檢查 element 是否與選擇器 .container .item 匹配。如果匹配，將記錄第一條消息；否則，將記錄第二條消息。

當你想根據元素是否匹配特定選擇器執行某些操作時， matches() 方法非常有用。它消除了手動遍歷DOM或使用復雜的CSS選擇器匹配邏輯的需要。

5. 使用 dataset 訪問和修改數據屬性

數據屬性提供了一種在HTML元素上存儲自定義數據的方式。屬性允許我們以編程的方式訪問和操作元素上的數據屬性。

考慮一個例子

<div id="myElement" data-info="important"></div>

在這個例子中， <div> 元素具有一個名為 data-info 的數據屬性，其值為 'important' 。我們可以使用 dataset 屬性訪問和修改這個數據屬性。

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

console.log(element.dataset.info); // 'important'
element.dataset.info = 'updated';
console.log(element.dataset.info); // 'updated'

在這個例子中，我們使用 dataset 屬性訪問 data-info 屬性的值，并返回值 'important' 。我們還可以通過給 element.dataset.info 賦新值來修改該值。

6、平滑動畫的方法

在網頁上為元素添加動畫效果是一個常見的需求，但有時候也是一項具有挑戰性的任務。element.animate() API通過提供一種簡單直接的方式來創建流暢且響應靈敏的動畫，簡化了這個過程。它允許我們對各種CSS屬性進行動畫處理，例如透明度、寬度、高度和變換，并且可以自定義時間和緩動函數。讓我們來看一個例子：

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

element.animate(
  [
    { opacity: 0, transform: 'scale(0.5)' },
    { opacity: 1, transform: 'scale(1)' }
  ],
  {
    duration: 1000,
    easing: 'ease-in-out',
    fill: 'both'
  }
)

在上面的例子中，我們將元素的不透明度和縮放從0.5動畫到1，持續時間為1000毫秒。屬性 easing 定義了動畫的時間函數，而 fill: 'both' 確保元素在動畫完成后保持其動畫狀態。

animate() 方法的第二個參數有很多選項，但它們的瀏覽器兼容性不一致，需要額外注意。

7、全屏模式的方法

全屏模式允許網絡應用程序利用整個屏幕，提供沉浸式體驗。DOM提供了 requestFullscreen() 方法，在元素上請求全屏模式。

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

element.addEventListener('click', requestFullscreen);

const enterFullscreen = (elem, options) => {
  return elem[
    [
      'requestFullscreen',
      'mozRequestFullScreen',
      'msRequestFullscreen',
      'webkitRequestFullscreen',
    ].find((prop) => typeof elem[prop] === 'function')
  ]?.(options);
};

enterFullscreen(element);

在這個例子中，當點擊 element 時，會調用 requestFullscreen() 函數，該函數嘗試請求全屏模式。代碼會檢查不同供應商特定方法的兼容性，以確保跨瀏覽器支持。

8、使用 insertAdjacentElement() 和 insertAdjacentText() 進行靈活的內容插入

雖然許多開發人員熟悉 insertAdjacentHTML() 方法，該方法允許我們將HTML或文本內容插入到相對于其他元素的特定位置，但還有兩種相關的方法可以提供額外的靈活性：insertAdjacentElement() 和 insertAdjacentText() 。

insertAdjacentElement() 方法允許我們將一個元素插入到指定位置的DOM中，同時將其從原始位置移除。這提供了一種方便的方式，在DOM內部將一個元素從一個地方轉移到另一個地方。讓我們看一個例子：

const targetElement = document.getElementById('target');
const newElement = document.createElement('div');
newElement.textContent = 'New Element';

targetElement.insertAdjacentElement('beforebegin', newElement);

在這個例子中， insertAdjacentElement() 方法在 targetElement 之前插入 newElement 。同時， newElement 也從DOM的原始位置移除。

const targetElement = document.getElementById('target');
const text = 'Hello, <strong>World!</strong>';

targetElement.insertAdjacentText('beforeend', text);

在這種情況下， insertAdjacentText() 方法將 text 作為文本節點插入到 targetElement 中。任何特殊字符，如HTML標簽，都會以HTML實體的形式插入，保留其文本表示。

所有三種方法 - insertAdjacentHTML() ， insertAdjacentElement() 和 insertAdjacentText() - 都接受相同的第一個參數值，用于確定插入內容相對于目標元素的位置。選項有 'beforebegin' ， 'afterbegin' ， 'beforeend' 和 'afterend' 。

總結

通過理解和利用這些特性，我們可以增強您的網絡應用的功能和互動性。隨著繼續探索DOM的廣泛能力，你將發現更多隱藏的寶藏。