Document Object Model: Difference between revisions

Revision as of 22:15, 7 January 2024

Latest revision as of 07:16, 29 August 2025

(48 intermediate revisions by 33 users not shown)

Line 1:

{{short description|Convention for representing and interacting with objects in HTML, XHTML, and XML documents}}

{{More footnotes|date=August 2010}}

{{Infobox technology standard

| title = Document Object Model (DOM)

| image = DOM-model.svg

| caption = Example of DOM hierarchy in an HTML document

| status t_published wisdom tree= {{Start date and age|1998|10|1}}

| year_started =

| first_published = {{Start date and age|1998|10|1}}

| version = DOM4<ref>All versioning refers to W3C DOM only.</ref>

| version_date = {{Start date and age|2015|11|19}}

Line 23 ⟶ 20:

}}

{{HTML}}

The '''Document Object Model''' ('''DOM''') is a [[cross-platform]]<ref name=":0" /> and [[Language-independent specification|language-independent]] interface[[API]] that treats an [[HTML]] or [[XML]] document as a [[tree structure]] wherein each [[Node (computer science)|node]] is an [[Object (computer science)|object]] representing a part of the document. The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree; with them one can change the structure, style or content of a document.<ref name=":0">{{Cite web |title=Document Object Model (DOM): definition, structure and example |url=https://www.ionos.com/digitalguide/websites/web-development/an-introduction-to-the-document-object-model-dom/ |access-date=2022-04-21 |website=IONOS Digitalguide |language=en}}</ref> Nodes can have [[event handler]]s (also known as event listeners) attached to them. Once an event is triggered, the event handlers get executed.<ref name="Introduction">{{cite web

| access-date = 2012-01-12

| publisher = W3C

Line 32 ⟶ 29:

The principal standardization of the DOM was handled by the [[World Wide Web Consortium]] (W3C), which last developed a recommendation in 2004. [[WHATWG]] took over the development of the standard, publishing it as a [[living document]]. The W3C now publishes stable snapshots of the WHATWG standard.

In HTML DOM (Document Object Model), every element is a node{{Clarification needed|reason=Clarify what this means, or, if it's simply a statement of nomenclature, then rewrite to make that explicit (e.g. is "called" a node)|date=August 2025}}:<ref>{{cite web | url=https://www.w3schools.com/js/js_htmldom.asp | title=JavaScript HTML DOM }}</ref>

* A document is a document node.

Line 61 ⟶ 58:

* DOM Level 3, published in April 2004, added support for [[XPath]] and keyboard [[event handling]], as well as an interface for [[serialization|serializing]] documents as XML.

* HTML5 was published in October 2014. Part of HTML5 had replaced DOM Level 2 HTML module.

* DOM Level 4 was published in 2015. Itand isretired ain snapshotNovember of the WHATWG living standard2020.<ref>{{cite web|url=https://domwww.spec.whatwgw3.org/standards/history/dom40/|title=W3C DOM4 publication history|date=3 November 2020 |access-date=810 JanuaryAugust 20212024}}</ref>

* [https://dom.spec.whatwg.org/review-drafts/2020-06/ DOM 2020-06] was published in September 2021 as a W3C Recommendation.<ref>{{cite web|url=https://www.w3.org/standards/history/dom/|title=DOM publication history|date=28 September 2021 |access-date=10 August 2024}}</ref> It is a snapshot of the WHATWG living standard.

==Applications==

Line 78 ⟶ 76:

A Document Object Model (DOM) tree is a hierarchical representation of an HTML or [[XML]] document. It consists of a root node, which is the document itself, and a series of child nodes that represent the elements, attributes, and text content of the document. Each node in the tree has a parent node, except for the root node, and can have multiple child nodes.

=== Elements as Nodesnodes ===

Elements in an HTML or XML document are represented as nodes in the DOM tree. Each element node has a tag name, and attributes, and can contain other element nodes or text nodes as children. For example, an HTML document with the following structure:<syntaxhighlight lang="html">

<html>

<head>

Line 85 ⟶ 83:

</head>

<body>

<h1>Welcome to DOM</h1>

<p>This is my website.</p>

</body>

Line 97 ⟶ 95:

- body

- h1

- "Welcome to DOM"

- p

- "This is my website."

Line 103 ⟶ 101:

</syntaxhighlight>

=== Text Nodesnodes ===

Text content within an element is represented as a text node in the DOM tree. Text nodes do not have attributes or child nodes, and are always leaf nodes in the tree. For example, the text content "My Website" in the title element and "Welcome" in the h1 element in the above example are both represented as text nodes.

Line 117 ⟶ 115:

== Manipulating the DOM tree ==

The DOM tree can be manipulated using JavaScript or other programming languages. Common tasks include navigating the tree, adding, removing, and modifying nodes, and getting and setting the properties of nodes. The DOM API provides a set of methods and properties to perform these operationsseement, such as <code>getElementById</code>, <code>createElement</code>, <code>appendChild</code>, and <code>innerHTML</code>.<syntaxhighlight lang="javascript">

// Create the root element

var root = document.createElement("root");

</syntaxhighlight>Another way to create a DOM structure is using the innerHTML property to insert HTML code as a string, creating the elements and children in the process. For example:<syntaxhighlight lang="javascript">

// Create a child element

var child = document.createElement("child");

</syntaxhighlight>Another method is to use a JavaScript library or framework such as [[jQuery]], [[AngularJS]], [[React (JavaScript library)|React]]lib, [[Vue.js]], etc. These libraries provide a more convenient, eloquent and efficient way to create, manipulate and interact with the DOM.

// Add the child element to the root element

root.appendChild(child);

</syntaxhighlight>Another way to create a DOM structure is using the innerHTML property to insert HTML code as a string, creating the elements and children in the process. For example:<syntaxhighlight lang="javascript">

document.getElementById("root").innerHTML = "<child></child>";

</syntaxhighlight>Another method is to use a JavaScript library or framework such as [[jQuery]], [[AngularJS]], [[React (JavaScript library)|React]], [[Vue.js]], etc. These libraries provide a more convenient and efficient way to create, manipulate and interact with the DOM.

It is also possible to create a DOM structure from an XML or JSON data, using JavaScript methods to parse the data and create the nodes accordingly.

Line 135 ⟶ 125:

Creating a DOM structure does not necessarily mean that it will be displayed in the web page, it only exists in memory and should be appended to the document body or a specific container to be rendered.

In summary, creating a DOM structure involves creating individual nodes and organizing them in a hierarchical structure using JavaScript or other programming languages, and it can be done using several methods depending on the use case and the developerlanguageloper's preference.

==Implementations==

Because the DOM supports navigation in any direction (e.g., parent and previous sibling) and allows for arbitrary modifications, animplementations implementation must at leasttypically buffer the document that has been read so far (or some parsed form of it).<ref>{{Cite book|url=https://books.google.com/books?id=HuSQGrRY7F4C|title=Ajax Black Book, New Edition (With Cd)|last=Kogent Solutions Inc.|publisher=Dreamtech Press|year=2008|isbn=978-8177228380|pages=40}}</ref> However, a DOM need not originate in a serialized document at all, but can be created in place with the DOM API. And even before the idea of the DOM originated, there were implementations of equivalent structure with persistent disk representation and rapid access, for example [[DynaText]]'s model disclosed in <ref>{{cite patent| country = USA| number = 5557722A| invent1 = Steven DeRose| invent2 = Jeffrey Vogel| status = Expired| title = Data processing system and method for representing, generating a representation of and random access rendering of electronic documents | pubdate = 1996-09-17}}</ref> and various database approaches.

===Layout engines===

Line 151 ⟶ 141:

* [[Apache Xerces|Xerces]] is a collection of DOM implementations written in C++, Java and Perl

* [https://docs.python.org/3/library/xml.dom.html xml.dom] for [[Python (programming language)|Python]]

* XML for &lt;SCRIPT&gt; is a JavaScript-based DOM implementation<ref>{{cite web|url=httphttps://xmljs.sourceforge.net/|title=XML for <SCRIPT> Cross Platform XML Parser in JavaScript|access-date=23 September 2016}}</ref>

* [https://github.com/PhpGt/Dom PHP.Gt DOM] is a server-side DOM implementation based on [[libxml2]] and brings DOM level 4 compatibility<ref>{{cite web|url=https://php.gt/dom#features-at-a-glance|title=The modern DOM API for PHP 7 projects|date=5 December 2021}}</ref> to the [[PHP]] programming language

* [https://github.com/fgnass/domino/ Domino] is a Server-side (Node.js) DOM implementation based on Mozilla's dom.js. Domino is used in the [[MediaWiki]] stack with Visual Editor.