1、使用 addEventListener() 方法與 options

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

capture

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

once

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

passive

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

讓我們來(lái)看一個(gè)使用 options 對(duì)象和 addEventListener() 的例子：

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

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

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

2、使用 scrollTo() 方法實(shí)現(xiàn)平滑滾動(dòng)

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

看一個(gè)例子：

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

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

3、與 classList 一起進(jìn)行類(lèi)操作

在JavaScript中，當(dāng)與元素一起工作時(shí)，類(lèi)操作是一項(xiàng)常見(jiàn)任務(wù)。classList 屬性提供了一組方法，簡(jiǎn)化了在元素上添加、刪除和切換類(lèi)的操作。

我們來(lái)探索一下 classList 屬性上可用的一些方法：

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

這是一個(gè)使用這些方法的示例：

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

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

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

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

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

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

這是一個(gè)使用 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');
}

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

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

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

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

考慮一個(gè)例子

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

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

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

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

在這個(gè)例子中，我們使用 dataset 屬性訪問(wèn) data-info 屬性的值，并返回值 'important' 。我們還可以通過(guò)給 element.dataset.info 賦新值來(lái)修改該值。

6、平滑動(dòng)畫(huà)的方法

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

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

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

7、全屏模式的方法

全屏模式允許網(wǎng)絡(luò)應(yīng)用程序利用整個(gè)屏幕，提供沉浸式體驗(yàn)。DOM提供了 requestFullscreen() 方法，在元素上請(qǐng)求全屏模式。

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);

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

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

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

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

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

targetElement.insertAdjacentElement('beforebegin', newElement);

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

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

targetElement.insertAdjacentText('beforeend', text);

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

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

總結(jié)

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