热搜: fiddler git ip 代理
历史搜索

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

游客2024-09-20 12:33:01
目录文章目录
  1. 1. 使用 addEventListener() 方法与 options
  2. 2. 使用 scrollTo() 方法实现平滑滚动
  3. 3. 与 classList 一起进行类操作
  4. 4.matches() 元素匹配的方法
  5. 5. 使用 dataset 访问和修改数据属性
  6. 6. 平滑动画的方法
  7. 7. 全屏模式的方法
  8. 8. 使用 insertAdjacentElement() 和 insertAdjacentText() 进行灵活的内容插入
  9. 结语

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

文档对象模型(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 的广泛能力,你将发现更多隐藏的能力,为我们的开发提供更多方便。