chimee-helper-dom

chimee-helper-dom

dom handler of chimee

get started

npm install chimee-helper-dom --save

if you are using flow, you should import our flow defination, by adding this to your .flowconfig.

[ignore]

[include]

[libs]
./node_modules/chimee-helper-dom/lib/index.flow.js
[options]

[lints]

doc

Table of Contents

• dom
• getAttr
• setAttr
• addClassName
• removeClassName
• hasClassName
• supportsPassive
• removeEvent
• addEvent
• addDelegate
• removeDelegate
• getStyle
• setStyle
• query
• removeEl
• findParents
• NodeWrap
  • each
  • push
  • splice
  • find
  • append
  • appendTo
  • text
  • html
  • attr
  • data
  • css
  • addClass
  • removeClass
  • hasClass
  • on
  • off
  • delegate
  • undelegate
  • remove
• $

dom

src/index.js:11-11

一些常用的DOM判断及操作方法，可以使用dom.$('*')包装DOM，实现类jQuery的链式操作；当然这里的静态方法也可以直接使用。

Meta

• author: huzunjie

getAttr

src/index.js:22-24

读取HTML元素属性值

Parameters

• el HTMLElement 目标元素
• attrName String 目标属性名称

Returns String

setAttr

src/index.js:32-38

设置HTML元素属性值

Parameters

• el HTMLElement 目标元素
• attrName String 目标属性名称
• attrVal String 目标属性值

addClassName

src/index.js:45-59

为HTML元素添加className

Parameters

• el HTMLElement 目标元素
• cls String 要添加的className（多个以空格分割）

removeClassName

src/index.js:66-84

为HTML元素移除className

Parameters

• el HTMLElement 目标元素
• cls String 要移除的className（多个以空格分割）

hasClassName

src/index.js:92-94

检查HTML元素是否已设置className

Parameters

• el HTMLElement 目标元素
• className String 要检查的className

Returns Boolean

supportsPassive

src/index.js:100-100

addEventListener 是否已支持 passive

Returns Boolean

removeEvent

src/index.js:120-132

为HTML元素移除事件监听

Parameters

• el HTMLElement 目标元素
• type String 事件名称
• handler Function 处理函数
• once Boolean 是否只监听一次 (optional, default false)
• capture Boolean 是否在捕获阶段的监听 (optional, default false)

addEvent

src/index.js:142-159

为HTML元素添加事件监听

Parameters

• el HTMLElement 目标元素
• type String 事件名称
• handler Function 处理函数
• once Boolean 是否只监听一次 (optional, default false)
• capture (Boolean | Object) 是否在捕获阶段监听，这里也可以传入 { passive: true } 表示被动模式 (optional, default false)

addDelegate

src/index.js:169-193

为HTML元素添加事件代理

Parameters

• el HTMLElement 目标元素
• selector String 要被代理的元素
• type String 事件名称
• handler Function 处理函数
• capture Boolean 是否在捕获阶段监听 (optional, default false)

removeDelegate

src/index.js:203-210

为HTML元素移除事件代理

Parameters

• el HTMLElement 目标元素
• selector String 要被代理的元素
• type String 事件名称
• handler Function 处理函数
• capture Boolean 是否在捕获阶段监听 (optional, default false)

getStyle

src/index.js:218-220

读取HTML元素样式值

Parameters

• el HTMLElement 目标元素
• key String 样式key

Returns String

setStyle

src/index.js:228-236

设置HTML元素样式值

Parameters

• el HTMLElement 目标元素
• key String 样式key
• val String 样式值

query

src/index.js:245-248

根据选择器查询目标元素

Parameters

• selector String 选择器,用于 querySelectorAll
• container HTMLElement 父容器 (optional, default document)
• toArray Boolean 强制输出为数组

Returns (NodeList | Array)

removeEl

src/index.js:254-256

从DOM树中移除el

Parameters

• el HTMLElement 目标元素

findParents

src/index.js:265-278

查找元素的父节点们

Parameters

• el HTMLElement 目标元素
• endEl HTMLElement 最大父容器（不指定则找到html） (optional, default null)
• haveEl Boolean 包含当前元素
• haveEndEl Boolean 包含设定的最大父容器

NodeWrap

src/index.js:289-544

NodeWrap DOM包装器，用以实现基本的链式操作 new dom.NodeWrap('') 相当于 dom.$('') 这里面用于DOM操作的属性方法都是基于上面静态方法实现，有需要可以随时修改补充

Parameters

• selector String 选择器(兼容 String||HTMLString||NodeList||NodeArray||HTMLElement)
• container HTMLElement 父容器（默认为document）

each

src/index.js:327-330

循环遍历DOM集合

Parameters

• args ...any
• fn Function 遍历函数 fn(item, i)

Returns Object

push

src/index.js:337-340

添加元素到DOM集合

Parameters

• args ...any
• el HTMLElement 要加入的元素

Returns this

splice

src/index.js:348-350

截取DOM集合片段，并得到新的包装器splice

Parameters

• args ...any
• start Nubmer
• count Nubmer

Returns NodeWrap 新的DOM集合包装器

find

src/index.js:357-366

查找子元素

Parameters

• selector String 选择器

Returns NodeWrap 新的DOM集合包装器

append

src/index.js:373-378

添加子元素

Parameters

• childEls HTMLElement 要添加的HTML元素

Returns this

appendTo

src/index.js:385-388

将元素集合添加到指定容器

Parameters

• parentEl HTMLElement 要添加到父容器

Returns this

text

src/index.js:395-402

DOM集合text内容读写操作

Parameters

• val String 文本内容（如果有设置该参数则执行写操作，否则执行读操作）

Returns this

html

src/index.js:409-416

DOM集合HTML内容读写操作

Parameters

• html String html内容（如果有设置该参数则执行写操作，否则执行读操作）

Returns this

attr

src/index.js:424-429

DOM集合属性读写操作

Parameters

• name String 属性名称
• val String 属性值（如果有设置该参数则执行写操作，否则执行读操作）

Returns this

data

src/index.js:437-447

DOM集合dataset读写操作

Parameters

• key String 键名
• val Any 键值（如果有设置该参数则执行写操作，否则执行读操作）

Returns this

css

src/index.js:455-460

DOM集合样式读写操作

Parameters

• key String 样式key
• val String 样式值（如果有设置该参数则执行写操作，否则执行读操作）

Returns this

addClass

src/index.js:467-469

为DOM集合增加className

Parameters

• cls String 要增加的className

Returns this

removeClass

src/index.js:476-478

移除当前DOM集合的className

Parameters

• cls String 要移除的className

Returns this

hasClass

src/index.js:485-487

检查索引0的DOM是否有className

Parameters

• cls String 要检查的className

Returns this

on

src/index.js:497-499

为DOM集合添加事件监听

Parameters

• type String 事件名称
• handler Function 处理函数
• once Boolean 是否只监听一次 (optional, default false)
• capture Boolean 是否在捕获阶段监听 (optional, default false)

Returns this

off

src/index.js:509-511

为DOM集合解除事件监听

Parameters

• type String 事件名称
• handler Function 处理函数
• once Boolean 是否只监听一次 (optional, default false)
• capture Boolean 是否在捕获阶段监听 (optional, default false)

Returns this

delegate

src/index.js:521-523

为DOM集合绑定事件代理

Parameters

• selector String 目标子元素选择器
• type String 事件名称
• handler Function 处理函数
• capture Boolean 是否在捕获阶段监听 (optional, default false)

Returns this

undelegate

src/index.js:533-535

为DOM集合解绑事件代理

Parameters

• selector String 目标子元素选择器
• type String 事件名称
• handler Function 处理函数
• capture Boolean 是否在捕获阶段监听 (optional, default false)

Returns this

remove

src/index.js:541-543

从DOM树中移除

Returns this

$

src/index.js:552-554

根据选择器查询并得到目标元素的wrap包装器

Parameters

• selector String 选择器,另外支持 HTMLString||NodeList||NodeArray||HTMLElement
• container HTMLElement 父容器

Returns Object