1、使用 addEventListener() 方法與 options

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

capture

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

once

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

passive

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

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

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

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

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

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

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

看一個例子：

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

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

3、與 classList 一起進行類操作

在JavaScript中，當(dāng)與元素一起工作時，類操作是一項常見任務(wù)。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 匹配。如果匹配，將記錄第一條消息；否則，將記錄第二條消息。

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

5. 使用 dataset 訪問和修改數(shù)據(jù)屬性

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

考慮一個例子

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

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

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、平滑動畫的方法

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

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，持續(xù)時間為1000毫秒。屬性 easing 定義了動畫的時間函數(shù)，而 fill: 'both' 確保元素在動畫完成后保持其動畫狀態(tài)。

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

7、全屏模式的方法

全屏模式允許網(wǎng)絡(luò)應(yīng)用程序利用整個屏幕，提供沉浸式體驗。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);

在這個例子中，當(dāng)點擊 element 時，會調(diào)用 requestFullscreen() 函數(shù)，該函數(shù)嘗試請求全屏模式。代碼會檢查不同供應(yīng)商特定方法的兼容性，以確?？鐬g覽器支持。

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

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

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

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 作為文本節(jié)點插入到 targetElement 中。任何特殊字符，如HTML標(biāo)簽，都會以HTML實體的形式插入，保留其文本表示。

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

總結(jié)

通過理解和利用這些特性，我們可以增強您的網(wǎng)絡(luò)應(yīng)用的功能和互動性。隨著繼續(xù)探索DOM的廣泛能力，你將發(fā)現(xiàn)更多隱藏的寶藏。