@1natsu/wait-element 中文文档教程

Question

wait-element

检测元素在浏览器 DOM 中的外观

a.k.a promise-querySelector

• Promise API
• Driven by MutationObserver
• Detect by querySelecrtor

如果执行“wait-element”时目标元素已经存在，它会立即resolve 并返回该元素。

Install

$ npm install @1natsu/wait-element

Usage

Module specifiers

import {waitElement, waitDisappearElement} from '@1natsu/wait-element';

Basically

(async () => {
  const el = await waitElement('.late-comming');
  console.log(el);
  //=> example: "<div class="late-comming">I'm late</div>"
})();

When specify a parent element (specify MutationObserve target)

(async () => {
  const parent = await waitElement('#parent');
  const el = await waitElement('.late-comming', { target: parent });
  console.log(el);
  //=> example: "<div class="late-comming">I'm late</div>"
})();

When setting timeout

(async () => {
  const el = await waitElement('.late-comming', { timeout: 5000 }).catch(err => console.log(err));
  console.log(el);
  //=> If detected element: "<div class="late-comming">I'm late</div>"
  //=> If timeouted: Error: Element was not found: '.late-coming'
})();

When cancel wait-element

(async () => {
  let el;

  try {
    el = waitElement('.late-comming');
    if (!isCondition) el.cancel();
  } catch {
    // some handling...
  }
})();

Wait for the element to disappear

(async () => {
    const el = await waitDisappearElement('.will-disappear');
    // disappeared the element from dom tree
  console.log(el);
  //=> example: null
})();

API

waitElement(selector, [options])

waitDisappearElement(selector, [options])

等待元素 & waitDisappearElement 是相同的 api。 区别在于等待元素出现或消失。

selector

类型：string

格式为 CSS-selector

options

target

类型: HTMLElement
默认值：document

指定父节点（指定 MutationObserve 目标）。

当您知道要检测的元素的父节点时。

• Please also refer to the MutationObserver

timeout

类型：数字
默认值：0
单位：ms(毫秒)

默认没有超时。

waitElement#cancel()

类型：Function

停止等待元素。 取消是同步的。

基于 p-cancelable。 欣赏它。

Similar

非常相似的图书馆。

• element-ready
• Implementation method is different from this library.

License

麻省理工学院 © 1natsu172