☰

js-domExtend

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

当前为 2022-04-26 提交的版本，查看 最新版本。

此脚本不应直接安装。它是供其他脚本使用的外部库，要使用该库请加入元指令 // @require https://update.cn-greasyfork.org/scripts/444044/1044371/js-domExtend.js 

  1. /*
  2. *author:tutu辣么可爱
  3. *day:2022.4.27 GMT+0800 (中国标准时间)
  4. *description:原生js增强插件，将部分原生dom对象方法模仿jQuery进行二次封装，便于使用
  5. *
  6. *function $ele(dom, dom2)
  7. *parameter0 dom:需要创建的dom对象的html字符串或者选择器字符串
  8. *parameter1 dom2:选择器模式时生效，选择器的父节点，默认值document
  9. *note:本质是对createElement、querySelectorAll的二次封装，使用体验类似jQuery的$()方法
  10. *
  11. *function $eleFn(dom, dom2)
  12. *parameter0 dom:选择器字符串
  13. *parameter1 dom2:选择器的父节点，默认值document
  14. *note:返回一组方法，用于对需要选择的dom对象进行监控，具体用法见$eleFn.listen和$eleFn.ready部分
  15. *
  16. *function $eleFn.listen(callback, interval)
  17. *parameter0 callback:对dom对象监控时循环执行的回调方法
  18. *parameter1 interval:dom对象的监控时间间隔，默认值500
  19. *note:返回定时器ID。本质是调用setInterval不断执行$ele方法检测dom对象是否存在
  20. *
  21. *function $eleFn.ready(callback, interval)
  22. *parameter0 callback:dom对象检测到存在时的回调方法
  23. *parameter1 timeout:dom对象检测存在的超时时长
  24. *note:返回定时器ID。本质是调用$eleFn.listen检测对象是否存在，setTimeout控制超时时长
  25. *
  26. *function DOM.attr(key, val)
  27. *parameter0 key:dom对象属性名
  28. *parameter1 val:dom对象属性值
  29. *note:没有val则返回对应属性名的值；有val则进行属性设置，返回dom对象本身。本质是对getAttribute、setAttribute、removeAttribute的二次封装，使用体验类似jQuery的$.attr方法
  30. *
  31. *function DOM.css(key, val)
  32. *parameter0 key:dom对象css样式属性名
  33. *parameter1 val:dom对象css样式属性值
  34. *note:没有val则返回对应属性名的值；有val则进行属性设置，返回dom对象本身。本质是对getComputedStyle、DOM.style.setProperty的二次封装，使用体验类似jQuery的$.css方法
  35. *
  36. *function DOM.hide()
  37. *note:调用DOM.css隐藏dom对象，返回dom对象本身。本质是将dom对象样式display设置为none，使用体验类似jQuery的$.hide方法。DOM.hide支持nodeList对象
  38. *
  39. *function DOM.show()
  40. *note:调用DOM.css显示dom对象，返回dom对象本身。本质是将dom对象样式display还原为原属性值，使用体验类似jQuery的$.show方法。DOM.show支持nodeList对象
  41. *
  42. *function DOM.insert(dom, position)
  43. *parameter0 dom:选择器字符串、dom对象或多个dom对象组成的Array数组
  44. *parameter1 position:插入位置，默认值end
  45. *note:返回值为dom节点本身。position为start时，插入到DOM父节点开头；position为end时，插入到DOM父节点结尾；position为before时，插入到dom节点前面；position为after时，插入到dom节点后面。本质是对insertBefore、append的二次封装
  46. *
  47. *function DOM.replace(dom)
  48. *parameter dom:选择器字符串、dom对象或多个dom对象组成的Array数组
  49. *note:返回值为新dom节点。本质是调用DOM.insert后将原dom节点remove
  50. *
  51. */
  52. function $ele(dom, dom2 = document) {
  53. 	switch (dom.slice(0, 1)) {
  54. 		case "<":
  55. 			dom2 = document.createElement("div");
  56. 			dom2.innerHTML = dom;
  57. 			dom2 = dom2.childNodes;
  58. 			break;
  59. 		default:
  60. 			dom2 = dom2.querySelectorAll(dom);
  61. 			break;
  62. 	}
  63. 	return dom2.length > 1 ? dom2 : dom2[0]
  64. }
  65. function $eleFn(dom, dom2 = document) {
  66. 	return {
  67. 		data: [dom, dom2],
  68. 		listen: function(callback, interval = 500) {
  69. 			var that = this;
  70. 			return setInterval(() => {
  71. 				if ($ele(that.data[0], that.data[1])) {
  72. 					callback();
  73. 				}
  74. 			}, interval)
  75. 		},
  76. 		ready: function(callback, timeout = 3000) {
  77. 			var timer = this.listen(() => {
  78. 				clearInterval(timer);
  79. 				callback();
  80. 			})
  81. 			setTimeout(() => {
  82. 				clearInterval(timer);
  83. 			}, timeout)
  84. 			return timer
  85. 		}
  86. 	}
  87. }
  88.  
  89. HTMLElement.prototype.attr = function(key, val) {
  90. 	if (typeof key === "string") {
  91. 		if (/string|boolean/.test(typeof val)) {
  92. 			if (!val && val !== false) {
  93. 				this.removeAttribute(key);
  94. 			} else {
  95. 				this.setAttribute(key, val);
  96. 			}
  97. 			return this;
  98. 		} else {
  99. 			return this.getAttribute(key);
  100. 		}
  101. 	}
  102. }
  103. HTMLElement.prototype.css = function(key, val) {
  104. 	if (typeof key === "string") {
  105. 		if (/string|boolean/.test(typeof val)) {
  106. 			this.style.setProperty(key, val);
  107. 		} else if (!val) {
  108. 			return getComputedStyle(this)[key];
  109. 		}
  110. 	} else {
  111. 		for (let i in key) {
  112. 			this.style.setProperty(i, key[i]);
  113. 		}
  114. 	}
  115. 	if (this.style === "") {
  116. 		this.attr("style", "")
  117. 	}
  118. 	return this;
  119. }
  120. HTMLElement.prototype.hide = function() {
  121. 	this.setAttribute("display_backup", this.css("display"));
  122. 	this.css("display", "none")
  123. 	return this;
  124. }
  125. HTMLElement.prototype.show = function() {
  126. 	var backup = this.attr("display_backup") ? this.attr("display_backup") : "";
  127. 	this.css("display", backup !== "none" ? backup : "");
  128. 	return this;
  129. }
  130. HTMLElement.prototype.insert = function(dom, position = "end") {
  131. 	dom = typeof dom === "string" ? $ele(dom) : (Array.isArray(dom) ? dom : [dom]);
  132. 	switch (position) {
  133. 		case "start":
  134. 			Array.from(dom).reverse().forEach((e, i) => {
  135. 				this.insertBefore(e, this.firstChild);
  136. 			})
  137. 			break;
  138. 		case "end":
  139. 			dom.forEach((e, i) => {
  140. 				this.append(e);
  141. 			})
  142. 			break;
  143. 		case "before":
  144. 			Array.from(dom).reverse().forEach((e, i) => {
  145. 				this.parentElement.insertBefore(e, this);
  146. 			})
  147. 			break;
  148. 		case "after":
  149. 			if (this.parentElement.lastChild === this) {
  150. 				dom.forEach((e, i) => {
  151. 					this.append(e);
  152. 				})
  153. 			} else {
  154. 				let next = this.nextSilbing;
  155. 				Array.from(dom).reverse().forEach((e, i) => {
  156. 					this.parentElement.insertBefore(e, next);
  157. 				})
  158. 			}
  159. 			break;
  160. 	}
  161. 	return this;
  162. }
  163. HTMLElement.prototype.replace = function(dom) {
  164. 	dom = this.insert(dom, "before");
  165. 	this.remove();
  166. 	return dom;
  167. }
  168. NodeList.prototype.hide = function() {
  169. 	this.forEach((e, i) => {
  170. 		e.hide();
  171. 	})
  172. }
  173. NodeList.prototype.show = function() {
  174. 	this.forEach((e, i) => {
  175. 		e.show();
  176. 	})
  177. }