不容忽视的 8 个 DOM API

站长

2023年07月30日 06:07 · 阅读数 14

微信搜索【大迁世界】, 我会第一时间和你分享前端行业趋势，学习途径等等。本文 GitHub github.com/qq449245884… 已收录，有一线大厂面试完整考点、资料以及我的系列文章。

快来免费体验ChatGpt plus版本的，我们出的钱体验地址:chat.waixingyun.cn 可以加入网站底部技术群，一起找bug，另外新版作图神器已上线 cube.waixingyun.cn/home

文档对象模型（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' 。

总结

通过理解和利用这些特性，我们可以增强您的网络应用的功能和互动性。随着继续探索DOM的广泛能力，你将发现更多隐藏的宝藏。

交流

有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub github.com/qq449245884… 已收录，有一线大厂面试完整考点、资料以及我的系列文章。