Built on top of PHP's native DOMDocument, this project provides access to modern DOM APIs, as you would expect working with client-side code in the browser.
Performing DOM manipulation in your server-side code enhances the way dynamic pages can be built. Utilising a standardised object-oriented interface means the page can be ready-processed, benefitting browsers, webservers and content delivery networks.
Consider a page with a form, with an input element to enter your name. When the form is submitted, the page should greet you by your name.
This is a simple example of how source HTML files can be treated as templates. This can easily be applied to more advanced template pages to provide dynamic content, without requiring non-standard techniques such as {{curly braces}} for placeholders, or echo '<div class='easy-mistake'>' . $content['opa'] . '</div>' horrible HTML construction from within PHP.
<!doctype html>
<h1>
Hello, <span id="your-name">you</span> !
</h1>
<form>
<input name="name" placeholder="Your name, please" required />
<button>Submit</button>
</form><?php
require "vendor/autoload.php";
$html = file_get_contents("name.html");
$document = new \Gt\Dom\HTMLDocument($html);
if(isset($_GET["name"])) {
$document->getElementById("your-name")->textContent = $_GET["name"];
}
echo $document->saveHTML();
- Modern DOM classes available on the server:
HTMLDocument.Element.HTMLCollection.- and more extended DOM classes.
- Standardised traits to add functionality in accordance with W3C.
- Reference elements using CSS selectors via
querySelector(All). - Add/remove/toggle elements' classes using
ClassList. ElementNodes within the document traversable with W3C properties:Element::remove()to detach it from the document.- Add elements around another using
Element::before()andElement::after(). - Replace an element in place using
Element::replaceWith(). - Standard collection properties on the
HTMLDocument:
The following features are currently in development and are planned to be released into version 2.0.
- Server-side WebComponent support:
<calendar> <date>1988-04-05</date> <caption>My birthday</caption> </calendar>.<button is="shopping-cart">Add to cart</button>.
- Templating to ease dynamic content:
<template id="list-item"> <li> Add this many times </li> </template>.<tr data-template="table-row"> <td> Add this many times. </td> </tr>.
- Reference an element's children using CSS query selectors via ArrayAccess:
$container["h1"][0]->textContent = "Hello, World!";.$document["body>header>nav li a"][0]->href = "/nowhere.html";.foreach($myElement["input[type='checkbox']"] as $checkbox) {.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent