js-domExtend

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

当前为 2022-04-29 提交的版本,查看 最新版本

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

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