Teal TealUI

批量操作节点web/domList

快速、链式操作节点。

API
全局
DomList 接口

API

全局

函数 描述
⮞ $(...)(selector?:any, context?:Document | Node):DomList(6 重载)

查找 CSS 选择器匹配的所有元素。

参数 类型 描述 默认值
selector* string —
context Document | Node —

返回值

类型：DomList

返回新列表。

解析指定的 HTML 片段。

参数 类型 描述 默认值
html* string —
context Document —

返回值

类型：DomList

返回新列表。

创建一个空列表。

返回值

类型：DomList

返回新列表。

创建仅包含指定节点的列表。

参数 类型 描述 默认值
node* Node | Window —

返回值

类型：DomList

返回新列表。

创建和已有列表包含相同元素的新列表。

参数 类型 描述 默认值
nodeList* ArrayLike<Node | Window> —

返回值

类型：DomList

返回新列表。

设置文档加载完成后的回调。

参数 类型 描述 默认值
ready* () => void —
context Document —

返回值

类型：DomList

返回一个空列表。

查找 CSS 选择器匹配的所有元素。

DomList 接口

表示一个元素列表。

字段 类型 描述
⮞ [index] : HTMLElement

获取或设置指定索引的元素。

参数 类型 描述 默认值
index* number —

返回值

类型：HTMLElement

 HTMLElement

获取或设置指定索引的元素。
⮞ length : number

元素个数。

 number

元素个数。
方法 描述
⮞ DomList(...)(selector?:any, context?:any):void

表示一个元素列表。

this：DomList

参数 类型 描述 默认值
selector any —
context any —

返回值

类型：void

表示一个元素列表。
⮞ push(...)(...elems:HTMLElement[]):number

向列表末尾添加新元素。

参数 类型 描述 默认值
elems HTMLElement[] —

返回值

类型：number

返回新长度。

向列表末尾添加新元素。
⮞ pop()():HTMLElement

移除并返回列表末尾的元素。

返回值

类型：HTMLElement

返回元素。

移除并返回列表末尾的元素。
⮞ unshift(...)(...elems:HTMLElement[]):number

向列表开头添加新元素。

参数 类型 描述 默认值
elems HTMLElement[] —

返回值

类型：number

返回新长度。

向列表开头添加新元素。
⮞ shift()():HTMLElement

移除并返回列表开头的元素。

返回值

类型：HTMLElement

返回元素。

移除并返回列表开头的元素。
⮞ slice(...)(start?:number, end?:number):DomList

获取列表的指定位置的子列表。

参数 类型 描述 默认值
start number —
end number —

返回值

类型：DomList

返回新列表。

获取列表的指定位置的子列表。
⮞ splice(start, deleteCount, ...)(start:number, deleteCount:number, ...insertItems:HTMLElement[]):HTMLElement[]

移除或插入列表的指定元素。

参数 类型 描述 默认值
start* number —
deleteCount* number —
insertItems HTMLElement[] —

返回值

类型：HTMLElement[]

返回被删除的元素所组成的数组。

移除或插入列表的指定元素。
⮞ sort(compareFn)(compareFn:function):this

排序当前列表的元素。

参数 类型 描述 默认值
compareFn* (x: HTMLElement, y: HTMLElement) => number —

返回值

类型：this

排序当前列表的元素。
⮞ reverse()():this

颠倒所有元素的顺序。

返回值

类型：this

颠倒所有元素的顺序。
⮞ indexOf(value, ...)(value:HTMLElement, startIndex?:number):number

查找指定项在数组内的第一个索引。

参数 类型 描述 默认值
value* HTMLElement —
startIndex number —

返回值

类型：number

返回索引。如果找不到则返回 -1。

查找指定项在数组内的第一个索引。
⮞ lastIndexOf(value, ...)(value:HTMLElement, startIndex?:number):number

查找指定项在数组内的最后一个索引。

参数 类型 描述 默认值
value* HTMLElement —
startIndex number —

返回值

类型：number

返回索引。如果找不到则返回 -1。

查找指定项在数组内的最后一个索引。
⮞ each(callback, ...)(callback:function, thisArg?:any):this

对列表的每一项执行一次回调函数。

参数 类型 描述 默认值
callback* (elem: HTMLElement, index: number, target: this) => void —
thisArg any —

返回值

类型：this

对列表的每一项执行一次回调函数。
⮞ map(callback, ...)(callback:function, thisArg?:any):DomList

对列表的每一项执行一次回调函数，然后将每个结果组成新数组。

参数 类型 描述 默认值
callback* (elem: HTMLElement, index: number, target: this) => any —
thisArg any —

返回值

类型：DomList

对列表的每一项执行一次回调函数，然后将每个结果组成新数组。
⮞ filter(callback, ...)(callback:function, thisArg?:any):DomList(2 重载)

筛选数组中符合条件的项并组成一个新数组。

参数 类型 描述 默认值
callback* (elem: HTMLElement, index: number, target: this) => void —
thisArg any —

返回值

类型：DomList

返回一个新列表。

筛选数组中匹配指定 CSS 选择器的项并组成一个新数组。

参数 类型 描述 默认值
selector* string —

返回值

类型：DomList

返回一个新列表。

筛选数组中符合条件的项并组成一个新数组。
⮞ every(callback, ...)(callback:function, thisArg?:any):boolean

判断数组的每一项是否都符合条件。

参数 类型 描述 默认值
callback* (elem: HTMLElement, index: number, target: this) => void —
thisArg any —

返回值

类型：boolean

如果所有项满足条件则返回 true，否则返回 false。

判断数组的每一项是否都符合条件。
⮞ some(callback, ...)(callback:function, thisArg?:any):boolean

判断数组中是否存在一项或多项符合条件。

参数 类型 描述 默认值
callback* (elem: HTMLElement, index: number, target: this) => void —
thisArg any —

返回值

类型：boolean

如果至少存在一项满足条件则返回 true，否则返回 false。

判断数组中是否存在一项或多项符合条件。
⮞ add(...)(...items:(string | Node | Window | ArrayLike<Node | Window>)[]):this

向列表末尾添加新元素。

参数 类型 描述 默认值
items (string | Node | Window | ArrayLike<Node | Window>)[] —

返回值

类型：this

向列表末尾添加新元素。
⮞ find(selector)(selector:string):DomList

在当前节点内查询 CSS 选择器匹配的所有节点。

参数 类型 描述 默认值
selector* string —

返回值

类型：DomList

在当前节点内查询 CSS 选择器匹配的所有节点。
⮞ match(selector)(selector:string):boolean

判断是否有一个或多个元素匹配指定的 CSS 选择器。

参数 类型 描述 默认值
selector* string —

返回值

类型：boolean

返回包含所有元素的新列表。

判断是否有一个或多个元素匹配指定的 CSS 选择器。
⮞ next(...)(selector?:string):NodeList

获取每个节点的下一个相邻元素。

参数 类型 描述 默认值
selector string —

返回值

类型：NodeList

返回包含所有元素的新列表。

获取每个节点的下一个相邻元素。
⮞ prev(...)(selector?:string):NodeList

获取每个节点的上一个相邻元素。

参数 类型 描述 默认值
selector string —

返回值

类型：NodeList

返回包含所有元素的新列表。

获取每个节点的上一个相邻元素。
⮞ parent(...)(selector?:string):NodeList

获取每个节点的父元素。

参数 类型 描述 默认值
selector string —

返回值

类型：NodeList

返回包含所有元素的新列表。

获取每个节点的父元素。
⮞ closest(...)(selector?:string):NodeList

从每个节点开始向父元素查找第一个匹配指定 CSS 选择器的元素。

参数 类型 描述 默认值
selector string —

返回值

类型：NodeList

返回包含所有元素的新列表。

从每个节点开始向父元素查找第一个匹配指定 CSS 选择器的元素。
⮞ children(...)(selector?:string):NodeList

获取每个节点的所有子元素。

参数 类型 描述 默认值
selector string —

返回值

类型：NodeList

返回包含所有元素的新列表。

获取每个节点的所有子元素。
⮞ append(content)(content:string | Node | ArrayLike<HTMLElement>):this

在每个节点末尾插入一段 HTML 或一个节点。

参数 类型 描述 默认值
content* string | Node | ArrayLike<HTMLElement> —

返回值

类型：this

在每个节点末尾插入一段 HTML 或一个节点。
⮞ prepend(content)(content:string | Node | ArrayLike<HTMLElement>):this

在每个节点开头插入一段 HTML 或一个节点。

参数 类型 描述 默认值
content* string | Node | ArrayLike<HTMLElement> —

返回值

类型：this

在每个节点开头插入一段 HTML 或一个节点。
⮞ before(content)(content:string | Node | ArrayLike<HTMLElement>):this

在每个节点前插入一段 HTML 或一个节点。

参数 类型 描述 默认值
content* string | Node | ArrayLike<HTMLElement> —

返回值

类型：this

在每个节点前插入一段 HTML 或一个节点。
⮞ after(content)(content:string | Node | ArrayLike<HTMLElement>):this

在每个节点后插入一段 HTML 或一个节点。

参数 类型 描述 默认值
content* string | Node | ArrayLike<HTMLElement> —

返回值

类型：this

在每个节点后插入一段 HTML 或一个节点。
⮞ appendTo(parent)(parent:string | Node | ArrayLike<HTMLElement>):this

将当前节点添加到目标节点的末尾。

参数 类型 描述 默认值
parent* string | Node | ArrayLike<HTMLElement> —

返回值

类型：this

将当前节点添加到目标节点的末尾。
⮞ remove()():this

从文档中移除列表中所有节点。

返回值

类型：this

从文档中移除列表中所有节点。
⮞ clone()():NodeList

复制节点列表。

返回值

类型：NodeList

返回复制的新列表。

复制节点列表。
⮞ attr(attributeName)(attributeName:string):string(3 重载)

获取列表中第一个元素的属性值。

参数 类型 描述 默认值
attributeName* string —

返回值

类型：string

返回属性值。如果属性不存在则返回 null。

设置列表中每个元素的属性值。

参数 类型 描述 默认值
attributeName* string —
value* string | number —

返回值

类型：this

设置列表中每个元素的属性值。

参数 类型 描述 默认值
attributes* Object —

返回值

类型：this

获取列表中第一个元素的属性值。
⮞ val()():string(2 重载)

获取列表中第一个元素的值。

返回值

类型：string

返回属性值。如果属性不存在则返回 null。

设置列表中每个元素的值。

参数 类型 描述 默认值
value* any —

返回值

类型：this

获取列表中第一个元素的值。
⮞ text()():string(2 重载)

获取列表中第一个元素的文本内容。

返回值

类型：string

返回属性值。如果属性不存在则返回 null。

设置列表中每个元素的文本内容。

参数 类型 描述 默认值
value* any —

返回值

类型：this

获取列表中第一个元素的文本内容。
⮞ html()():string(2 重载)

获取列表中第一个元素的 HTML 内容。

返回值

类型：string

返回属性值。如果属性不存在则返回 null。

设置列表中每个元素的文本内容。

参数 类型 描述 默认值
value* any —

返回值

类型：this

获取列表中第一个元素的 HTML 内容。
⮞ hasClass(className)(className:string):boolean

判断是否存在一个元素已添加指定的 CSS 类名。

参数 类型 描述 默认值
className* string —

返回值

类型：boolean

如果已添加则返回 true，否则返回 false。

判断是否存在一个元素已添加指定的 CSS 类名。
⮞ addClass(className)(className:string):this

添加所有元素的 CSS 类名。

参数 类型 描述 默认值
className* string —

返回值

类型：this

添加所有元素的 CSS 类名。
⮞ removeClass(...)(className?:string):this

删除所有元素的 CSS 类名。

参数 类型 描述 默认值
className string —

返回值

类型：this

删除所有元素的 CSS 类名。
⮞ toggleClass(className)(className:string):this

如果存在（不存在）则删除（添加）所有元素的 CSS 类名。

参数 类型 描述 默认值
className* string —

返回值

类型：this

如果存在（不存在）则删除（添加）所有元素的 CSS 类名。
⮞ css(propName)(propName:string):this(3 重载)

获取列表中第一个元素的 CSS 属性值。

参数 类型 描述 默认值
propName* string —

返回值

类型：this

返回计算后的 CSS 属性值。

设置列表中每个元素的 CSS 属性值。

参数 类型 描述 默认值
propName* string —
value* string | number —

返回值

类型：this

设置列表中每个元素的 CSS 属性值。

参数 类型 描述 默认值
cssProps* Object —

返回值

类型：this

获取列表中第一个元素的 CSS 属性值。
⮞ scroll()():this(2 重载)

获取列表中第一个元素的滚动距离。

返回值

类型：this

返回坐标。如果元素不可滚动则返回原点。

设置列表中每个元素的滚动距离。

参数 类型 描述 默认值
value* Point —

返回值

类型：this

获取列表中第一个元素的滚动距离。
⮞ rect()():this(2 重载)

获取列表中第一个元素的区域。

返回值

类型：this

返回元素实际占用区域（含内边距和边框、不含外边距）。如果元素不可见则返回空区域。

设置列表中每个元素的区域。

参数 类型 描述 默认值
value* Rect —

返回值

类型：this

获取列表中第一个元素的区域。
⮞ on(eventName, selector, handler, ...)(eventName:string, selector:string, handler:function, thisArg?:any):this

绑定每个元素的事件。

参数 类型 描述 默认值
eventName* string —
selector* string —
handler* (e: Event, target: HTMLElement) => void —
thisArg any —

返回值

类型：this

示例

on(document.body, "mouseenter", "a", function(e){ this.firstChild.innerHTML = e.pageX; })

绑定每个元素的事件。
⮞ off(eventName, selector, handler, ...)(eventName:string, selector:string, handler:function, thisArg?:any):this

解绑每个元素的事件。

参数 类型 描述 默认值
eventName* string —
selector* string —
handler* (e: Event, target: HTMLElement) => void —
thisArg any —

返回值

类型：this

示例

off(document.body, "mouseenter", "a", function(e) { this.firstChild.innerHTML = e.pageX; })

解绑每个元素的事件。
⮞ trigger(eventName, selector, ...)(eventName:string, selector:string, event?:Partial<Event>):this(2 重载)

触发每个元素的指定事件，即执行对应已添加的所有事件处理函数。

参数 类型 描述 默认值
eventName* string —
selector* string —
event Partial<Event> —

返回值

类型：this

示例

trigger(document.body, "click")

触发每个元素的指定事件，即执行对应已添加的所有事件处理函数。

参数 类型 描述 默认值
eventName* string —
selector* string —
event Partial<Event> —

返回值

类型：this

示例

trigger(document.body, "click")

触发每个元素的指定事件，即执行对应已添加的所有事件处理函数。
⮞ animate(propNames, ...)(propNames:object, callback?:function, duration?:number, timingFunction?:string):this

执行一个自定义渐变。

参数 类型 描述 默认值
propNames* { [propName: string]: string | number; } —
callback () => void —
duration number —
timingFunction string —

返回值

类型：this

示例

animate(document.body, { height: 400 });

执行一个自定义渐变。
⮞ show(...)(animation?:ToggleAnimation, callback?:function, duration?:number, timingFunction?:string, target?:HTMLElement):this

显示元素。

参数 类型 描述 默认值
animation ToggleAnimation —
callback (value: boolean) => void —
duration number —
timingFunction string —
target HTMLElement —

返回值

类型：this

显示元素。
⮞ hide(...)(animation?:ToggleAnimation, callback?:function, duration?:number, timingFunction?:string, target?:HTMLElement):this

隐藏元素。

参数 类型 描述 默认值
animation ToggleAnimation —
callback (value: boolean) => void —
duration number —
timingFunction string —
target HTMLElement —

返回值

类型：this

隐藏元素。
⮞ toggle(...)(animation?:ToggleAnimation, callback?:function, duration?:number, timingFunction?:string, target?:HTMLElement):this(2 重载)

切换显示或隐藏元素。

参数 类型 描述 默认值
animation ToggleAnimation —
callback (value: boolean) => void —
duration number —
timingFunction string —
target HTMLElement —

返回值

类型：this

切换显示或隐藏元素。

参数 类型 描述 默认值
value* boolean —
animation ToggleAnimation —
callback (value: boolean) => void —
duration number —
timingFunction string —
target HTMLElement —

返回值

类型：this

切换显示或隐藏元素。
⮞ click()():this(2 重载)

触发每个元素的点击事件。

返回值

类型：this

绑定每个元素的点击事件。

参数 类型 描述 默认值
handler* (e: MouseEvent, sender: HTMLElement) => void —

返回值

类型：this

触发每个元素的点击事件。
⮞ focus()():this(2 重载)

触发每个元素的获取焦点事件。

返回值

类型：this

绑定每个元素的获取焦点事件。

参数 类型 描述 默认值
handler* (e: UIEvent, sender: HTMLElement) => void —

返回值

类型：this

触发每个元素的获取焦点事件。
⮞ blur()():this(2 重载)

触发每个元素的失去焦点事件。

返回值

类型：this

绑定每个元素的失去焦点事件。

参数 类型 描述 默认值
handler* (e: UIEvent, sender: HTMLElement) => void —

返回值

类型：this

触发每个元素的失去焦点事件。
⮞ submit()():this(2 重载)

触发每个元素的表单提交事件。

返回值

类型：this

绑定每个元素的表单提交事件。

参数 类型 描述 默认值
handler* (e: UIEvent, sender: HTMLElement) => void —

返回值

类型：this

触发每个元素的表单提交事件。
⮞ select()():this(2 重载)

触发每个元素的选择事件。

返回值

类型：this

绑定每个元素的选择事件。

参数 类型 描述 默认值
handler* (e: UIEvent, sender: HTMLElement) => void —

返回值

类型：this

触发每个元素的选择事件。