JavaScript中这8个 DOM API 你使用过吗？

文档对象模型（DOM）提供了许多强大的功能，在现代浏览器中无需外部依赖即可使用。在本文中，我们将探讨 8 个可能被忽视的 DOM 功能

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’ 。

结语

以上是 JavaScript 中这 8 个 DOM API，不知道大家在日常前端开发中是否使用过，而且这也是最容易忽视的几个 API。希望通过上面理解和利用这些特性，切实可以增强我们的网络应用的功能和互动性。随着继续探索 DOM 的广泛能力，你将发现更多隐藏的能力，为我们的开发提供更多方便。