PHP - DOM Parser Example

Hello there, young coding enthusiasts! Today, we're going to embark on an exciting journey into the world of PHP and DOM parsing. As your friendly neighborhood computer teacher, I'm here to guide you through this adventure step by step. So, grab your virtual hardhats, and let's dive in!

What is DOM Parsing?

Before we jump into the code, let's understand what DOM parsing is all about. Imagine you're reading a book. The DOM (Document Object Model) is like the structure of that book - chapters, paragraphs, sentences. DOM parsing is like flipping through the pages and understanding how everything is organized. In the web world, it helps us navigate and manipulate HTML documents.

Our Mission Today

We're going to create a PHP script that reads an HTML file, extracts some specific information from it, and displays that information. It's like being a detective, but instead of solving crimes, we're solving the mystery of web pages!

The Example

Let's start with our HTML file. We'll call it example.html:

<html>
<body>
<h1>My Home Page</h1>
<div class="menu">
<ul>
<li>HTML</li>
<li>PHP</li>
<li>JavaScript</li>
</ul>
</div>
</body>
</html>

Now, let's create our PHP script to parse this HTML. We'll name it dom_parser.php:

<?php
// Load the HTML file
$htmlContent = file_get_contents("example.html");

// Create a new DOMDocument object
$dom = new DOMDocument();

// Load the HTML content into the DOMDocument
$dom->loadHTML($htmlContent);

// Create a DOMXPath object to query the document
$xpath = new DOMXPath($dom);

// Find all <li> elements
$liElements = $xpath->query("//li");

// Display the content of each <li> element
foreach ($liElements as $li) {
    echo $li->nodeValue . "<br>";
}
?>

Let's break this down step by step:

1. Loading the HTML File

$htmlContent = file_get_contents("example.html");

This line reads the entire content of our HTML file and stores it in the $htmlContent variable. It's like opening our book and taking a snapshot of all the pages at once!

2. Creating a DOMDocument Object

$dom = new DOMDocument();

Here, we're creating a new DOMDocument object. Think of this as creating a special magnifying glass that helps us examine our HTML structure more closely.

3. Loading HTML into DOMDocument

$dom->loadHTML($htmlContent);

Now we're using our special magnifying glass (DOMDocument) to look at our HTML content. This step prepares the HTML for parsing.

4. Creating a DOMXPath Object

$xpath = new DOMXPath($dom);

XPath is like a compass for navigating our HTML structure. This line creates an XPath object that we'll use to find specific elements in our HTML.

5. Finding

Elements

$liElements = $xpath->query("//li");

This is where the magic happens! We're using XPath to find all <li> elements in our HTML. The //li expression means "find all <li> elements anywhere in the document".

6. Displaying the Results

foreach ($liElements as $li) {
    echo $li->nodeValue . "<br>";
}

Finally, we loop through each <li> element we found and display its content (nodeValue). We add a <br> tag after each item to put them on separate lines.

Running the Script

When you run this PHP script, it will output:

HTML
PHP
JavaScript

Voila! We've successfully extracted the list items from our HTML file.

Methods Used

Here's a table of the main methods we used in our script:

Method	Description
file_get_contents()	Reads entire file into a string
new DOMDocument()	Creates a new DOMDocument object
loadHTML()	Loads HTML from a string
new DOMXPath()	Creates a new DOMXPath object
query()	Evaluates the given XPath expression
nodeValue	Gets the value of a node

Conclusion

And there you have it, folks! We've just taken our first steps into the world of DOM parsing with PHP. Remember, practice makes perfect, so don't be afraid to experiment with different HTML structures and XPath queries.

In my years of teaching, I've found that the best way to learn is by doing. So, here's a little homework for you: Try modifying the script to extract different elements from the HTML. Maybe try to get the content of the <h1> tag, or all the elements with a specific class.

Happy coding, and may the DOM be with you!

Credits: Image by storyset

Previous Tutorial:

PHP - SAX Parser Example

Next Tutorial:

PHP - Login Example