☰

js-domExtend

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

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

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

  1. // ==UserScript==
  2. // @name         js-domExtend
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.3
  5. // @description  轻量级原生js增强插件，将部分原生dom对象方法模仿jQuery进行二次封装，便于使用
  6. // @author       tutu辣么可爱
  7. // @dayr         2022.4.28 GMT+0800 (中国标准时间)
  8. // @license      MIT License
  9. // @note         相关参考信息请前往greasyfork仓库或github仓库
  10. // @note         greasyfork仓库:https://greasyfork.org/zh-CN/scripts/444044-js-domextend
  11. // @note         github仓库:https://github.com/IcedWatermelonJuice/js-domExtend
  12. // ==/UserScript==
  13.  
  14. function $ele(dom, dom2 = document) {
  15. 	switch (dom.slice(0, 1)) {
  16. 		case "<":
  17. 			dom2 = document.createElement("div");
  18. 			dom2.innerHTML = dom;
  19. 			dom2 = dom2.childNodes;
  20. 			break;
  21. 		default:
  22. 			dom2 = dom2.querySelectorAll(dom);
  23. 			break;
  24. 	}
  25. 	return dom2.length > 1 ? dom2 : dom2[0]
  26. }
  27.  
  28. function $eleFn(dom, dom2 = document) {
  29. 	return {
  30. 		data: [dom, dom2],
  31. 		listen: function(callback, interval = 500) {
  32. 			var that = this;
  33. 			return setInterval(() => {
  34. 				if ($ele(that.data[0], that.data[1])) {
  35. 					callback();
  36. 				}
  37. 			}, interval)
  38. 		},
  39. 		ready: function(callback, timeout = 3000) {
  40. 			var timer = this.listen(() => {
  41. 				clearInterval(timer);
  42. 				callback();
  43. 			})
  44. 			setTimeout(() => {
  45. 				clearInterval(timer);
  46. 			}, timeout)
  47. 			return timer
  48. 		}
  49. 	}
  50. }
  51.  
  52. HTMLElement.prototype.attr = function(key, val) {
  53. 	if (typeof key === "string") {
  54. 		if (/string|boolean/.test(typeof val)) {
  55. 			if (!val && val !== false) {
  56. 				this.removeAttribute(key);
  57. 			} else {
  58. 				this.setAttribute(key, val);
  59. 			}
  60. 			return this;
  61. 		} else {
  62. 			return this.getAttribute(key);
  63. 		}
  64. 	}
  65. }
  66. HTMLElement.prototype.css = function(key, val) {
  67. 	if (typeof key === "string") {
  68. 		if (/string|boolean/.test(typeof val)) {
  69. 			this.style.setProperty(key, val);
  70. 		} else if (!val) {
  71. 			return getComputedStyle(this)[key];
  72. 		}
  73. 	} else {
  74. 		for (let i in key) {
  75. 			this.style.setProperty(i, key[i]);
  76. 		}
  77. 	}
  78. 	if (this.style === "") {
  79. 		this.attr("style", "")
  80. 	}
  81. 	return this;
  82. }
  83. HTMLElement.prototype.hide = function() {
  84. 	this.setAttribute("display_backup", this.css("display"));
  85. 	this.css("display", "none")
  86. 	return this;
  87. }
  88. HTMLElement.prototype.show = function() {
  89. 	var backup = this.attr("display_backup") ? this.attr("display_backup") : "";
  90. 	this.css("display", backup !== "none" ? backup : "");
  91. 	return this;
  92. }
  93. HTMLElement.prototype.insert = function(dom, position = "end", reNew = false) {
  94. 	dom = typeof dom === "string" ? $ele(dom) : dom;
  95. 	dom = (Array.isArray(dom) || dom instanceof NodeList) ? dom : [dom];
  96. 	switch (position) {
  97. 		case "start":
  98. 			Array.from(dom).reverse().forEach((e, i) => {
  99. 				this.insertBefore(e, this.firstChild);
  100. 			})
  101. 			break;
  102. 		case "end":
  103. 			dom.forEach((e, i) => {
  104. 				this.append(e);
  105. 			})
  106. 			break;
  107. 		case "before":
  108. 			Array.from(dom).reverse().forEach((e, i) => {
  109. 				this.parentElement.insertBefore(e, this);
  110. 			})
  111. 			break;
  112. 		case "after":
  113. 			if (this.parentElement.lastChild === this) {
  114. 				dom.forEach((e, i) => {
  115. 					this.append(e);
  116. 				})
  117. 			} else {
  118. 				let next = this.nextSilbing;
  119. 				Array.from(dom).reverse().forEach((e, i) => {
  120. 					this.parentElement.insertBefore(e, next);
  121. 				})
  122. 			}
  123. 			break;
  124. 	}
  125. 	if (reNew) {
  126. 		return dom.length > 1 ? dom : dom[0]
  127. 	} else {
  128. 		return this
  129. 	}
  130. }
  131. HTMLElement.prototype.replace = function(dom) {
  132. 	dom = this.insert(dom, "before", true);
  133. 	this.remove();
  134. 	return dom;
  135. }
  136. HTMLElement.prototype.findNode = function(nodeName) {
  137. 	var nodeArray = [];
  138. 	if (!this.firstChild) {
  139. 		return null
  140. 	}
  141. 	this.childNodes.forEach((e, i) => {
  142. 		if (new RegExp(`^${nodeName}$`, "i").test(e.nodeName)) {
  143. 			nodeArray.push(e);
  144. 		} else {
  145. 			let temp = e.findNode(nodeName);
  146. 			nodeArray = nodeArray.concat(Array.isArray(temp) ? temp : []);
  147. 		}
  148. 	})
  149. 	return nodeArray[0] ? nodeArray : null
  150. }
  151. HTMLElement.prototype.eleText = function(val, remainDom = false) {
  152. 	if (typeof val !== "string") {
  153. 		return this.innerText
  154. 	} else {
  155. 		if (remainDom) {
  156. 			var textNode = this.findNode("#text");
  157. 			if (Array.isArray(textNode)) {
  158. 				textNode.forEach((e, i) => {
  159. 					if (val === "") {
  160. 						e.nodeValue = "";
  161. 					} else {
  162. 						let textLength = i >= (textNode.length - 1) ? val.length : e.length;
  163. 						e.nodeValue = val.slice(0, textLength);
  164. 						val = val.slice(textLength);
  165. 					}
  166. 				})
  167. 			}
  168. 		} else {
  169. 			this.innerText = val;
  170. 		}
  171. 		return this
  172. 	}
  173. }
  174.  
  175. NodeList.prototype.attr = function(key, val) {
  176. 	this.forEach((e, i) => {
  177. 		e.attr(key, val)
  178. 	})
  179. }
  180. NodeList.prototype.css = function(key, val) {
  181. 	this.forEach((e, i) => {
  182. 		e.css(key, val)
  183. 	})
  184. }
  185. NodeList.prototype.hide = function() {
  186. 	this.forEach((e, i) => {
  187. 		e.hide();
  188. 	})
  189. }
  190. NodeList.prototype.show = function() {
  191. 	this.forEach((e, i) => {
  192. 		e.show();
  193. 	})
  194. }
  195. NodeList.prototype.findNode = function(nodeName) {
  196. 	var nodeArray = []
  197. 	this.forEach((e, i) => {
  198. 		let temp = e.findNode(nodeName);
  199. 		nodeArray = nodeArray.concat(Array.isArray(temp) ? temp : []);
  200. 	})
  201. 	return nodeArray[0] ? nodeArray : null
  202. }
  203. NodeList.prototype.eleText = function(val, remainDom = false) {
  204. 	var res = "";
  205. 	this.forEach((e, i) => {
  206. 		let temp = e.eleText(val, remainDom)
  207. 		res += typeof temp === "string" ? temp : "";
  208. 	})
  209. 	return typeof val === "string" ? this : res
  210. }