-
-
Notifications
You must be signed in to change notification settings - Fork 25
Classes that make up DOM
Here is a list of all classes that make up DOM in alphabetical order with some basic usage examples:
-
AttrRepresents an attribute on an Element object. -
CharacterDataRepresents a Node object that contains characters. -
ChildNode(Trait) Contains methods that are particular to Node objects that can have a parent. -
CommentRepresents textual notations within markup. -
DocumentRepresents any web page loaded in the browser and serves as an entry point into the web page's content. -
DocumentFragmentRepresents a minimal document object that has no parent. -
DocumentTypeRepresents a Node containing a doctype. -
ElementThe most general base class from which all objects in a Document inherit. -
HTMLCollectionRepresents a Node list that can only contain Element nodes. -
HTMLDocumentProvides access to special properties and methods not present by default on a regular (XML) document. -
LiveProperty(Trait) Internal trait used to allow getting and setting of properties representing live data structures. -
NodeA Node is an interface from which a number of DOM types inherit. -
NodeListCollections of Nodes referenced as properties or returned from methods of other Nodes. -
NonDocumentTypeChildNode(Trait) Contains methods that are particular to Node objects that can have a parent but not suitable for DocumentType. -
ParentNode(Trait) Contains methods that are particular to Node objects that can have children. -
TextRepresents the textual content of Element or Attr. -
TokenListRepresents a set of space-separated tokens. -
XMLDocumentProvides access to special properties and methods not present by default on a regular document.
This type represents a DOM element's attribute as an object. In most DOM methods, you will probably directly get or set an element's attribute as a string (e.g., Element.getAttribute().
-
name(string) (Readonly) The attributes name. -
prefix(?string) (Readonly) The namespace prefix of the attribute, or null if no prefix is specified. -
ownerElement(Element) (Readonly) The element that the Attr is attached to. -
value(string) The attribute's value.
<!doctype html>
<ul id="shop-items">
<li id="arduino">Arduino</li>
<li id="raspberry-pi" class="special-offer special-offer-two-for-one">Raspberry Pi</li>
<li id="class">PIC</li>
</ul>$arduinoElement = $document->getElementById("arduino");
$raspberryPiElement = $document->getElementById("raspberry-pi");
// Reference the attribute, remove it from its current parent, reattach it to new parent.
$attribute = $raspberryPiElement->getAttributeNode("class");
$raspberryPiElement->removeAttributeNode($attribute);
$arduinoElement->setAttributeNode($attribute);Jump to the CharacterData source code
Read CharacterData specification
The CharacterData type represents a Node that contains a string of characters. This is an abstract type, implemented by Text and Comment (see below).
Jump to the ChildNode source code
The ChildNode trait contains methods that are particular to Node objects that have a parent. The trait is used by the following classes:
-
remove() : voidRemoves this ChildNode from the children list of its parent -
before(DOMNode $node) : voidInserts another Node into the children list of this ChildNode's parent, just before this ChildNode -
after(DOMNode $node) : voidInserts another Node into the children list of this ChildNode's parent, just after this ChildNode -
replaceWith(DOMNode $replacement) : voidReplace this ChildNode in the children list of its parent with the supplied replacement node
<!doctype html>
<form method="post">
<button id="buttonA" name="order" value="A">A</button>
<button id="buttonB" name="order" value="B">B</button>
<button id="buttonC" name="order" value="C">C</button>
</form>// If a button has been clicked, its value will be in the POST `order` key
if(isset($_POST["order"])) {
// Reference the form and its first button:
$form = $document->forms[0];
$firstButton = $form->firstEElementChild;
// Reference the clicked button, then replace the first button with it.
$clickedButton = $form->querySelector("[value='" . $_POST["order"] . "']");
if($firstButton !== $clickedButton) {
$firstButton->before($clickedButton);
}
}Jump to the Comment source code
The Comment interface represents textual notations within markup; although it is generally not visually shown, such comments are available to be read in the source view. Comments are represented in HTML and XML as content between ''. In XML, the character sequence '--' cannot be used within a comment.
This interface has no specific method, but inherits those of its parent, CharacterData.
<!doctype html>
<h1>Below is a potentially very long element</h1>
<div class="c-long-container long">
<header>
...
</header>
<ul>
...
</ul>
<footer>
...
</footer>
</div>// Loop over all "long" elements.
foreach($document->querySelectorAll(".long") as $longElement) {
// Set the value using createComment and appendData for explanatory purposes.
$comment = $document->createComment("End: ");
$comment->appendData($longElement->className);
// Insert the comment after the long element's closing tag.
$longElement->after($comment);
}Output HTML (with descriptive comment on ending tag):
...
</footer>
</div><!-- End: c-long-container long -->Jump to the Document source code
The Document base class is inherited by HTMLDocument and XMLDocument, and describes the common properties and methods for any kind of document. It represents the whole web page that will be sent to the browser and serves as an entry point into the web page's content, which is the DOM tree.
The Document interface uses the ParentNode trait, as it contains the head and body elements.
Jump to the DocumentFragment source code
Read DocumentFragment specification
A DocumentFragment is a Node of the document that exists on its own, without any parent node. It can be used to build up an isolated tree of nodes to append to an existing Node of the document. When a DocumentFragment is appended to the an existing Node, all of the fragment's children are moved into the children list of that Node, leaving an empty DocumentFragment with no children.
Because a DocumentFragment is not connected to the tree, all manipulation that occurs within nodes of a DocumentFragment have no performance overhead on the rest of the document. When working with large documents or performing "heavy lifting" operations on multiple nodes, performance gains can be achieved by doing the manipulation within a DocumentFragment.
<ul class="shop-item-list">
<li>
<shop-item id="123" name="Raspberry Pi" price="34.44"></shop-item>
</li>
<li>
<shop-item id="456" name="Arduino" price="16.99"></shop-item>
</li>
</ul><a href="/shop/item/">
<h1>ITEM NAME</h1>
<h2>£0.00</h2>
</a>$shopItemFragmentHtml = file_get_contents("template-shop-item.html");
$fragment = $document->createDocumentFragment();
$fragment->appendXML($shopItemFragmentHtml);
$shopItemList = $document->getElementsByTagName("shop-item");
foreach($shopItemList as $shopItemElement) {
// Create a clone of the fragment as a template element.
$template = $fragment->cloneNode(true);
// Set the elements of the fragment to their correct values.
$link = $template->querySelector("a");
$h1 = $template->querySelector("h1");
$h2 = $template->querySelector("h2");
$link->href .= $shopItemElement->id;
$h1->textContent = $shopItemElement->getAttribute("name");
$h2->textContent = $shopItemElement->getAttribute("price");
// Replace the custom element with the contents of the fragment.
$shopItemElement->replaceWith($template);
}// TODO.
// TODO.
// TODO.
// TODO.
// TODO.
// TODO.
// TODO.
// TODO.
// TODO.
// TODO.
// TODO.
// TODO.
PHP.Gt/Dom is a separately maintained component of PHP.Gt/WebEngine.