simplehtmldom.sourceforge

It treats DOM elements in an object-oriented way, and the new iteration has a lot of coverage for non-compliant code. There are also some great functions like you’d see in JavaScript, such as the “find” function, which will return all instances of elements of that tag name.

I’ve used this in a number of tools, testing it on many different types of web pages, and I think it works great.

These are the main features:

• HTML DOM parser written in PHP 5+ that lets you manipulate HTML in a very easy way
• Require PHP 5+
• Supports invalid HTML
• Find tags on an HTML page with selectors just like jQuery
• Extract contents from HTML in a single line

How to get HTML elements:

// Create DOM from URL or file
$html = file_get_html('http://www.example.com/');

// Find all images
foreach($html->find('img') as $element)
       echo $element->src . '<br>';

// Find all links
foreach($html->find('a') as $element)
       echo $element->href . '<br>';

How to modify HTML elements:

// Create DOM from string
$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';

echo $html;

Extract content from HTML:

// Dump contents (without tags) from HTML
echo file_get_html('http://www.google.com/')->plaintext;

Scraping Slashdot:

// Create DOM from URL
$html = file_get_html('http://slashdot.org/');

// Find all article blocks
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);

The.position() method get only “top,left” values relative to the parent, but it doesn’t set any values, so the following code doesn’t work:

$("#mydiv").css({top: 200, left: 200});

Instead, to set the position relative to the parent, we need to set the position:relative of parent and position:absolute of the element, like in the following piece of code:

$("#mydiv").parent().css({position: 'relative'});
$("#mydiv").css({top: '200px', left: '200px', position:'absolute'});

This works because position: absolute; positions relatively to the closest positioned parent (the closest parent with any position property other than the default static).

Just a reminder: set values correctly in jQuery!

In jQuery if the value passed is a string type, it must be followed by ‘px’ (i.e. ’90px’), where if the value is an integer, it will append the px automatically. The width and height properties are more forgiving (either type works). These are the main differences in the jQuery:

var x = "90";
var y = "120"
$(selector).css( { left: x, top: y } ); //does NOT work!
$(selector).css( { left: x + "px", top: y + "px" } ); //does work!

x = 90;
y = 120;
$(selector).css( { left: x, top: y } ); //does work!

Have fun in jQuery!