ShokaX dom API

大约 5 分钟

ShokaX dom API

可用区: page ts(前端可用)

$dom 系

$dom

适用于获取满足 CSS 选择器的首个 HTML 节点，当使用 id 获取时为 getElementById 获取，其他情况为 querySelector 获取

接收参数

selector: string: CSS 选择器
element: Document: (可选，默认为 document)查询父节点

返回类型

HTMLElement: 查询到的子节点

示例

const Container = $dom("#container"); // 使用getElementById获取的
const article = $dom(".index.wrap"); // 使用querySelector获取的

article.innerHTML = "<p>Hello world</p>";

$dom.all

使用 querySelectorAll 返回所有符合条件的节点，一般不直接使用此函数

接收参数

selector: string: CSS 选择器
element: Document: (可选，默认为 document)查询父节点

返回类型

NodeListOf<HTMLElement>: 查询到的子节点列表

$dom.each

遍历所有符合选择器的节点并执行 callback

接收参数

selector: string: CSS 选择器
callback: (value: HTMLElement, key?: number, parent?: NodeListOf<Element>) => void: 回调参数
element: Document: (可选，默认为 document)查询父节点

返回类型

void

示例(节选自 ShokaX page ts)

$dom.each(".post.block p.gallery", (element) => {
  const box = document.createElement("div");
  box.className = "gallery";
  box.attr("data-height", String(element.attr("data-height") || 220));

  box.innerHTML = element.innerHTML.replace(/<br>/g, "");

  element.parentNode.insertBefore(box, element);
  element.remove();
});

dom 异步化 API

此部分 API 包含$dom.asyncify实验性和 $dom.asyncifyEach实验性由于具体代码实现尚未稳定，暂不提供文档

原型注入系

原型注入系通过设置 HTMLElement.prototype 来注入 API

HTMLElement.prototype.createChild

创建一个 HTML 元素并放置

接收参数

tag: string: 要创建的 HTML 元素的标签名(如，'div'，'span'等)
obj: Object: 包含要应用于新创建的 HTML 元素的属性和值
positon?: string: (可选)表示新创建的 HTML 元素放置的位置。可选值:
- after: 将新创建的元素插入到 this 的后面
- replace: 清空 this 的内容，并将新创建的元素作为唯一子元素添加到 this 中
- 省略该参数或传入其他值: 默认将元素添加为 this 的最后一个子元素

返回类型

HTMLElement: 新创建的子元素

示例(节选自 ShokaX page ts)

const BODY = document.getElementsByTagName("body")[0];
let siteSearch;

if (!siteSearch) {
  siteSearch = BODY.createChild("div", {
    id: "search",
    innerHTML:
      '<div class="inner"><div class="header"><span class="icon"><i class="ic i-search"></i></span><div class="search-input-container"></div><span class="close-btn"><i class="ic i-times-circle"></i></span></div><div class="results"><div class="inner"><div id="search-stats"></div><div id="search-hits"></div><div id="search-pagination"></div></div></div></div>',
  });
}

HTMLElement.prototype.wrapObject

使用用一个新的 div 元素包裹 this

接收参数

obj: Object: 包含要应用于新创建的 div 元素的属性和值

返回类型

void

示例(节选自 ShokaX page ts)

$dom.each(".md table", (element) => {
  element.wrapObject({
    className: "table-container",
  });
});

HTMLElement.prototype.changeOrGetHeight

改变或获取 this 的高度

接收参数

h: number | string: (可选)如果提供了该参数，则将 this 的高度设置为该值。如果类型为数字，则将其转换为字符串并添加'rem'单位；否则，直接使用该值

返回类型

number: this的高度

HTMLElement.prototype.changeOrGetWidth

改变或获取 this 的宽度

接收参数

w: number | string: (可选)如果提供了该参数，则将 this 的宽度设置为该值。如果类型为数字，则将其转换为字符串并添加'rem'单位；否则，直接使用该值

返回类型

number: this的宽度

HTMLElement.prototype.getTop

获取 this 相对于视口顶部的距离(即上边界的偏移量)

返回类型

number: this 相对于视口顶部的距离

HTMLElement.prototype.left

获取 this 相对于视口左侧的距离(即左边界的偏移量)

返回类型

number: this 相对于视口左侧的距离

HTMLElement.prototype.attr

操作 this 的属性

接收参数

type: string: 操作的属性名
value: string: (可选)属性值，可选值:
- null: 删除具有 type 名称的属性
- 存在(既不为 null 也不为 undefined): 为 this 中将 type 名称的属性设置为 value
- undefined 或省略该参数: 返回具有 type 名称属性的属性值

返回类型

void | EventTarget | string: 根据 value 的值而变化:
- void: value 为 null
- EventTarget: value 既不为 null 也不为 undefined，返回 this (自身)
- string: value 为 undefined 或省略该参数，返回具有 type 名称的属性的属性值

示例(节选自 ShokaX page ts)

if ((info = element.attr("title"))) {
  $imageWrapLink.attr("data-caption", info);
  const para = document.createElement("span");
  const txt = document.createTextNode(info);
  para.appendChild(txt);
  para.addClass(captionClass);
  element.insertAfter(para);
}

HTMLElement.prototype.insertAfter

在 this 之后插入另一个元素

接收参数

element: HTMLElement: 插入的元素

返回类型

void

HTMLElement.prototype.display

设置/获得 this 的 display 属性

接收参数

d: string: (可选)要设置给元素的显示状态，如果传入，则设置 this 的 display 属性为指定值

返回类型

string | EventTarget: 根据 d 的值而变化:
- string: 省略 d，返回 this 的 display 属性
- EventTarget: 传入 d，返回 this (自身)

示例(节选自 ShokaX page ts)

if (qr.display() === "inline-flex") {
  transition(qr, 0);
} else {
  transition(qr, 1, () => {
    qr.display("inline-flex");
  }); // slideUpBigIn
}