Wikipedia

Document Object Model: Difference between revisions

Browse history interactively
← Previous edit
Content deleted Content added
VisualWikitext
Susko3 (talk | contribs)
485 edits
m →Implementations: Reword to fix typo
Tags: Mobile edit Mobile app edit Android app edit App section source
Bender the Bot (talk | contribs)
Bots
1,064,377 edits
m →Libraries: HTTP to HTTPS for SourceForge
 
(18 intermediate revisions by 16 users not shown)
Line 4:
| 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 22 ⟶ 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 31 ⟶ 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 79 ⟶ 77:
 
=== Elements as nodes ===
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 138 ⟶ 136:
 
==Implementations==
Because the DOM supports navigation in any direction (e.g., parent and previous sibling) and allows for arbitrary modifications, implementations typically buffer the document.<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. Also,And thereeven havebefore beenthe implementationsidea evenof beforethe DOM itselforiginated, 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 ⟶ 149:
* [[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.
Retrieved from "https://en.wikipedia.org/wiki/Document_Object_Model"