☰

js-domExtend

轻量级原生js增强插件，将部分原生dom对象方法模仿jQuery进行二次封装，便于使用

This script should not be not be installed directly. It is a library for other scripts to include with the meta directive // @require https://update.greasyfork.org/scripts/444044/1121535/js-domExtend.js

Author
tutu辣么可爱
Version
1.7.2
Created
2022-04-26
Updated
2022-11-26
License
MIT

js-domExtend

作者 ( author ) tutu辣么可爱(greasyfork)
IcedWatermelonJuice(github)
描述 ( description ) 轻量级原生js增强插件
将部分原生dom对象方法模仿jQuery进行二次封装，便于使用
最后更新时间 ( day ) 2022.5.27 GMT+0800 (中国标准时间)
最新版本 ( version ) 1.7.2
开源许可 ( license ) MIT

参考DEMO

$domExtendJS();//初始化dom对象方法，全局只需且必须使用一次
var demo=$ele("#demo");//获取dom对象，此时等价于document.querySelector("#demo")
demo.attr("test","test_attr");//设置dom对象属性
demo.data("test","test_data");//设置dom对象私有data属性，等价于dom设置一个不可见的“data-test=test_data”属性
var demoList=$ele(".demo")//获取nodeList对象，此时等价于document.querySelectorAll(".demo")
demoList.eleText("demo-eleText");//改变nodeList对象里每一个dom对象的文本内容

DOM对象方法

1.function DOM.attr(key, val)

  • parameter0 key:dom对象属性名
  • parameter1 val:dom对象属性值
  • return:对应属性名的值或者原dom对象本身
  • note:没有val则返回对应属性名的值；有val则进行属性设置，返回dom对象本身，支持nodeList对象。本质是对getAttribute、setAttribute、removeAttribute的二次封装，使用体验类似jQuery的$.attr方法

2.function DOM.data(key, val)

  • parameter0 key:dom对象私有data属性名
  • parameter1 val:dom对象私有data属性值
  • return:对应私有data属性名的值或者原dom对象本身
  • note:没有val则返回对应私有data属性名的值；有val则进行私有data属性设置，返回dom对象本身，支持nodeList对象。本质是对getAttribute、setAttribute、removeAttribute的二次封装，使用体验类似jQuery的$.data方法

3.function DOM.css(key, val)

  • parameter0 key:dom对象css样式属性名
  • parameter1 val:dom对象css样式属性值
  • return:对应属性名的值或者原dom对象本身
  • note:没有val则返回对应属性名的值；有val则进行属性设置，返回dom对象本身，支持nodeList对象。本质是对getComputedStyle、DOM.style.setProperty的二次封装，使用体验类似jQuery的$.css方法

4.function DOM.hide()

  • return:原dom对象本身
  • note:调用DOM.css隐藏dom对象，支持nodeList对象。本质是将dom对象样式display设置为none，使用体验类似jQuery的$.hide方法

5.function DOM.show()

  • return:原dom对象本身
  • note:调用DOM.css显示dom对象，支持nodeList对象。本质是将dom对象样式display还原为原属性值，使用体验类似jQuery的$.show方法

6.function DOM.insert(dom, position, reNew)

  • parameter0 dom:选择器字符串、dom对象或多个dom对象组成的Array数组
  • parameter1 position:插入位置，默认值end
  • parameter2 reNew:返回值类型。布尔型可选参数，默认值false。true表示返回插入的dom对象、nodeList对象或dom对象构成的Array数组; false表示返回原dom对象本身
  • return:原dom对象本身、插入的新dom对象、新nodeList对象或新dom对象构成的Array数组
  • note:position为start时，插入到父节点（原dom对象）开头；position为end时，插入到父节点（原dom对象）结尾；position为before时，插入到dom节点（原dom对象）前面；position为after时，插入到dom节点（原dom对象）后面。本质是对insertBefore、append的二次封装

7.function DOM.replace(dom)

  • parameter dom:选择器字符串、dom对象或多个dom对象组成的Array数组
  • return:插入的dom对象、nodeList对象或插入的dom对象构成的Array数组
  • note:本质是调用DOM.insert后将原dom节点remove

8.function DOM.findNode(nodeName)

  • parameter nodeName:node节点名
  • return:dom对象或dom/node对象组成的Array数组
  • note:支持nodeList对象。本质是通过循环遍历判断dom节点的nodeName

9.function DOM.eleText(val, remainDom)

  • parameter0 val:需要更改的文本字符串
  • parameter1 remainDom:是否保留原有的dom结构。布尔型可选参数，默认值false。true表示更改text时不影响原有的dom结构; false表示更改text时会影响原有的dom结构
  • return:原dom对象、nodeList对象或其文本字符串
  • note:支持nodeList对象。当val不为字符串时，调用innerText返回文本字符串；当val为字符串时，若remainDom为false，直接调用innerText更改文本，remainDom为true时通过DOM.findNode寻找#text文本节点，仅对文本节点进行更改。remainDom为false时，使用体验类似jQuery的$.text方法

10.function DOM.eleHTML(val)

  • parameter0 val:需要更改的html字符串
  • return:原dom对象、nodeList对象或其html字符串
  • note:支持nodeList对象。当val不为字符串时，调用innerHTML返回html字符串；当val为字符串时，直接调用innerHTML更改html，使用体验类似jQuery的$.html方法

11.function DOM.eleVal(val)

  • parameter0 val:需要更改的dom对象的value值
  • return:原dom对象或其value值
  • note:当val不为字符串时，返回value；当val为字符串时，更改value值，使用体验类似jQuery的$.val方法

其他方法

1.function $ele(dom, dom2)

  • parameter0 dom:需要创建的dom对象的html字符串或者选择器字符串
  • parameter1 dom2:选择器模式时生效，选择器的父节点，默认值document
  • return:dom对象或nodeList对象
  • note:本质是对createElement、querySelectorAll的二次封装，使用体验类似jQuery的$()方法

2.function $eleFn(dom, dom2)

  • parameter0 dom:选择器字符串
  • parameter1 dom2:选择器的父节点，默认值document
  • return:一组方法
  • note:选择dom对象并执行一些特殊方法。具体用法见$eleFn.listen和$eleFn.ready部分

(1) function $eleFn.listen(callback, interval)

  • parameter0 callback:对dom对象监控时，循环执行的回调方法
  • parameter1 interval:dom对象的监控时间间隔，默认值500
  • return:定时器ID
  • 本质是调用setInterval不断执行$ele方法检测dom对象是否存在

(2) function $eleFn.ready(callback, interval)

  • parameter0 callback:dom对象检测到存在时的回调方法
  • parameter1 timeout:dom对象存在性检测的超时时长
  • return:定时器ID
  • note:本质是调用$eleFn.listen检测对象是否存在，setTimeout控制超时时长

(3) function $eleFn.copy(string)

  • parameter0 string:需要复制到剪贴板的字符串
  • return:boolean值,execCommand copy命令执行情况
  • note:本质是创建一个透明度为0的textarea并赋值，通过execCommand中的copy命令复制到剪贴板

(4) function $eleFn.ajax(options)

  • parameter0 options:JSON对象，ajax设置项：method(默认ge),url(必须),timeout(默认10s),params(默认null，需要附带发送的信息),success(默认空方法),error(默认空方法)
  • return:XMLHttpRequest对象
  • note:本质是对XMLHttpRequest对象以及方法的二次封装，使用体验类似jQuery的$.ajax

3.function $domExtendJS()

  • note:初始化dom对象方法，防止在油猴脚本中调用时出现错误