Use DOM methods to manipulate the content of a web page.
Since most user scripts center around adding or removing content from a web page, let's quickly review the standard DOM methods for manipulating content.
The following code adds a new element to the end of the page. The element will appear at the bottom of the page, unless you style it with CSS to position it somewhere else [Hack #7] :
var elmNewContent = document.createElement('div'); document.body.appendChild(elmNewContent)
You can also remove elements from a page. Removed elements disappear from the page (obviously), and any content after them collapses to fill the space the elements occupied. The following code finds the element with id="ads"
and removes it:
var elmDeleted = document.getElementById("ads"); elmDeleted.parentNode.removeChild(elmDeleted);
Tip
If all you want to do is remove ads, it's probably easier to install the AdBlock extension than to write your own user script. You can download AdBlock at http://adblock.mozdev.org.
Many user scripts insert content into a page, rather than appending it to the end of the page. The following code creates a link to http://www.example.com and inserts it immediately before the element with id="foo"
:
var elmNewContent = document.createElement('a'); elmNewContent.href = 'http://www.example.com/'; elmNewContent.appendChild(document.createTextNode('click here')); var elmFoo = document.getElementById('foo'); elmFoo.parentNode.insertBefore(elmNewContent, elmFoo);
You can also insert content after an existing element, by using the nextSibling
property:
elmFoo.parentNode.insertBefore(elmNewContent, elmFoo.nextSibling);
Tip
Inserting new content before elmFoo.nextSibling
will work even if elmFoo
is the last child of its parent (i.e., it has no next sibling). In this case, elmFoo.nextSibling
will return null
, and the insertBefore
function will simply append the new content after all other siblings. In other words, this example code will always work, even when it seems like it shouldn't.
You can replace entire chunks of a page in one shot by using the replaceChild
method. The following code replaces the element with id="extra"
with content that we create on the fly:
var elmNewContent = document.createElement('p'); elmNewContent.appendChild(document.createTextNode('Replaced!')); var elmExtra = document.getElementById('extra'); elmExtra.parentNode.replaceChild(elmNewContent, elmExtra);
As you can see from the previous few examples, the process of creating new content can be arduous. Create an element, append some text, set individual attributes…bah. There is an easier way. It's not a W3C-approved DOM property, but all major browsers support the innerHTML
property for getting or setting HTML content as a string. The following code accomplishes the same thing as the previous example:
var elmExtra = document.getElementById('extra'); elmReplaced.innerHTML = '<p>Replaced!</p>';
The HTML you set with the innerHTML
property can be as complex as you like. Firefox will parse it and insert it into the DOM tree, just as if you had created each element and inserted it with standard DOM methods.
Modifying a single attribute is simple. Each element is an object in JavaScript, and each attribute is reflected by a corresponding property. The following code finds the link with id="somelink"
and changes its href
property to link to a different URL:
var elmLink = document.getElementById('somelink'); elmLink.href = 'http://www.oreilly.com/';
You can accomplish the same thing with the setAttribute
method:
elmLink.setAttribute('href', 'http://www.oreilly.com/')
This is occasionally useful, if you are setting an attribute whose name you don't know in advance.
You can also remove an attribute entirely with the removeAttribute
method:
elmLink.removeAttribute('href');
Tip
See "Make Pop-up Titles Prettier" [Hack #28] for an example of why this might be useful.
If you remove the href
attribute from a link, it will still be an <a>
element, but it will cease to be a link. If the link has an id
or name
attribute, it will still be a page anchor, but you will no longer be able to click it to follow the link.
Tip
http://www.quirksmode.org is a great reference for browser DOM support.
Get Greasemonkey Hacks now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.