Skip to content

Classes that make up DOM

Jump to bottom
Greg Bowler edited this page Jul 13, 2017 · 15 revisions

Here is a list of all classes that make up DOM in alphabetical order with some basic usage examples:

  • Attr Represents an attribute on an Element object.
  • CharacterData Represents a Node object that contains characters.
  • ChildNode (Trait) Contains methods that are particular to Node objects that can have a parent.
  • Comment Represents textual notations within markup.
  • Document Represents any web page loaded in the browser and serves as an entry point into the web page's content.
  • DocumentFragment Represents a minimal document object that has no parent.
  • DocumentType Represents a Node containing a doctype.
  • Element The most general base class from which all objects in a Document inherit.
  • HTMLCollection Represents a Node list that can only contain Element nodes.
  • HTMLDocument Provides 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.
  • Node A Node is an interface from which a number of DOM types inherit.
  • 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.
  • Text Represents the textual content of Element or Attr.
  • TokenList Represents a set of space-separated tokens.
  • XMLDocument Provides access to special properties and methods not present by default on a regular document.

Attr

Jump to the Attr source code

Read Attr specification

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().

Properties

  • 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.

Example Attr usage

Moving an attribute between elements

<!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);

CharacterData

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).

ChildNode

The ChildNode trait contains methods that are particular to Node objects that have a parent. The trait is used by the following classes:

Methods

  • remove() : void Removes this ChildNode from the children list of its parent
  • before(DOMNode $node) : void Inserts another Node into the children list of this ChildNode's parent, just before this ChildNode
  • after(DOMNode $node) : void Inserts another Node into the children list of this ChildNode's parent, just after this ChildNode
  • replaceWith(DOMNode $replacement) : void Replace this ChildNode in the children list of its parent with the supplied replacement node

Example ChildNode usage

Click one of three buttons to move it to the top of the list

<!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);
	}

}

Comment

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.

Methods

This interface has no specific method, but inherits those of its parent, CharacterData.

Example Comment usage

Output a comment to the page to help developers track closing tags

<!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 -->

Document

// TODO.

DocumentFragment

// TODO.

DocumentType

// TODO.

Element

// TODO.

HTMLCollection

// TODO.

HTMLDocument

// TODO.

LiveProperty

// TODO.

Node

// TODO.

NonDocumentTypeChildNode

// TODO.

ParentNode

// TODO.

Text

// TODO.

TokenList

// TODO.

XMLDocument

// TODO.

PHP.Gt/Dom is a separately maintained component of PHP.Gt/WebEngine.

Introduction

Working with DOM

JavaScript in the browser

Behind the scenes

Clone this wiki locally