html-utils

utils for DOM manipulation and fetching info of a webpage

当前为 2016-06-02 提交的版本,查看 最新版本

此脚本不应直接安装。它是供其他脚本使用的外部库,要使用该库请加入元指令 // @require https://update.gf.qytechs.cn/scripts/20131/129011/html-utils.js

  1. /**
  2. * Factory that creates customized html-elements
  3. */
  4. var HtmlFactory = function() {
  5. /**
  6. * Adds a HTML child node to a HTML parent node.
  7. * @param {HtmlElement} elParent - The html parent node
  8. * @param {HtmlElement} elChild - The html child Element to be connected to the parent node
  9. * @param {boolean} [asFirstChild] - <code>true</code> to have the child be added as the first child before any other child
  10. */
  11. var connectParentChild = function (elParent, elChild, asFirstChild) {
  12. if (asFirstChild && elParent.hasChildNodes()) {
  13. elParent.insertBefore(elChild, elParent.firstChild);
  14. } else {
  15. elParent.appendChild(elChild);
  16. }
  17. };
  18. /**
  19. * Removes a HTML child element from a HTML parent node.
  20. * @param {HTMLElement} elParent - The parent node
  21. * @param {HTMLElement} elChild - The child node to be removed of the parent element
  22. */
  23. var disconnectParentChild = function (elParent, elChild) {
  24. elParent.removeChild(elChild);
  25. };
  26. /**
  27. * Removes all HTML children from a parent node.
  28. * @param {HTMLElement} elParent - The HTML parent node
  29. */
  30. var removeAllChildren = function (elParent) {
  31. while (elParent.hasChildNodes()) {
  32. elParent.removeChild(elParent.firstChild);
  33. }
  34. };
  35.  
  36. /**
  37. * @name ElType
  38. * @type HtmlElement
  39. * @property {function} addAsLastChild
  40. * @property {function} addAsFirstChild
  41. * @property {function} addAsOnlyChild
  42. */
  43.  
  44. /**
  45. * Creates any type of HTML element.
  46. * @param {string} elType - The type of element to be created
  47. * @param {string} [id] - The value for the <code>id</code> attribute
  48. * @param {string} [className] - The value for the <code>class</code> attribute
  49. * @returns {ElType} The HTML element
  50. */
  51. var createEl = function(elType, id, className) {
  52. var _el = document.createElement(elType);
  53. // add params to html Element properties
  54. var args = { id:id, className:className };
  55. Object.keys(args).forEach(function(prop){
  56. if (args[prop] !== undefined) { _el[prop] = args[prop]; }
  57. });
  58. /**
  59. * Adds this HTML element to a parent node HTML element.
  60. * It will be added as the last child of the node.
  61. * @this createEl
  62. * @param {HTMLElement} elParent - The parent HTML node element
  63. */
  64. _el.addAsLastChild = function(elParent) {
  65. connectParentChild(elParent,_el, false);
  66. };
  67. /**
  68. * Adds this HTML element to a parent node HTML element.
  69. * It will be added as the first child of the node.
  70. * @this createEl
  71. * @param {HTMLElement} elParent - The parent HTML node element
  72. */
  73. _el.addAsFirstChild = function(elParent) {
  74. connectParentChild(elParent,_el, true);
  75. };
  76. /**
  77. * Adds this HTML element to a parent node HTML element.
  78. * All children elements will be removed and replaced with this node.
  79. * @this createEl
  80. * @param {HTMLElement} elParent - The parent HTML node element
  81. */
  82. _el.addAsOnlyChild = function(elParent) {
  83. removeAllChildren(elParent);
  84. connectParentChild(elParent, _el);
  85. };
  86. /**
  87. * Appends Html node elements to this node as their last children.
  88. * @param {...HTMLElement} elements - Html elements to be added as children.
  89. */
  90. _el.appendChildren = function(elements) {
  91. for (var i = 0; i <= arguments.length - 1; i++) {
  92. _el.appendChild(arguments[i]);
  93. }
  94. };
  95. /**
  96. * Adds Html node Elements to this node as their new children.
  97. * All current children elements will be removed and replaced with the new children.
  98. * @param {...HTMLElement} [elements] Html elements to be added as children
  99. * No argument will only remove all children.
  100. */
  101. _el.setChildren = function(elements) {
  102. removeAllChildren(_el);
  103. for (var i = 0; i <= arguments.length - 1; i++) {
  104. connectParentChild(_el, arguments[i]);
  105. }
  106. };
  107. return _el;
  108. };
  109. /**
  110. * Creates a 'Button' HTML element.
  111. * @param {string} [className] - The value for the <code>class</code> attribute
  112. * @param {function} [callback] - The callback function for the <code>onClick<code> event
  113. * @param {string} [text] - The content text of the element (text shown on the button)
  114. * @param {string} [id] - The value for the <code>id</code> attribute
  115. * @returns {ElType|HTMLElement} The 'button' HTML element
  116. */
  117. var createButton = function(className, callback, text, id) {
  118. var elButton = createEl('BUTTON', id, className);
  119. if (typeof callback === 'function') {
  120. elButton.addEventListener('click', callback);
  121. }
  122. if (text !== undefined) {
  123. elButton.appendChild(document.createTextNode(text));
  124. }
  125. return elButton;
  126. };
  127. /**
  128. * Creates a 'div' HTML element.
  129. * @param {string} [className] - The value for the <code>class</code> attribute
  130. * @param {string} [id] - The value for the <code>id</code> attribute
  131. * @returns {ElType|HTMLElement} The 'div' HTML element
  132. */
  133. var createDiv = function(className, id) {
  134. return createEl('div', id, className);
  135. };
  136. /**
  137. * Creates an 'input' HTML element as a field for text.
  138. * @param {number|string} [maxlength] - The maximum number of characters
  139. * @param {string} [text] - The value of the <code>text</code> attribute (content initially shown in the field)
  140. * @param {string} [className] - The value for the <code>class</code> attribute
  141. * @param {string} [id] - The value for the <code>id</code> attribute
  142. * @returns {ElType|HTMLElement} The 'input' HTML element
  143. */
  144. var createInput = function(maxlength, text, className, id) {
  145. var elInputText = createEl('INPUT', id, className);
  146. if (maxlength !== undefined) { elInputText.maxlength = maxlength; }
  147. if (text !== undefined) { elInputText.value = text; }
  148. return elInputText;
  149. };
  150. /**
  151. * Creates an 'input' HTML element as a checkbox.
  152. * @param {function} [callback] - The callback function for the <code>onInput<code> event
  153. * @param {string} [className] - The value for the <code>class</code> attribute
  154. * @param {string} [id] - The value for the <code>id</code> attribute
  155. * @returns {ElType|HTMLElement} The 'input' HTML element of type 'checkbox'
  156. */
  157. var createCheckbox = function(callback, className, id) {
  158. var elInput = createEl('INPUT', id, className);
  159. elInput.type = 'checkbox';
  160. if (typeof callback === 'function') {
  161. elInput.addEventListener('input', callback);
  162. }
  163. return elInput;
  164. };
  165. /**
  166. * Creates a 'label' HTML element.
  167. * @param {string} htmlFor - The value of the <code>for</code> attribute. The id value of another element to bind the label to that element.
  168. * @param {string} [text] - The content text of the element (text shown on the label)
  169. * @param {string} [className] - The value for the <code>class</code> attribute
  170. * @param {string} [id] - The value for the <code>id</code> attribute
  171. * @returns {ElType|HTMLElement} The 'label' HTML element
  172. */
  173. var createLabel = function (htmlFor, text, className, id) {
  174. var elLabel = createEl('LABEL', id, className);
  175. if (text !== undefined) {
  176. elLabel.appendChild(document.createTextNode(text));
  177. }
  178. if (htmlFor !== undefined) { elLabel.htmlFor = htmlFor; }
  179. return elLabel;
  180. };
  181. /**
  182. * Creates a 'TextArea' Html element.
  183. * @param {number|string} [cols] - The number of columns
  184. * @param {number|string} [maxlength] The maximum number of characters
  185. * @param {string} [text] - The value of the <code>text</code> attribute (content initially shown in the field)
  186. * @param {string} [className] - The value for the <code>class</code> attribute
  187. * @param {string} [id] - The value of the <code>id</code> attribute
  188. * @returns {ElType|HTMLElement} The 'textarea' HTML element
  189. */
  190. var createTextArea = function(cols, maxlength, text, className, id) {
  191. var elTextArea = createEl('TEXTAREA', id, className);
  192. if (cols != undefined) { elTextArea.cols = cols; }
  193. if (maxlength !== undefined) { elTextArea.maxlength = maxlength; }
  194. if (text !== undefined) { elTextArea.value = text; }
  195. return elTextArea;
  196. };
  197. /**
  198. * Sorts options of a html 'select' element by a certain property of the option (e.g. text or value).
  199. * @param {HTMLElement} elSelect - The Select Element to be sorted
  200. * @param {string} [propertyName=text] - The Name of the property by wich the option should be compared like <code>value</code> or <code>text</code>.
  201. * @param {boolean} [isOrderDescending] - <code>true</code> to reverse the sort order.
  202. */
  203. var sortSelectBy = function (elSelect, propertyName, isOrderDescending) {
  204. propertyName = propertyName || 'text';
  205. var sortOptions = [];
  206. // options to array
  207. for (var i = 0; i <= elSelect.length - 1; i++) {
  208. var option = elSelect[i];
  209. sortOptions.push({
  210. value:option.value,
  211. text:option.text,
  212. selected:option.selected
  213. });
  214. }
  215. // sort array
  216. sortOptions.sort(function (a, b) {
  217. if (a[propertyName] < b[propertyName]) { return isOrderDescending ? 1 : -1; }
  218. if (a[propertyName] > b[propertyName]) { return isOrderDescending ? -1 : 1; }
  219. return 0;
  220. });
  221. // array to options
  222. sortOptions.forEach(function (opt, i) {
  223. elSelect[i].text = opt.text;
  224. elSelect[i].value = opt.value;
  225. elSelect[i].selected = opt.selected;
  226. });
  227. };
  228. /**
  229. * Creates an 'Option' HTML element which can be added to a HTML select element.
  230. * @param text The value of the <code>text</code> attribute shown in the select dropdown
  231. * @param value THe value of the <code>value</code> attribute
  232. * @returns {HTMLOptionElement}
  233. */
  234. var createOption = function (text, value) {
  235. var elOption = document.createElement('OPTION');
  236. elOption.text = text;
  237. elOption.value = value;
  238. return elOption;
  239. };
  240. /**
  241. * Creates a 'Select' Html element without options.
  242. * @param {string} [className] - The value for the <code>class</code> attribute
  243. * @param {string} [id] - The value of the <code>id</code> attribute
  244. * @returns {ElType|HTMLElement} The 'Select' HTML element
  245. */
  246. var createSelect = function (className, id) {
  247. var elSelect = new createEl('SELECT', id, className);
  248. elSelect.addNewOption = function(text, value) {
  249. var elOption = document.createElement('OPTION');
  250. elOption.text = text;
  251. elOption.value = value;
  252. elSelect.add(elOption);
  253. return elOption;
  254. };
  255. /**
  256. * Sorts options of this select alphabetically by the values of their <code>text</code> attribute.
  257. * @param {boolean} [isOrderDesc] - <code>true</code> to sort options by descending order
  258. */
  259. elSelect.sortOptionsByText = function (isOrderDesc) {
  260. sortSelectBy(elSelect, 'text', isOrderDesc);
  261. };
  262. /**
  263. * Sorts options of this select alphabetically by the values of their <code>value</code> attribute.
  264. * @param {boolean} [isOrderDesc] - <code>true</code> to sort options by descending order
  265. */
  266. elSelect.sortOptionsByValue = function (isOrderDesc) {
  267. sortSelectBy(elSelect, 'value', isOrderDesc);
  268. };
  269. return elSelect;
  270. };
  271. return {
  272. newEl : createEl,
  273. newDiv : createDiv,
  274. newButton : createButton,
  275. newInput : createInput,
  276. newCheckbox : createCheckbox,
  277. newLabel : createLabel,
  278. newTextArea : createTextArea,
  279. newOption : createOption,
  280. newSelect : createSelect
  281. };
  282. }();
  283.  
  284.  
  285. var Page = function() {
  286. /**
  287. * Returns the value of a query parameter of the URI.
  288. * @param {string} paramName - The key (name) to identify the query parameter
  289. * @returns {string|null} The value of the paremeter or <code>null</code> if the uri doesn't define that parameter.
  290. */
  291. var getUriQueryParamValue = function(paramName) {
  292. return decodeURIComponent((new RegExp('[?|&]' + paramName + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search) || [, ""])[1].replace(/\+/g, '%20')) || null;
  293. };
  294.  
  295. /**
  296. * Sets or updates a query parameter in the URI. The Page will be reloaded with the new uri.
  297. * @param {string} paramName - The key (name) to identify the query parameter
  298. * @param {string} paramValue - The new or updated value of the query parameter
  299. */
  300. var setUriQueryParam = function(paramName, paramValue) {
  301. var uri = window.location.href;
  302. var re = new RegExp("([?&])" + paramName + "=.*?(&|$)", "i");
  303. var separator = uri.indexOf('?') !== -1 ? "&" : "?";
  304. if (uri.match(re)) {
  305. uri = uri.replace(re, '$1' + paramName + "=" + paramValue + '$2');
  306. }
  307. else {
  308. uri = uri + separator + paramName + "=" + paramValue;
  309. }
  310. window.location.href = uri;
  311. };
  312. return {
  313. uri : {
  314. getQueryParamValue : getUriQueryParamValue,
  315. setQueryParamValue : setUriQueryParam
  316. }
  317. };
  318. }();

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址