The Document Object Model ( DOM ) is a cross-platform and language-independent interface that treats an HTML or XML document as a tree structure wherein each node is an 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. Nodes can have event handlers (also known as event listeners) attached to them. Once an event is triggered, the event handlers get executed.
40-627: 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: The history of the Document Object Model
80-451: A web app . (Two examples are Spotify and Slack .) The layout of a web page is typically specified by Cascading Style Sheets (CSS). Each style sheet is a series of rules for how the page should be presented. For example, some rules specify typography details, such as font , color, and text size, while others determine the placement of images. The engine combines all relevant CSS rules to calculate precise graphical coordinates for
120-420: A DOM structure from an XML or JSON data, using JavaScript methods to parse the data and create the nodes accordingly. 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
160-410: 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: Another method is to use a JavaScript library or framework such as jQuery , AngularJS , React , Vue.js , etc. These libraries provide a more convenient, eloquent and efficient way to create, manipulate and interact with the DOM. It is also possible to create
200-723: A community of major web players and publishers to establish a MediaWiki wiki that seeks to document open web standards called the WebPlatform and WebPlatform Docs. In January 2013, Beihang University became the Chinese host. In 2022 the W3C WebFonts Working Group won an Emmy Award from the National Academy of Television Arts and Sciences for standardizing font technology for custom downloadable fonts and typography for web and TV devices. On 1 January 2023, it reformed as
240-450: A hierarchical structure using JavaScript or other programming languages, and it can be done using several methods depending on the use case and the developer's preference. Because the DOM supports navigation in any direction (e.g., parent and previous sibling) and allows for arbitrary modifications, implementations typically buffer the document. However, a DOM need not originate in a serialized document at all, but can be created in place with
280-521: A loaded HTML document. DHTML required extensions to the rudimentary document object that was available in the Legacy DOM implementations. Although the Legacy DOM implementations were largely compatible since JScript was based on JavaScript, the DHTML DOM extensions were developed in parallel by each browser maker and remained incompatible. These versions of the DOM became known as the "Intermediate DOM". After
320-599: A new edition or level of the recommendation. Additionally, the W3C publishes various kinds of informative notes which are to be used as references. Unlike the Internet Society and other international standards bodies, the W3C does not have a certification program. The W3C has decided, for now, that it is not suitable to start such a program, owing to the risk of creating more drawbacks for the community than benefits. In January 2023, after 28 years of being jointly administered by
360-448: A particular browser, such as Internet Explorer. Others, including Blink , WebKit , and Gecko , are shared by a number of browsers, such as Google Chrome , Opera , Safari , and Firefox . The different layout engines implement the DOM standards to varying degrees of compliance. DOM implementations: APIs that expose DOM implementations: Inspection tools: World Wide Web Consortium The World Wide Web Consortium ( W3C )
400-456: A public-interest 501(c)(3) non-profit organization . W3C develops technical specifications for HTML5 , CSS , SVG , WOFF , the Semantic Web stack , XML , and other technologies. Sometimes, when a specification becomes too large, it is split into independent modules that can mature at their own pace. Subsequent editions of a module or specification are known as levels and are denoted by
440-576: A set of core principles and components that are chosen by the consortium. It was originally intended that CERN host the European branch of W3C; however, CERN wished to focus on particle physics , not information technology . In April 1995, the French Institute for Research in Computer Science and Automation became the European host of W3C, with Keio University Research Institute at SFC becoming
SECTION 10
#1733084887302480-462: A working draft (WD) for review by the community. A WD document is the first form of a standard that is publicly available. Commentary by virtually anyone is accepted, though no promises are made with regard to action on any particular element commented upon. At this stage, the standard document may have significant differences from its final form. As such, anyone who implements WD standards should be ready to significantly modify their implementations as
520-455: Is implemented as a separate JavaScript engine , which has enabled its usage elsewhere . In a browser, the two engines are coordinated via the DOM and Web IDL bindings. Browser engines are also used in non-browser applications . An email client needs one to display HTML email . Beginning in the 2010s, many apps have been created with the frameworks based on Google 's Chromium project; each of these standalone apps functions much like
560-432: Is a core software component of every major web browser . The primary job of a browser engine is to transform HTML documents and other resources of a web page into an interactive visual representation on a user 's device. In theory, layout and rendering (or "painting") could be handled by different engines. In practice, however, these components are tightly coupled and rarely encountered on their own outside of
600-403: Is done by external experts in the W3C's various working groups. The Consortium is governed by its membership. The list of members is available to the public. Members include businesses, nonprofit organizations, universities, governmental entities, and individuals. Membership requirements are transparent except for one requirement: An application for membership must be reviewed and approved by
640-570: 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 languages to be widely implemented in the JavaScript engines of web browsers . JavaScript was released by Netscape Communications in 1995 within Netscape Navigator 2.0. Netscape's competitor, Microsoft , released Internet Explorer 3.0
680-555: Is now endorsed by the W3C, indicating its readiness for deployment to the public, and encouraging more widespread support among implementors and authors. Recommendations can sometimes be implemented incorrectly, partially, or not at all, but many standards define two or more levels of conformance that developers must follow if they wish to label their product as W3C-compliant. A recommendation may be updated or extended by separately-published, non-technical errata or editor drafts until sufficient substantial edits accumulate for producing
720-500: Is rendered in browsers, the browser downloads the HTML into local memory and automatically parses it to display the page on screen. However, the DOM does not necessarily need to be represented as a tree, and some browsers have used other internal models. When a web page is loaded, the browser creates a Document Object Model of the page, which is an object oriented representation of an HTML document that acts as an interface between JavaScript and
760-555: Is the main international standards organization for the World Wide Web . Founded in 1994 and led by Tim Berners-Lee , the consortium is made up of member organizations that maintain full-time staff working together in the development of standards for the World Wide Web. As of 5 March 2023, W3C had 462 members. W3C also engages in education and outreach, develops software and serves as an open forum for discussion about
800-562: Is the version of a standard that has passed the prior two levels. The users of the standard provide input. At this stage, the document is submitted to the W3C Advisory Council for final approval. While this step is important, it rarely causes any significant changes to a standard as it passes to the next phase. This is the most mature stage of development. At this point, the standard has undergone extensive review and testing, under both theoretical and practical conditions. The standard
840-506: The Electronic Frontier Foundation 's resignation from W3C. As feared by the opponents of EME, as of 2020 , none of the widely used Content Decryption Modules used with EME are available for licensing without a per-browser licensing fee. W3C/ Internet Engineering Task Force standards (over Internet protocol suite ): Web browser engine A browser engine (also known as a layout engine or rendering engine )
SECTION 20
#1733084887302880-1002: The MIT Computer Science and Artificial Intelligence Laboratory (located in Stata Center ) in the United States, the (in Sophia Antipolis , France), Keio University (in Japan) and Beihang University (in China), the W3C incorporated as a legal entity, becoming a public-interest not-for-profit organization . The W3C has a staff team of 70–80 worldwide as of 2015 . W3C is run by a management team which allocates resources and designs strategy, led by CEO Jeffrey Jaffe (as of March 2010), former CTO of Novell . It also includes an advisory board that supports strategy and legal matters and helps resolve conflicts. The majority of standardization work
920-619: The WHATWG , which continues to maintain a living standard. In 2009, the Web Applications group reorganized DOM activities at the W3C. 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. Meanwhile, in 2015, the Web Applications group was disbanded and DOM stewardship passed to
960-665: The Asian host in September 1996. Starting in 1997, W3C created regional offices around the world. As of September 2009, it had eighteen World Offices covering Australia, the Benelux countries (Belgium, Netherlands and Luxembourg), Brazil, China, Finland, Germany, Austria, Greece, Hong Kong, Hungary, India, Israel, Italy, South Korea, Morocco, South Africa, Spain, Sweden, and, as of 2016, the United Kingdom and Ireland. In October 2012, W3C convened
1000-451: 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 and various database approaches. Web browsers rely on layout engines to parse HTML into a DOM. Some layout engines, such as Trident/MSHTML , are associated primarily or exclusively with
1040-417: The DOM tree as: 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 operations, such as getElementById , createElement , appendChild , and innerHTML . Another way to create
1080-423: 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. Attributes of an element are represented as properties of the element node in the DOM tree. For example, an element with the following HTML: will be represented in
1120-450: The W3C started considering adding DRM -specific Encrypted Media Extensions (EME) to HTML5 , which was criticised as being against the openness, interoperability, and vendor neutrality that distinguished websites built using only W3C standards from those requiring proprietary plug-ins like Flash . On 18 September 2017, the W3C published the EME specification as a recommendation, leading to
1160-516: The W3C. Many guidelines and requirements are stated in detail, but there is no final guideline about the process or standards by which membership might be finally approved or denied. The cost of membership is given on a sliding scale, depending on the character of the organization applying and the country in which it is located. Countries are categorized by the World Bank 's most recent grouping by gross national income per capita. In 2012 and 2013,
1200-519: The Web Platform group. Beginning with the publication of DOM Level 4 in 2015, the W3C creates new recommendations based on snapshots of the WHATWG standard. To render a document such as a HTML page, most web browsers use an internal model similar to the DOM. The nodes of every document are organized in a tree structure , called the DOM tree , with the topmost node named as "Document object". When an HTML page
1240-828: The Web. The World Wide Web Consortium (W3C) was founded in 1994 by Tim Berners-Lee after he left the European Organization for Nuclear Research ( CERN ) in October 1994. It was founded at the Massachusetts Institute of Technology (MIT) Laboratory for Computer Science with support from the European Commission , and the Defense Advanced Research Projects Agency , which had pioneered the ARPANET ,
Document Object Model - Misplaced Pages Continue
1280-433: The browser engine. In addition to layout and rendering, a browser engine enforces the security policy between documents, handles navigation through hyperlinks and data submitted through forms , and implements the document object model (DOM) exposed to scripts associated with the document. To provide a wide range of dynamic behavior for web pages , every major browser supports JavaScript . However, JavaScript
1320-420: The document itself. This allows the creation of dynamic web pages , because within a page JavaScript can: 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
1360-455: The first integer in the title (e.g. CSS3 = Level 3). Subsequent revisions on each level are denoted by an integer following a decimal point (for example, CSS2.1 = Revision 1). The W3C standard formation process is defined within the W3C process document, outlining four maturity levels through which each new standard or recommendation must progress. After enough content has been gathered from 'editor drafts' and discussion, it may be published as
1400-423: The following year with a reimplementation of JavaScript called JScript. JavaScript and JScript let web developers create web pages with client-side interactivity. The limited facilities for detecting user-generated 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
1440-706: The most direct predecessor to the modern Internet . It was located in Technology Square until 2004, when it moved, with the MIT Computer Science and Artificial Intelligence Laboratory, to the Stata Center. The organization tries to foster compatibility and agreement among industry members in the adoption of new standards defined by the W3C. Incompatible versions of HTML are offered by different vendors, causing inconsistency in how web pages are displayed. The consortium tries to get all those vendors to implement
1480-408: The root node, and can have multiple child 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: will be represented in the DOM tree as: Text content within an element is represented as a text node in
1520-616: The standard matures. A candidate recommendation is a version of a more mature standard than the WD. At this point, the group responsible for the standard is satisfied that the standard meets its goal. The purpose of the CR is to elicit aid from the development community on how implementable the standard is. The standard document may change further, but significant features are mostly decided at this point. The design of those features can still change due to feedback from implementors. A proposed recommendation
1560-636: The standardization of ECMAScript , the W3C DOM Working Group began drafting a standard DOM specification. The completed specification, known as "DOM Level 1", became a W3C Recommendation in late 1998. By 2005, large parts of W3C DOM were well-supported by common ECMAScript-enabled browsers, including Internet Explorer 6 (from 2001), Opera , Safari and Gecko -based browsers (like Mozilla , Firefox , SeaMonkey and Camino ). The W3C DOM Working Group published its final recommendation and subsequently disbanded in 2004. Development efforts migrated to
1600-794: Was partly described in the specifications for HTML 4 . Legacy DOM was limited in the kinds of elements that could be accessed. Form , link and image elements could be referenced with a hierarchical name that began with the root document object. A hierarchical name could make use of either the names or the sequential index of the traversed elements. For example, a form input element could be accessed as either document.myForm.myInput or document.forms[0].elements[0] . The Legacy DOM enabled client-side form validation and simple interface interactivity like creating tooltips . In 1997, Netscape and Microsoft released version 4.0 of Netscape Navigator and Internet Explorer respectively, adding support for Dynamic HTML (DHTML) functionality enabling changes to
#301698