npm 包：dom-exist 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

HTML 是前端工程师的基石，但很多时候开发者会遇到 DOM 元素不存在但又需要去操作的情况，这时我们可以通过取巧实现这个操作，但更规范的做法是借助一个专门处理该场景的 npm 包——dom-exist

安装

我们可以通过 npm 安装 dom-exist

npm install dom-exist --save

使用

引入

在需要使用的页面或组件中引入

import {domExists} from 'dom-exist'

初始化

使用 dom-exist 需要在需要检测的元素触发前进行初始化，例如:

domExists('.btn')

实现

当前页面所有需要检测的元素只需要在初始化的时候以 CSS 选择器形式传入 init 函数即可

function init() {
    domExists('.btn')
}

针对页面中的每个单独元素，我们可以在使用的时候直接检测，比如我们需要检测一个 id 为“test”的元素是否存在，然后对它进行事件绑定等操作

if(domExists('#test')){
    const test = document.querySelector('#test');
    test.addEventListener('click',function(){
        console.log('this is the click event')
  });
}

深度解析

先看一下 dom-exist 的源码：

export const domExists = (element) =>{
  if (document.body.contains(document.querySelector(element))) {
    return true;
  }
  return false;
};

上面这个函数非常简单，主要做了两个事情：首先，该函数利用 document.querySelector 方法查询页面内是否存在 element 元素，如果有则返回 true；如果没有，则返回 false。

另外，该函数包含了两种使用方式：

在需要检测的元素触发之前初始化。
```
window.onload = () => {
  domExists('.btn');
};
```
针对页面中的每个单独元素，我们可以在使用的时候直接检测，例如：
```
if (domExists('#test')){
  const test = document.querySelector('#test');
  test.addEventListener('click', () => {
      console.log('this is the click event')
  });
}
```
这将只针对 #test 元素的存在性进行一次检测，并在该元素存在时进行事件绑定等操作。

示例代码

-- -------------------- ---- -------
------ - --------- - ---- ------------

-------- -------
  -----------------
-

-- ---------------------
  ----- ---- - --------------------------------
  -----------------------------------------
      ----------------- -- --- ----- -------
  ---
-

总结

dom-exist 这个 npm 包的作用非常简单，但它可以为你的前端项目带来实际的便利。通过使用该包，我们可以更规范、方便的操作 DOM 元素，同时也可以通过对源码的解析来深入理解如何更好的利用前端工具和一些便利的包来提高我们的工作效率。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/600572c581e8991b448e8e37