dom-operation

操作 DOM 工具包

Usage no npm install needed!

<script type="module">
  import domOperation from 'https://cdn.skypack.dev/dom-operation';
</script>

README

dom-operation

操作 dom 工具类

提供方法

修改或者获取 HTML 元素相关

方法名 方法说明
checkELm 判断对象是否是通过选择器获取到的 HTML 元素
createElm 判断对象是否是通过选择器获取到的 HTML 元素
getByQuery 通过元素选择器来获取 HTML 元素
getById 通过元素 id 来获取 HTML 元素
getByClass 通过元素 class 来获取 HTML 元素
getByTag 通过元素 tag 标签来获取 HTML 元素，性能较低请注意
getByAttr 通过 HTML 元素属性查询元素，性能较低请注意
getElmPrev 查询 HTML 元素的前置元素
getElmNext 查询 HTML 元素的后置元素
getElmPrevAll 查询 HTML 元素的所有前置元素
getElmNextAll 查询 HTML 元素的所有后置元素
findElmChild 查询 HTML 元素的指定后代元素，性能较低请注意
getElmChild 查询 HTML元素的后代元素
getElmParent 查询 HTML 元素的父级元素
getElmClosest Closest 获得匹配选择器的第一个祖先元素，从当前元素开始沿 DOM 树向上。
getElmPUntil ParentsUntil 获取当前每一个匹配元素集的祖先，不包括匹配元素的本身。
appendElm Append 插入到子节点的末尾
prependElm Append 插入到子节点的开头
insertBeforeElm insertBefore 在选中元素前插入新节点
insertAfterElm insertAfter 在选中元素后插入新节点
removeElm 移除 HTML 元素

修改或者获取 HTML 内容相关

方法名 方法说明
getFValue 获取Form Input/Textarea的内容值
setFValue 设置Form Input/Textarea的内容值
getElmAttr 获取元素的特性
setElmAttr 设置元素的特性
batchSetElmAttr 批量设置元素的特性
removeElmAttr 获取元素的特性
getElmProp 获取元素的属性
setElmProp 获取元素的属性
getElmStyle 获取元素的样式
getElmHeight 获取元素的高度
getElmWidth 获取元素的宽度
setElmWidth 设置元素的宽度
setElmHeight 设置元素的高度
setElmStyle 获取元素的样式
getDocW 获取到页面最外层的Document的宽度
getDocH 获取到页面最外层的Document height的高度
getWinW 获取到页面window的宽度
getWinH 获取到页面window的高度
getElmHTML 获取元素的html内容
setElmHTML 修改元素的html内容

修改或者获取 HTML 样式相关

方法名 方法说明
addClass 给元素添加样式
removeClass 给元素移除样式
hasClass 判断元素是否包含某个样式
toggleClass 动态切换元素样式

license

MIT