Skip to content

Document Object Model

Jump to bottom Edit New page
Greg Bowler edited this page Sep 3, 2018 · 4 revisions

The DOM repository is separately maintained at https://github.com/PhpGt/Dom

The Document Object Model (DOM) is an API understood by all web browsers that is used to represent the structure of HTML and XML documents, such as the pages within your application. It allows software to read from and manipulate the page at runtime, providing the basis for dynamic pages.

Tags within HTML such as <img> tags, <article> tags, and plain old <div> tags are represented in the DOM as Element objects, and provide mechanisms for reading and updating the elements contents, and traversing the DOM as a tree (nodes with parents, children and siblings).

<body>
	<article>
		<h1>Hello, World!</h1>
		<p>This is just an example.</p>
		<p>A simple HTML snippet.</p>
	</article>
</body>

In the above snippet of HTML, the tree is visualised by indentation. The <article> element has a parent, the <body> and three children, the <h1> and the two <p> elements. From any of the elements a program can traverse the whole tree.

The DOM exposes many useful functions to work with the Elements of the tree. As a brief example, it is possible to iterate over all the <p> elements in the page and change their text to uppercase by using the getElementsByTagName function as follows:

public function go() {
	$paragraphList = $this->document->getElementsByTagName("p");

	foreach($paragraphList as $paragraph) {
		$paragraph->innerText = strtoupper($paragraph->innerText);
	}
}

Website | Packagist | Github

Overview

Build your first app

Pages, routes, and views

Adding server-side behaviour

Working with data and services

Production applications

Running, testing, and deploying

Reference

Further reading

Clone this wiki locally