用查询/活动方法增强的 HTML 元素
方便进行 DOM 元素操作的功能 :
- 基于 Css 查询选择器的元素选择 。 可连锁. 节点列表自动转换为矩阵
- 帮助附加/挖掘事件。 支持的活动
这个库作为ES模块提供,并附有打字声明.
安装
用 npm 安装 :
$ npm install @drivy/dom-query
用纱线安装 :
$ yarn add @drivy/dom-query
使用量
import { query, queryAll } from "@drivy/dom-query";
queryAll(".home-header").map(header => console.log(header));
// => <h1 class="home-header"> Welcome </h1>
// => <h1 class="home-header"> Get started </h1>
query(".confirm-button").on("click", e => {
confirm(e.target);
});
API 密码
从DOM中获取元素
query
- 从 DOM 中选择带有 css 查询选择器的元素.
- 返回时
null如果没有元素匹配选择器. - 可连锁. 链条方法将基于最后选定的元素上下文
queryStrict
- 喜欢
query方法,但如果没有元素与选择器相匹配,则将例外提出.
queryAll
- 从 DOM 中选择一个带有 cs 查询选择器的元素列表。 节点列表结果将被转换为阵列, 这样您就可以直接访问阵列方法( 对于每个阵列, 映射, 减少, 过滤...)
实例:
import { query, queryStrict, queryAll } from "@drivy/dom-query"
...
const myElement = query(".js_my-element")
const mySubElement = myElement.query(".js_my-sub-element")
const mySubElements = myElement.queryAll(".js_my-sub-elements")
queryAll(".js_my-container .js_my-children-to-select").map(enhancedElement => {
doSomething(enhancedElement)
})
const myElement2 = queryStrict(".js_my-existing-element")
//code below won't be reached if the previous element was not found
doSomething(myElement2)
将已有的javascript 元素转换为增强HTMLEments
您可以用以下方法将现有的javascript Element/List 转换为增强HTMLElement/增强HTMLElementList :
toEnhancedHTMLElementtoEnhancedHTMLElementList
当输入元素超出你的范围时,您必须使用这些方法(函数参数,事件.目标.)
import { toEnhancedHTMLElement, toEnhancedHTMLElementList } from "@drivy/dom-query"
...
const myElement = toEnhancedHTMLElement(myHTMLElement);
const myElements = toEnhancedHTMLElementList(myHTMLElements);
处理事件
您可以以下列方法附加/分离事件:
增强式HTMLELED(增强式).on
- 附加类似本地事件
target.addEventListener。 。 。 . - 返回“调试”函数。 当调用时, 将会像删除事件听众
target.removeEventListener。 。 。 .
增强HTMLelement列表.on
- 与增强HTMLElement 相同的参数和行为
.on但该活动将附在清单中的每个要素上. - 返回“ 解析” 函数, 当调用时, 将解析列表中每个元素所附带的事件
增强式HTMLELED(增强式).onDelegate
- 执行活动任务. 这里的模式描述。 。 。 .
- 喜欢
.on方法,但将一个额外的参数(第一个)作为 css 查询选择器,指定作为事件目标的孩子们 - 返回“调试”函数。 当被调用时,会移除附在容器上的事件收听器.
增强HTMLelement列表.onDelegate
- 与增强HTMLElement 相同的参数和行为
.onDelegate但活动代表团将按清单的每一项进行. - 返回“ 解析” 函数, 当调用时, 将解析列表中每个元素所附带的事件
实例:
// EnhancedHTMLElement
const detach = myElement.on("click", e => {
doSomething(e.target)
})
...
detach() //same behavior than native target.removeEventListener
const detachDelegation = myContainer.onDelegate(".js_sub-elements", "click", e => {
doSomething(e.target)
});
// clicking on a child having the "js_sub-elements" class will trigger the event
...
detachDelegation() // remove event listener used to delegate
// EnhancedHTMLElementList
const detach = queryAll(".js_my-elements").on("click", e => {
doSomething(e.target)
})
...
detach()
const detachDelegations = queryAll(".js_my-elements").onDelegate(
".js_my-sub-elements",
"click",
e => {
doSomething(e.target)
}
)
...
detachDelegations()
高级特性
事件配置
附加事件时 .on 或者说 .onDelegate 您可以将可选事件配置对象指定为最后一个参数.
此配置对象有一个 once 布尔属性, 当 true 在拨打一次电话后, 将自动解析事件 .
myElement2.on(
"click",
e => {
doSomething(e.target);
// event listener will be detached
},
{
once: true
}
);
专门化 HTML 元素( 如: HTML 输入元素)
因为 EnhancedHTMLElement 增强 HTMLElement 默认情况下,从带有 Typescript(例如: myEnhancedInput.value),在调用查询/转换方法时必须声明目标类型
import { query, queryAll, toEnhancedHTMLElement } from "@drivy/dom-query"
...
const myEnhancedInput = query<HTMLInputElement>(".js_my-target-input");
doSomething(myEnhancedInput.value)
const myEnhancedInput2 = toEnhancedHTMLElement<HTMLInputElement>(myExistingInput);
doSomething(myEnhancedInput2.value)
const myEnhancedInputs = queryAll<HTMLInputElement>(".js_my-target-inputs");
myEnhancedInputs.forEach(myInput => {
doSomething(myInput.value);
})