|
|
| (143 intermediate revisions by 36 users not shown) |
| Line 1: |
Line 1: |
| __TOC__
| | #REDIRECT [[:Category:Coding Tips]] |
| | |
| = Shortcut to document.getElementById =
| |
| | |
| function $(id) {
| |
| return document.getElementById(id);
| |
| }
| |
| | |
| Example usage:
| |
| | |
| $("header").innerHTML = "Halloa!";
| |
| | |
| = Shortcut to document.createElement with attributes =
| |
| | |
| Creates a new element with the given attribute list
| |
| | |
| function createElement(type, attributes) {
| |
| var element = document.createElement(type);
| |
| if(attributes != null) {
| |
| for(var i = 0; i < attributes.length; i++) {
| |
| element.setAttribute(attributes[i][0], attributes[i][1]);
| |
| }
| |
| }
| |
| return element;
| |
| }
| |
| | |
| Example usage:
| |
| | |
| var link = createElement('link', [['rel', 'stylesheet'], ['type', 'text/css'], ['href', basedir + 'style.css']]);
| |
| | |
| = Advanced createElement for creating hierarchies of elements =
| |
| Creates an element with attributes as well as child elements with their own attributes and children. Arguments should be in the form of the following hash:
| |
| createEl({n: nodename, a: {attr1: val, attr2: val}, c: [child1, child2], evl: {type: eventlistener_type, f: eventlistener_function, bubble: bool}}, appendTo)
| |
| | |
| | |
| function createEl(elObj, parent) {
| |
| var el;
| |
| if (typeof elObj == 'string') {
| |
| el = document.createTextNode(elObj);
| |
| }
| |
| else {
| |
| el = document.createElement(elObj.n);
| |
| if (elObj.a) {
| |
| attributes = elObj.a;
| |
| for (var key in attributes) {
| |
| if (key.charAt(0) == '@')
| |
| el.setAttribute(key.substring(1), attributes[key]);
| |
| else
| |
| el[key] = attributes[key];
| |
| }
| |
| }
| |
| if (elObj.evl) {
| |
| el.addEventListener(elObj.evl.type, elObj.evl.f, elObj.evl.bubble);
| |
| }
| |
| if (elObj.c) {
| |
| elObj.c.forEach(function (v, i, a) { createEl(v, el); });
| |
| }
| |
| }
| |
| if (parent)
| |
| parent.appendChild(el);
| |
| return el;
| |
| }
| |
| | |
| | |
| Example usage:
| |
| | |
| createEl({n: 'ol', a: {'@class': 'some_list', '@id': 'my_list'}, c: [
| |
| {n: 'li', a: {textContent: 'first point'}, evl: {type: 'click', f: function() {alert('first point');}, bubble: true}},
| |
| {n: 'li', a: {textContent: 'second point'}},
| |
| {n: 'li', a: {textContent: 'third point'}}
| |
| ]}, document.body);
| |
| | |
| = XPath helper =
| |
| | |
| Run a particular [[XPath]] expression <code>p</code> against the context node <code>context</code> (or the document, if not provided).
| |
| | |
| Returns the results as an array.
| |
| | |
| function $x(p, context) {
| |
| if (!context) context = document;
| |
| var i, arr = [], xpr = document.evaluate(p, context, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
| |
| for (i = 0; item = xpr.snapshotItem(i); i++) arr.push(item);
| |
| return arr;
| |
| }
| |
| | |
| Example usage (with [http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Objects:Array:forEach Array.forEach]):
| |
| | |
| var i, paragraphs = $x("//p");
| |
| paragraphs.forEach(function(paragraph) { // Loop over every paragraph
| |
| paragraph.innerHTML = "Halloa!";
| |
| });
| |
| | |
| = Serialize/deserialize for GM_getValue =
| |
| | |
| Used to store and retrieve multiple values (typically as a serialized hash) in a single [[GM_getValue]] slot.
| |
| | |
| function deserialize(name, def) {
| |
| return eval(GM_getValue(name, (def || '({})')));
| |
| }
| |
|
| |
| function serialize(name, val) {
| |
| GM_setValue(name, uneval(val));
| |
| }
| |
| | |
| Example usage:
| |
| | |
| var settings = {a: 1, b: 2, c: 3};
| |
| serialize('test', settings);
| |
| var _settings = deserialize('test');
| |
| // now "settings == _settings" should be true
| |
| | |
| = DOM node juggling =
| |
| | |
| == Remove DOM node ==
| |
| | |
| function remove(element) {
| |
| if (element)
| |
| element.parentNode.removeChild(element);
| |
| }
| |
| | |
| == Insert node after node ==
| |
| | |
| function insertAfter(newNode, node) {
| |
| return node.parentNode.insertBefore(newNode, node.nextSibling);
| |
| }
| |
| | |
| This works because even if <i>node</i> is the last node, <i>nextSibling</i> returns <i>null</i> so <i>insertBefore</i> puts the new node at the end.
| |
| | |
| Example usage:
| |
| | |
| var link = document.getElementById("the_link");
| |
| var icon = document.createElement("img");
| |
| icon.src = "…";
| |
| insertAfter(icon, link);
| |
| | |
| = GET an URL with callback function =
| |
| | |
| Retrieves <code>url</code> using HTTP GET, then calls the function <code>cb</code> with the response text as its single argument.
| |
| | |
| function get(url, cb) {
| |
| GM_xmlhttpRequest({
| |
| method: "GET",
| |
| url: url,
| |
| onload: function(xhr) { cb(xhr.responseText); }
| |
| });
| |
| }
| |
| | |
| Example usage:
| |
| | |
| function inform(text) {
| |
| alert("The HTML of the page: " + text);
| |
| }
| |
|
| |
| get("http://www.google.com", inform);
| |
