$ npm install 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
- $
dom
一些常用的DOM判断及操作方法，可以使用dom.$('*')包装DOM，实现类jQuery的链式操作；当然这里的静态方法也可以直接使用。
Meta
- author: huzunjie
getAttr
读取HTML元素属性值
Parameters
elHTMLElement 目标元素attrNameString 目标属性名称
Returns String
setAttr
设置HTML元素属性值
Parameters
elHTMLElement 目标元素attrNameString 目标属性名称attrValString 目标属性值
addClassName
为HTML元素添加className
Parameters
elHTMLElement 目标元素clsString 要添加的className（多个以空格分割）
removeClassName
为HTML元素移除className
Parameters
elHTMLElement 目标元素clsString 要移除的className（多个以空格分割）
hasClassName
检查HTML元素是否已设置className
Parameters
elHTMLElement 目标元素classNameString 要检查的className
Returns Boolean
supportsPassive
addEventListener 是否已支持 passive
Returns Boolean
removeEvent
为HTML元素移除事件监听
Parameters
elHTMLElement 目标元素typeString 事件名称handlerFunction 处理函数onceBoolean 是否只监听一次 (optional, defaultfalse)captureBoolean 是否在捕获阶段的监听 (optional, defaultfalse)
addEvent
为HTML元素添加事件监听
Parameters
elHTMLElement 目标元素typeString 事件名称handlerFunction 处理函数onceBoolean 是否只监听一次 (optional, defaultfalse)capture(Boolean | Object) 是否在捕获阶段监听，这里也可以传入 { passive: true } 表示被动模式 (optional, defaultfalse)
addDelegate
为HTML元素添加事件代理
Parameters
elHTMLElement 目标元素selectorString 要被代理的元素typeString 事件名称handlerFunction 处理函数captureBoolean 是否在捕获阶段监听 (optional, defaultfalse)
removeDelegate
为HTML元素移除事件代理
Parameters
elHTMLElement 目标元素selectorString 要被代理的元素typeString 事件名称handlerFunction 处理函数captureBoolean 是否在捕获阶段监听 (optional, defaultfalse)
getStyle
读取HTML元素样式值
Parameters
elHTMLElement 目标元素keyString 样式key
Returns String
setStyle
设置HTML元素样式值
Parameters
elHTMLElement 目标元素keyString 样式keyvalString 样式值
query
根据选择器查询目标元素
Parameters
selectorString 选择器,用于 querySelectorAllcontainerHTMLElement 父容器 (optional, defaultdocument)toArrayBoolean 强制输出为数组
removeEl
从DOM树中移除el
Parameters
elHTMLElement 目标元素
findParents
查找元素的父节点们
Parameters
elHTMLElement 目标元素endElHTMLElement 最大父容器（不指定则找到html） (optional, defaultnull)haveElBoolean 包含当前元素haveEndElBoolean 包含设定的最大父容器
NodeWrap
NodeWrap DOM包装器，用以实现基本的链式操作 new dom.NodeWrap('') 相当于 dom.$('') 这里面用于DOM操作的属性方法都是基于上面静态方法实现，有需要可以随时修改补充
Parameters
selectorString 选择器(兼容 String||HTMLString||NodeList||NodeArray||HTMLElement)containerHTMLElement 父容器（默认为document）
each
循环遍历DOM集合
Parameters
args...anyfnFunction 遍历函数 fn(item, i)
Returns Object
push
添加元素到DOM集合
Parameters
args...anyelHTMLElement 要加入的元素
Returns this
splice
截取DOM集合片段，并得到新的包装器splice
Parameters
args...anystartNubmercountNubmer
Returns NodeWrap 新的DOM集合包装器
find
查找子元素
Parameters
selectorString 选择器
Returns NodeWrap 新的DOM集合包装器
append
添加子元素
Parameters
childElsHTMLElement 要添加的HTML元素
Returns this
appendTo
将元素集合添加到指定容器
Parameters
parentElHTMLElement 要添加到父容器
Returns this
text
DOM集合text内容读写操作
Parameters
valString 文本内容（如果有设置该参数则执行写操作，否则执行读操作）
Returns this
html
DOM集合HTML内容读写操作
Parameters
htmlString html内容（如果有设置该参数则执行写操作，否则执行读操作）
Returns this
attr
DOM集合属性读写操作
Parameters
Returns this
data
DOM集合dataset读写操作
Parameters
keyString 键名valAny 键值（如果有设置该参数则执行写操作，否则执行读操作）
Returns this
css
DOM集合样式读写操作
Parameters
Returns this
addClass
为DOM集合增加className
Parameters
clsString 要增加的className
Returns this
removeClass
移除当前DOM集合的className
Parameters
clsString 要移除的className
Returns this
hasClass
检查索引0的DOM是否有className
Parameters
clsString 要检查的className
Returns this
on
为DOM集合添加事件监听
Parameters
typeString 事件名称handlerFunction 处理函数onceBoolean 是否只监听一次 (optional, defaultfalse)captureBoolean 是否在捕获阶段监听 (optional, defaultfalse)
Returns this
off
为DOM集合解除事件监听
Parameters
typeString 事件名称handlerFunction 处理函数onceBoolean 是否只监听一次 (optional, defaultfalse)captureBoolean 是否在捕获阶段监听 (optional, defaultfalse)
Returns this
delegate
为DOM集合绑定事件代理
Parameters
selectorString 目标子元素选择器typeString 事件名称handlerFunction 处理函数captureBoolean 是否在捕获阶段监听 (optional, defaultfalse)
Returns this
undelegate
为DOM集合解绑事件代理
Parameters
selectorString 目标子元素选择器typeString 事件名称handlerFunction 处理函数captureBoolean 是否在捕获阶段监听 (optional, defaultfalse)
Returns this
remove
从DOM树中移除
Returns this
$
根据选择器查询并得到目标元素的wrap包装器
Parameters
selectorString 选择器,另外支持 HTMLString||NodeList||NodeArray||HTMLElementcontainerHTMLElement 父容器
Returns Object
Current Tags
- 0.1.8 ... latest (7 years ago)
9 Versions
welefen
huzunjie
toxicjohann
- babel-runtime ^6.26.0
- chimee-helper-events ^0.1.0
- chimee-helper-utils ^0.2.0
- toxic-predicate-functions ^0.1.5
- babel-eslint ^7.2.3
- babel-jest ^20.0.3
- babel-plugin-transform-runtime ^6.23.0
- babel-preset-es2015-rollup ^3.0.0
- babel-preset-flow ^6.23.0
- babel-preset-latest ^6.24.1
- documentation ^4.0.0
- eslint ^4.10.0
- eslint-plugin-flowtype ^2.39.1
- eslint-plugin-jest ^20.0.3
- flow-bin ^0.49.1
- husky ^0.14.1
- jest ^20.0.4
- nyc ^11.3.0
- rollup ^0.43.0
- rollup-plugin-babel ^2.7.1
- rollup-plugin-commonjs ^8.2.6
- rollup-plugin-flow-no-whitespace ^1.0.0
- rollup-plugin-includepaths ^0.2.2
- rollup-plugin-node-resolve ^3.0.0
- rollup-plugin-uglify ^2.0.1
- toxic-utils ^0.1.6