{"id":21842881,"url":"https://github.com/pandaplatform/dom","last_synced_at":"2025-06-17T13:32:40.931Z","repository":{"id":57035318,"uuid":"97611987","full_name":"PandaPlatform/dom","owner":"PandaPlatform","description":"[READ-ONLY] Subtree split of the Panda Ui Package","archived":false,"fork":false,"pushed_at":"2018-01-13T12:43:14.000Z","size":18,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"3.1","last_synced_at":"2025-03-21T16:15:26.681Z","etag":null,"topics":["dom","framework","php7","ui"],"latest_commit_sha":null,"homepage":"https://github.com/PandaPlatform/ui","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/PandaPlatform.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-07-18T15:01:00.000Z","updated_at":"2022-02-12T14:37:55.000Z","dependencies_parsed_at":"2022-08-23T20:50:54.236Z","dependency_job_id":null,"html_url":"https://github.com/PandaPlatform/dom","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/PandaPlatform/dom","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PandaPlatform%2Fdom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PandaPlatform%2Fdom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PandaPlatform%2Fdom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PandaPlatform%2Fdom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PandaPlatform","download_url":"https://codeload.github.com/PandaPlatform/dom/tar.gz/refs/heads/3.1","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PandaPlatform%2Fdom/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260369742,"owners_count":22998686,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dom","framework","php7","ui"],"created_at":"2024-11-27T22:13:35.108Z","updated_at":"2025-06-17T13:32:35.916Z","avatar_url":"https://github.com/PandaPlatform.png","language":"PHP","readme":"# Dom Package\n\n\u003e **Note:** [READ-ONLY] Subtree split of the Panda Ui Package\n\nThe Dom Package allows you to easily manipulate DOM Elements.\n\n[![StyleCI](https://styleci.io/repos/97611987/shield?branch=3.1)](https://styleci.io/repos/97611987/shield?branch=3.1)\n[![Latest Stable Version](https://poser.pugx.org/panda/dom/v/stable?format=flat-square)](https://packagist.org/packages/panda/dom)\n[![Total Downloads](https://poser.pugx.org/panda/dom/downloads?format=flat-square)](https://packagist.org/packages/panda/dom)\n[![License](https://poser.pugx.org/panda/dom/license?format=flat-square)](https://packagist.org/packages/panda/dom)\n\n- [Introduction](#introduction)\n- [Installation](#installation)\n  - [Through the composer](#through-the-composer)\n- [DOM](#dom)\n  - [DOM Handlers](#dom-handlers)\n  - [DOM Factories](#dom-factories)\n  - [Extending DOM](#extending-dom)\n\n## Introduction\nPanda Ui DOM component is a backend ui handler/renderer engine that enables generating including xml content in a more structured way.\n\nThis component is extending the normal DOM structure that is offered by the language itself, including some of the following classes:\n- [`DOMNode`](http://php.net/manual/en/class.domnode.php)\n- [`DOMDocument`](http://php.net/manual/en/class.domdocument.php)\n- [`DOMElement`](http://php.net/manual/en/class.domelement.php)\n\nThis is the main reason why this component is so powerful, providing extra, faster and more clever functionality using existing components.\n\nThis package is able to create html pages using the DOM structure fast and easy. Some of the features include:\n\n* Dom manipulation from PHP\n* Dom Factory that creates Dom Elements\n\n## Installation\n\n### Through the composer\n\nAdd the following line to your `composer.json` file:\n\n```\n\"panda/dom\": \"^3.1\"\n```\n\n## DOM\n\n### DOM Handlers\n\nWe built Ui component with the ability to be extensible and configurable.\nFor this reason we have inserted handlers and factories which can be replaced, just by using the interfaces provided.\n\nIn order to be able to manipulate DOM elements in any way, including elements that we create but also elements that we can retrieve from a Document (using xpath), we had to create an independent structure of handlers that can manipulate DOM without actually being part of it.\n\nBuilding a DOM tree can be a painful process using only native functions, that's why we created DOMHandler, to replace a multi-line functionality with a single-line function call.\n\n`DOMHandler` is responsible for applying simple DOM manipulations to xml documents, generic enough for all the document types. Let's see some examples here:\n\nAdding an attribute:\n\n```php\nuse Panda\\Ui\\Dom\\Handlers\\DOMHandler;\n\n// Normal DOMElement way\n// The same way for get and remove\n// Where $element is a DOMElement object\n$element-\u003esetAttribute($name = 'id', $value = 'id_value');\n\n\n// Using DOMHandler\n$handler = new DOMHandler();\n\n// Set an attribute\n$handler-\u003eattr($element, $name = 'id', $value = 'id_value', $validate = false);\n\n// Get an attribute\n$handler-\u003eattr($element, $name = 'id');\n\n// Remove an attribute\n$handler-\u003eattr($element, $name = 'id', $value = null);\n```\n\nThe previous example might not say much, but moving on to more functionality, we have the following functions available:\n* `attr(DOMElement \u0026$element, $name, $value = '', $validate = false);`\n* `attrs(DOMElement \u0026$element, $value = []);`\n* `appendAttr(DOMElement \u0026$element, $name, $value);`\n* `data(DOMElement \u0026$element, $name, $value = []);`\n* `nodeValue(DOMElement \u0026$element, $value = null);`\n* `append(DOMElement \u0026$parent, \u0026$child);`\n* `prepend(DOMElement \u0026$parent, \u0026$child);`\n* `remove(DOMElement \u0026$element);`\n* `replace(DOMElement \u0026$old, \u0026$new);`\n* `evaluate(DOMDocument $document, $query, $context = null);`\n\n### DOM Factories\n\nAfter describing the structure with DOMPrototype and DOMItem, we are here to introduce the DOM Factories.\nDOM Factories are used to create DOM items with simple calls without the need to create extra objects like the DOMDocument or the DOMHandler.\nThese factories are not replacing the functionality of a container, but they just provide an interface for creating all the elements needed from a single class.\n\nThe DOM Factory class is the smallest form of factory which provides one public function for building a simple DOMElement, the buildElement() function. The DOM Factory expects a DOMPrototype to be set with the setDOMDocument() function so that it can create all the elements needed.\n\nMainly the factories are accessible through the DOMPrototype, where we provide it as a dependency in the constructor. The Document is responsible for initializing the factory and connecting it to the current document.\n\n```php\nuse Panda\\Ui\\Dom\\Handlers\\DOMHandler;\nuse \\Panda\\Ui\\Dom\\Factories\\DOMFactory;\nuse \\Panda\\Ui\\Dom\\DOMPrototype;\n\n// Create a handler instance\n$handler = new DOMHandler();\n\n// Create a new factory instance\n$factory = new DOMFactory();\n\n// Create a document and provide the handler and factory\n$document = new DOMPrototype($handler, $factory);\n\n\n// Get the factory and build an element\n$document-\u003egetDOMFactory()-\u003ebuildElement($name = 'div', $value = 'value');\n\n// Document uses the above function with a 'facade' function called create:\n$document-\u003ecreate($name = 'div', $value = 'value');\n```\n\n### Extending DOM\n\nTwo are the base classes of the entire component, which extend php objects:\n\nDOMItem:\n```php\nclass DOMItem extends DOMElement\n{\n}\n```\n\nDOMPrototype:\n```php\nclass DOMPrototype extends DOMDocument\n{\n}\n```\n\nBoth of the objects are using two basic interfaces for handling the entire functionality and are standing there like observers for the building.\nThose are the `DOMHandler` and `DOMFactory` interfaces.\n\n#### DOMPrototype\n\nThe DOMPrototype object is the base object for XML Documents (and HTML Documents). It provides some basic functionality and the rest is being handled by a DOMHandler and a DOMFactory.\n\nThe DOMPrototype object has the following functionalities:\n* `create($name = 'div', $value = '')`\n* `append($element);`\n* `evaluate($query, $context = null);`\n* `find($id, $nodeName = '*');`\n* `getXML($format = false);`\n\nThe above functions support the basic Document object. However you can perform more tasks using the DOMHandler and create more elements using the DOMFactory object.\n\n```php\nuse Panda\\Ui\\Dom\\Handlers\\DOMHandler;\nuse \\Panda\\Ui\\Dom\\Factories\\DOMFactory;\nuse \\Panda\\Ui\\Dom\\DOMPrototype;\n\n// Create the document\n// Using a container here would make the call a lot easier\n$DOMHandler = new DOMHandler();\n$DOMFactory = new DOMFactory();\n$document = new DOMPrototype($DOMHandler, $DOMFactory);\n\n// Create the root element and append it to the document\n$root = $document-\u003ecreate($name = 'root', $value = '');\n$document-\u003eappend($root);\n\n// Create an element and append it to the root\n$element = $document-\u003ecreate($name = 'child', $value = 'This is a root child.');\n$root-\u003eappend($element);\n```\n\n#### DOMItem\n\nThe basic root element for creating DOM elements is the DOMItem basic object. DOMItem extends the given php functionality of a DOMElement and provides a better way to manipulate the item writing less code. The object supports the following functionality:\n* `attr($name, $value = '', $validate = false);`\n* `attrs($value = []);`\n* `appendAttr($name, $value);`\n* `nodeValue($value = null);`\n* `append(\u0026$element);`\n* `appendTo(\u0026$element);`\n* `prepend(\u0026$element);`\n* `prependTo(\u0026$element);`\n* `remove();`\n* `replace($element);`\n\nThe DOMItem constructor accepts a DOMPrototype (document) so that it can be associated with it and it can be handled by a client (otherwise it will be a read-only object). The Document itself requires a DOMHandler. The DOMItem uses this DOMHandler to manipulate itself using all the previous functions. Basically all these functions are being handled by the DOMHandler and not the DOMItem itself.\n\n```php\nuse \\Panda\\Ui\\Dom\\DOMPrototype;\nuse \\Panda\\Ui\\Dom\\DOMItem;\n\n// Create the document to associate the DOMItem with\n$document = new DOMPrototype(new DOMHandler(), new DOMFactory());\n\n// Create the item\n$item = new DOMItem($document, $name = 'div', $value = '');\n\n// Update the item\n$item-\u003eattr('name', 'item_name');\n$item-\u003eattr('title', 'item_title');\n\n// Append item to document\n$document-\u003eappend($item);\n```\n\n\u003e Every DOMItem that is being created is being appended to the given document so that we can edit it.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpandaplatform%2Fdom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpandaplatform%2Fdom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpandaplatform%2Fdom/lists"}