The\u00c2\u00a0Document Object Model\u00c2\u00a0(DOM) is a\u00c2\u00a0cross-platform\u00c2\u00a0and\u00c2\u00a0language-independent\u00c2\u00a0interface that treats an\u00c2\u00a0XML\u00c2\u00a0or\u00c2\u00a0HTML\u00c2\u00a0document as a\u00c2\u00a0tree structure\u00c2\u00a0wherein each\u00c2\u00a0node\u00c2\u00a0is an\u00c2\u00a0object\u00c2\u00a0representing 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\u00c2\u00a0event handlers\u00c2\u00a0attached to them. Once an event is triggered, the event handlers get executed.<\/p>\n
The principal standardization of the DOM was handled by the\u00c2\u00a0World Wide Web Consortium, which last developed a recommendation in 2004.\u00c2\u00a0WHATWG\u00c2\u00a0took over the development of the standard, publishing it as a\u00c2\u00a0living document. The W3C now publishes stable snapshots of the WHATWG standard.<\/p>\n
The\u00c2\u00a0W3C\u00c2\u00a0DOM Working Group published its final recommendation and subsequently disbanded in 2004. Development efforts migrated to the\u00c2\u00a0WHATWG, which continues to maintain a living standard.\u00c2\u00a0In 2009, the Web Applications group reorganized DOM activities at the W3C.\u00c2\u00a0In 2013, due to a lack of progress and the impending release of\u00c2\u00a0HTML5, the DOM Level 4 specification was reassigned to the\u00c2\u00a0HTML Working Group\u00c2\u00a0to expedite its completion.\u00c2\u00a0Meanwhile, in 2015, the Web Applications group was disbanded and DOM stewardship passed to the Web Platform group.\u00c2\u00a0Beginning with the publication of DOM Level 4 in 2015, the W3C creates new recommendations based on snapshots of the WHATWG standard.<\/p>\n
getElementById<\/code>\u00c2\u00a0function as well as an\u00c2\u00a0event model\u00c2\u00a0and support for\u00c2\u00a0XML namespaces\u00c2\u00a0and CSS.<\/li>\n- DOM Level 3, published in April 2004, added support for\u00c2\u00a0XPath\u00c2\u00a0and keyboard\u00c2\u00a0event handling, as well as an interface for\u00c2\u00a0serializing\u00c2\u00a0documents as XML.<\/li>\n
- DOM Level 4 was published in 2015. It is a snapshot of the WHATWG living standard.<\/li>\n<\/ul>\n
Web browsers:<\/span><\/h3>\nTo\u00c2\u00a0render\u00c2\u00a0a document such as a HTML page, most web browsers use an internal model similar to the\u00c2\u00a0DOM. The nodes of every document are organized in a\u00c2\u00a0tree structure, called the\u00c2\u00a0DOM tree<\/i>, with the topmost node named as “Document object”. When an HTML page is rendered in browsers, the browser downloads the HTML into local memory and automatically parses it to display the page on screen.<\/p>\nJavaScript:<\/span><\/h3>\nWhen 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 the document itself. This allows the creation of dynamic web pages,\u00c2\u00a0because within a page JavaScript can:<\/p>\n
\n- add, change, and remove any of the HTML elements and attributes<\/li>\n
- change any of the CSS styles<\/li>\n
- react to all the existing events<\/li>\n
- create new events<\/li>\n<\/ul>\n
Because the DOM supports navigation in any direction (e.g., parent and previous sibling) and allows for arbitrary modifications, an implementation must at least buffer the document that has been read so far (or some parsed form of it).<\/p>\n
Layout engines:<\/span><\/h3>\nSee also:\u00c2\u00a0Comparison of JavaScript engines (DOM support)<\/div>\nWeb browsers rely on\u00c2\u00a0layout engines\u00c2\u00a0to parse HTML into a DOM. Some layout engines, such as\u00c2\u00a0Trident\/MSHTML, are associated primarily or exclusively with a particular browser, such as Internet Explorer. Others, including\u00c2\u00a0Blink,\u00c2\u00a0WebKit, and\u00c2\u00a0Gecko, are shared by a number of browsers, such as\u00c2\u00a0Google Chrome,\u00c2\u00a0Opera,\u00c2\u00a0Safari, and\u00c2\u00a0Firefox. The different layout engines implement the DOM standards to varying degrees of compliance.<\/p>\n
Libraries:<\/span><\/h3>\nDOM implementations:<\/p>\n
\n- libxml2<\/li>\n
- MSXML<\/li>\n
- Xerces\u00c2\u00a0is a collection of DOM implementations written in C++, Java and Perl<\/li>\n
- XML for <SCRIPT> is a JavaScript-based DOM implementation<\/li>\n
- PHP.Gt DOM\u00c2\u00a0is a server-side DOM implementation based on\u00c2\u00a0libxml2\u00c2\u00a0and brings DOM level 4 compatibility\u00c2\u00a0to the\u00c2\u00a0PHP\u00c2\u00a0programming language<\/li>\n
- Domino\u00c2\u00a0is a Server-side (Node.js) DOM implementation based on Mozilla’s dom.js. Domino is used in the\u00c2\u00a0MediaWiki\u00c2\u00a0stack with Visual Editor.<\/li>\n<\/ul>\n
APIs that expose DOM implementations:<\/p>\n
\n- JAXP\u00c2\u00a0(Java API for XML Processing) is an API for accessing DOM providers<\/li>\n
- Lazarus\u00c2\u00a0(Free Pascal\u00c2\u00a0IDE) contains two variants of the DOM – with UTF-8 and ANSI format<\/li>\n<\/ul>\n
Inspection tools:<\/p>\n
\n- DOM Inspector\u00c2\u00a0is a web developer tool<\/li>\n<\/ul>\n
The above is a brief about\u00c2\u00a0Document Object Model. Watch this space for more updates on the latest trends in Technology.<\/p>\n","protected":false},"excerpt":{"rendered":"
The\u00c2\u00a0Document Object Model\u00c2\u00a0(DOM) is a\u00c2\u00a0cross-platform\u00c2\u00a0and\u00c2\u00a0language-independent\u00c2\u00a0interface<\/p>\n","protected":false},"author":1,"featured_media":1794,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[742,952,7],"tags":[743,953,18],"class_list":["post-1792","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-document-object-model","category-language-interface","category-techtrends","tag-document-object-model","tag-language-interface","tag-technology"],"_links":{"self":[{"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/posts\/1792","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/comments?post=1792"}],"version-history":[{"count":1,"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/posts\/1792\/revisions"}],"predecessor-version":[{"id":1793,"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/posts\/1792\/revisions\/1793"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/media\/1794"}],"wp:attachment":[{"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/media?parent=1792"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/categories?post=1792"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/tags?post=1792"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}