Document Object Model: Difference between revisions
Jump to navigation
Jump to search
imported>WikiCleanerBot m v2.05b - Bot T13 CW#549 - Fix errors for CW project (Split link) |
imported>ClueBot NG m Reverting possible vandalism by Chanyanuch90 to version by Saturncubetechnologies. Report False Positive? Thanks, ClueBot NG. (4519485) (Bot) |
||
| Line 1: | Line 1: | ||
{{ | {{Short description|Computer document convention}} | ||
{{Infobox technology standard | {{Infobox technology standard | ||
| title = Document Object Model (DOM) | | title = Document Object Model (DOM) | ||
| Line 25: | Line 25: | ||
| title = Document Object Model (DOM) | | title = Document Object Model (DOM) | ||
| quote = The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. | | quote = The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. | ||
| url = | | url = https://www.w3.org/DOM/#what}}</ref> | ||
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. | 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:<ref>{{cite web | url=https://www.w3schools.com/js/js_htmldom.asp | title=JavaScript HTML DOM }}</ref> | 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. | * A document is a document node. | ||
| Line 38: | Line 38: | ||
==History== | ==History== | ||
The history of the Document Object Model is intertwined with the history of the "[[browser wars]]" of the late 1990s between [[Netscape Navigator]] and [[Microsoft Internet Explorer]], as well as with that of [[JavaScript]] and [[JScript]], the first [[scripting language]]s to be widely [[Implementation|implemented]] in the [[JavaScript engine]]s of [[web browser]]s. | The history of the Document Object Model is intertwined with the history of the "[[browser wars]]" of the late 1990s between [[Netscape Navigator]] and [[Microsoft Internet Explorer]], as well as with that of [[JavaScript]] and [[JScript]], the first [[scripting language]]s to be widely [[Implementation|implemented]] in the [[JavaScript engine]]s of [[web browser]]s.{{cn|date=March 2026}} | ||
JavaScript was released by [[Netscape Communications]] in 1995 within Netscape Navigator 2.0. Netscape's competitor, [[Microsoft]], released [[Internet Explorer 3|Internet Explorer 3.0]] the following year with a reimplementation of JavaScript called JScript. JavaScript and JScript let [[web developer]]s create web pages with [[client-side]] interactivity. The limited facilities for detecting user-generated [[Event (computing)|events]] and modifying the HTML document in the first generation of these languages eventually became known as "DOM Level 0" or "Legacy DOM." No independent standard was developed for DOM Level 0, but it was partly described in the specifications for [[HTML4|HTML 4]]. | JavaScript was released by [[Netscape Communications]] in 1995 within Netscape Navigator 2.0. Netscape's competitor, [[Microsoft]], released [[Internet Explorer 3|Internet Explorer 3.0]] the following year with a reimplementation of JavaScript called JScript. JavaScript and JScript let [[web developer]]s create web pages with [[client-side]] interactivity. The limited facilities for detecting user-generated [[Event (computing)|events]] and modifying the HTML document in the first generation of these languages eventually became known as "DOM Level 0" or "Legacy DOM." No independent standard was developed for DOM Level 0, but it was partly described in the specifications for [[HTML4|HTML 4]]. | ||
| Line 52: | Line 52: | ||
==Standards== | ==Standards== | ||
[[File:WHATWG DOM.png|thumb|WHATWG DOM]] | [[File:WHATWG DOM.png|thumb|WHATWG DOM]] | ||
The [[W3C]] DOM Working Group published its final recommendation and subsequently disbanded in 2004. Development efforts migrated to the [[WHATWG]], which continues to maintain a living standard.<ref>{{cite web|url=https://dom.spec.whatwg.org/|title=DOM Standard|access-date=23 September 2016}}</ref> In 2009, the Web Applications group reorganized DOM activities at the W3C.<ref>{{cite web|url=https://www.w3.org/DOM/|title=W3C Document Object Model|access-date=23 September 2016}}</ref> In 2013, due to a lack of progress and the impending release of [[HTML5]], the DOM Level 4 specification was reassigned to the [[HTML Working Group]] to expedite its completion.<ref>{{cite web|url=https://lists.w3.org/Archives/Public/public-html-admin/2013Sep/0129.html|title=New Charter for the HTML Working Group from Philippe Le Hegaret on 2013-09-30 ([email protected] from September 2013)|first=Philippe Le Hegaret|last=([email protected])|access-date=23 September 2016}}</ref> Meanwhile, in 2015, the Web Applications group was disbanded and DOM stewardship passed to the Web Platform group.<ref>{{cite web|url=https://www.w3.org/2008/webapps/wiki/PubStatus|title=PubStatus - WEBAPPS|access-date=23 September 2016}}</ref> Beginning with the publication of DOM Level 4 in 2015, the W3C creates new recommendations based on snapshots of the WHATWG standard. | The [[W3C]] DOM Working Group published its final recommendation and subsequently disbanded in 2004. Development efforts migrated to the [[WHATWG]], which continues to maintain a living standard.<ref>{{cite web|url=https://dom.spec.whatwg.org/|title=DOM Standard|access-date=23 September 2016}}</ref> In 2009, the Web Applications group reorganized DOM activities at the W3C.<ref>{{cite web|url=https://www.w3.org/DOM/|title=W3C Document Object Model|access-date=23 September 2016}}</ref> In 2013, due to a lack of progress and the impending release of [[HTML5]], the DOM Level 4 specification was reassigned to the [[HTML Working Group]] to expedite its completion.<ref>{{cite web|url=https://lists.w3.org/Archives/Public/public-html-admin/2013Sep/0129.html|title=New Charter for the HTML Working Group from Philippe Le Hegaret on 2013-09-30 ([email protected] from September 2013)|first=Philippe Le Hegaret|last=([email protected])|access-date=23 September 2016}}</ref> Meanwhile, in 2015, the Web Applications group was disbanded and DOM stewardship passed to the Web Platform group.<ref>{{cite web|url=https://www.w3.org/2008/webapps/wiki/PubStatus|title=PubStatus - WEBAPPS|access-date=23 September 2016|archive-date=10 June 2017|archive-url=https://web.archive.org/web/20170610233948/https://www.w3.org/2008/webapps/wiki/PubStatus|url-status=dead}}</ref> Beginning with the publication of DOM Level 4 in 2015, the W3C creates new recommendations based on snapshots of the WHATWG standard. | ||
* DOM Level 1 provided a complete model for an entire HTML or [[XML]] document, including the means to change any portion of the document. | * DOM Level 1 provided a complete model for an entire HTML or [[XML]] document, including the means to change any portion of the document. | ||
| Line 98: | Line 98: | ||
- p | - p | ||
- "This is my website." | - "This is my website." | ||
</syntaxhighlight> | </syntaxhighlight> | ||
=== Text nodes === | === Text nodes === | ||
Text content within an element is represented as a text node in the DOM tree. Text nodes do not have attributes or child nodes | 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 therefore always leaf nodes in the tree. For example, the text content "My Website" in the title element and "Welcome" in the h1 element are both represented as text nodes. | ||
=== Attributes as properties === | === Attributes as properties === | ||
| Line 127: | Line 126: | ||
</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"> | </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>"; | 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 | </syntaxhighlight>Another method is to use a JavaScript library or framework such as [[jQuery]], [[AngularJS]], [[React (JavaScript library)|React]], [[Vue.js]], [[Svelte]], etc. These libraries provide a 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. | 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 149: | Line 148: | ||
* [[Apache Xerces|Xerces]] is a collection of DOM implementations written in C++, Java and Perl | * [[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]] | * [https://docs.python.org/3/library/xml.dom.html xml.dom] for [[Python (programming language)|Python]] | ||
* XML for <SCRIPT> is a JavaScript-based DOM implementation<ref>{{cite web|url= | * XML for <SCRIPT> is a JavaScript-based DOM implementation<ref>{{cite web|url=https://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/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. | * [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. | ||
| Line 156: | Line 155: | ||
APIs that expose DOM implementations: | APIs that expose DOM implementations: | ||
* [[Java API for XML Processing|JAXP]] (Java API for XML Processing) is an API for accessing DOM providers | * [[Java API for XML Processing|JAXP]] (Java API for XML Processing, {{Javadoc:SE|package=org.w3c.dom|org/w3c/dom|module=java.xml}}) is an API for accessing DOM providers | ||
* [[Lazarus (IDE)|Lazarus]] ([[Free Pascal]] IDE) contains two variants of the DOM - with UTF-8 and ANSI format | * [[Lazarus (IDE)|Lazarus]] ([[Free Pascal]] IDE) contains two variants of the DOM - with UTF-8 and ANSI format | ||
| Line 198: | Line 197: | ||
| publisher = World Wide Web Consortium | | publisher = World Wide Web Consortium | ||
| year = 2002 | | year = 2002 | ||
| url = | | url = https://www.w3.org/2002/07/26-dom-article.html | ||
| access-date = January 10, 2009 }} | | access-date = January 10, 2009 }} | ||
*{{cite web | *{{cite web | ||