Let’s consider this standard input field:

<input type="text" value="Text." disabled />

Pretty standard stuff. Your web browser will automatically style it a little, but mostly just prevent the user from editing without any real visual hints. But let’s add some basic CSS to convey the state of the input, and to standardise it across our site and on most platforms. If we add the following CSS:

input[disabled] {
	border: 1px solid #999;
	background-color: #ddd;
}

But wait – our demo uses inline styles, but your browser might not have just styled that properly if we used a full CSS declaration. We don’t set a value for the disabled attribute – it’s a minimized attribute. To get IE to play nicely with it (and for XHTML), we’ll have to set the value to “disabled”:

watch the wrestler in HD

<input type="text" value="Text." disabled="disabled" />

If possible, just for total compatibility, we can also add a “disabled” class that IE6 will respect and apply styles for correctly.

<input type="text" value="Text." disabled="disabled" class="disabled" />

We can then change the CSS selector we’re using:

input[disabled="disabled"], input.disabled

And we’re done! This works across every major browser – IE6+ and FF1.0+ tested, and Safari 3 / Opera 9.5 should be fine as well. The Sitepoint CSS reference has further information on compatibility, available here.

Finally, if you want to see how Firefox styles disabled fields by default, load up your resource://gre/res/forms.css file (you’ll have to copy and paste it to your address bar). There are a number of lengthy selectors with just a few rules, but here’s the big one, way down the bottom:

button[disabled]:active, button[disabled],
input[type="reset"][disabled]:active,
input[type="reset"][disabled],
input[type="button"][disabled]:active,
input[type="button"][disabled],
select[disabled] > input[type="button"],
select[disabled] > input[type="button"]:active,
input[type="submit"][disabled]:active,
input[type="submit"][disabled] {
  padding: 0px 6px 0px 6px;
  border: 2px outset ButtonFace;
  color: GrayText;
  cursor: inherit;
}

GrayText is actually a system color – it’s defined by the CSS 2.1 specification and supported on and off in various browsers. These “special” color keywords are supposed to match the local system styles – on a Windows machine, for instance, Firefox would use the color: GrayText rule to style text in disabled fields with the same color that the local Windows system uses. A list of options is available on the CSS reference as well.

The Simple HTML DOM Parser is implemented as a simple PHP class and a few helper functions. It supports CSS selector style screen scraping (such as in jQuery), can handle invalid HTML, and even provides a familiar interface to manipulate a DOM.

Here’s a sample of simplehtmldom in action:

$html = file_get_dom('http://www.google.com/');
 
foreach($html->find('a') as $element)
    echo $element->href;

This snippet is fairly self explanatory – file_get_dom() is a simple helper function in the library that fetches the page and constructs a new simplehtmldom object around it. Once the object is available, we can easily use simple CSS selectors to find our elements – in this case, anchors – and iterate over them just as we would with PHP 5’s standard DOM classes. (The equivalent code with the standard DOM classes is twice as long.)

But the library doesn’t stop there – as well as traversing the DOM and extracting information, you can also alter it. Consider this snippet:

$html = str_get_html('
<div id="hello">Hello</div>
<div id="world">World</div>
 
');
 
$html->find('div', 1)->class = 'bar';
 
$html->find('div[id=hello]', 0)->innertext = 'foo';

The library supports many DOM-style approaches for manipulation, from exposing real attributes as shown here, to a few helper methods. It also includes other methods to traverse the current node – children(), parent(), first_child() and so on.

Real scraping? Easy. Here’s their Slashdot sample:

$html = file_get_html('http://slashdot.org/');
 
foreach($html->find('div.article') as $article) {
    $item['title']     = $article->find('div.title', 0)->plaintext;
    $item['intro']    = $article->find('div.intro', 0)->plaintext;
    $item['details'] = $article->find('div.details', 0)->plaintext;
    $articles[] = $item;
}
 
print_r($articles);

And finally, there’s always a simple save mechanism:

$html->save('altered-dom.html');

Ready to get started? Head over to the project website, online documentation or the project page on SourceForge.