Difference between revisions of "Code snippets"

From GreaseSpot Wiki
Jump to navigationJump to search
m (→‎XPath helper: remove example that won't work (prototype.js based code?))
(Restored XPath example, works fine. See Talk page.)
Line 23: Line 23:
   return arr;
   return arr;
  }
  }
Example usage:
var i, paragraphs = $x("//p");
paragraphs.forEach(function(paragraph) {  // Loop over every paragraph
  paragraph.innerHTML = "Halloa!";
});


= Serialize/deserialize for GM_getValue =
= Serialize/deserialize for GM_getValue =

Revision as of 17:15, 25 March 2007

Shortcut to document.getElementById

function $(id) {
  document.getElementById(id);
}

Example usage:

$("header").innerHTML = "Halloa!";

XPath helper

Run a particular XPath expression p against the context node context (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:

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) {
  var parent = node.parentNode;
  return node.nextSibling ? parent.insertBefore(newNode, node.nextSibling) : parent.appendChild(newNode);
}

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 url using HTTP GET, then calls the function cb 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);