{"id":1486,"date":"2019-04-22T12:54:58","date_gmt":"2019-04-22T07:24:58","guid":{"rendered":"http:\/\/blog.openwebsolutions.in\/?p=1486"},"modified":"2019-04-22T12:54:58","modified_gmt":"2019-04-22T07:24:58","slug":"simplified-methods-of-working-with-dom","status":"publish","type":"post","link":"https:\/\/openwebsolutions.in\/blog\/simplified-methods-of-working-with-dom\/","title":{"rendered":"Simplified methods of working with DOM"},"content":{"rendered":"

A web page is a document which can be displayed in the web browsers or as the HTML source but ultimately both are the same document. Document Object Model (DOM) represents the same document to be manipulated. An object-oriented representation of any web page is called DOM. This web page can be modified with JavaScript.<\/span><\/p>\n

Document Object Model (DOM) is also an interface for HTML and XML documents for programming. DOM represents the page in a way where programs can change the document structure, style, and content. DOM also represents the document as nodes and objects which allow programming languages to connect to the pages.<\/span><\/p>\n

Most modern browsers extend\u00a0W3C DOM<\/span>\u00a0and\u00a0WHATWG DOM<\/span><\/span> standard for implementation. So, care must be taken at the time of using them on the web where documents may be accessed by various browsers with different DOMs.<\/span><\/p>\n

In the code below, standard DOM specifies \u201c<\/span>getElementsByTagName\u201d<\/span>\u00a0method must return a list of all the\u00a0<\/span><P><\/span>\u00a0elements in the document:<\/span><\/p>\n

var paragraphs = document.getElementsByTagName(“P”);<\/b><\/span><\/p>\n

All properties, methods, and events available for manipulating and creating web pages can be organized into objects. For example, the\u00a0<\/span>document<\/b><\/span>\u00a0object that represents the document itself, the\u00a0<\/span>table<\/b><\/span>\u00a0object that implements the special\u00a0<\/span>HTMLTableElement<\/b><\/span>\u00a0DOM interface for accessing HTML tables and so on.<\/span><\/p>\n

The short example above is written\u00a0<\/i>in JavaScript which uses\u00a0the DOM to access the document and its elements. JavaScript language wouldn’t have any model or HTML\u00a0documents,\u00a0XML documents\u00a0or their component parts (e.g. elements) without DOM, though DOM is not a programming language.<\/span><\/p>\n

Every element in a document (the head, tables within the document, table headers, text within the table cells) is part of DOM. They can all be accessed and manipulated using a scripting language like JavaScript for the purpose of DOM.<\/span><\/p>\n

JavaScript and the DOM were tightly intertwined at the starting, but they evolved into separate entities afterward. The page content is stored in the DOM which may be accessed and manipulated via JavaScript, which may lead us to the following equation:<\/span><\/p>\n

API (HTML\u00a0or XML page) = DOM + JS (scripting language)<\/b><\/span><\/p>\n

DOM was designed to be totally independent of any particular programming language. Programming languages which make the structural representation of the document available from a single, consistent API. Though our focus is exclusively on JavaScript, implementations of the DOM can be built for any language.<\/span><\/p>\n

Accessing the DOM<\/b><\/span><\/p>\n

We don’t have to do anything special, to begin with, the DOM because every web browser uses some document object model to make web pages accessible via JavaScript.<\/span><\/p>\n

When you create a script \u2013 whether it is inline in a\u00a0<\/span><script><\/b><\/span>\u00a0element or included in the web page by means of a script loading instruction\u2013you can immediately begin using the API for the\u00a0document<\/b><\/span>\u00a0or\u00a0window<\/b><\/span>\u00a0elements to manipulate the document itself or to get the various elements in the web page.<\/span><\/p>\n

DOM programming may be as simple as the following, which displays an alert message by using the\u00a0alert()<\/b><\/span>\u00a0function from the\u00a0window<\/b><\/span><\/span>\u00a0<\/b><\/span>object. <\/span><\/p>\n

<body onload=”window.alert(‘Welcome to my home page!’);”><\/b><\/span><\/p>\n

Or it will be more sophisticated DOM methods to actually create new content, as in the example below.<\/span><\/p>\n

<html><\/b><\/span><\/p>\n

<head><\/b><\/span><\/p>\n

<script>\u00a0<\/b><\/span><\/p>\n

window.onload = function() <\/b><\/span><\/p>\n

{<\/b><\/span><\/p>\n

var heading = document.createElement(“h1”);<\/b><\/span><\/p>\n

var heading_text = document.createTextNode(“Big Head!”);<\/b><\/span><\/p>\n

heading.appendChild(heading_text);<\/b><\/span><\/p>\n

document.body.appendChild(heading);<\/b><\/span><\/p>\n

}<\/b><\/span><\/p>\n

<\/script><\/b><\/span><\/p>\n

<\/head><\/b><\/span><\/p>\n

<body><\/b><\/span><\/p>\n

<\/body><\/b><\/span><\/p>\n

<\/html><\/b><\/span><\/p>\n

The common APIs in web and XML page scripting using the DOM are listed below:<\/span><\/p>\n

    \n
  1. <\/b>document.getElementById(id)<\/b><\/span><\/li>\n
  2. <\/b>document.getElementsByTagName(name)<\/b><\/span><\/li>\n
  3. <\/b>document.createElement(name)<\/b><\/span><\/li>\n
  4. <\/b>parentNode.appendChild(node)<\/b><\/span><\/li>\n
  5. <\/b>element.innerHTML<\/b><\/span><\/li>\n
  6. <\/b>element.setAttribute()<\/b><\/span><\/li>\n
  7. <\/b>element.getAttribute()<\/b><\/span><\/li>\n
  8. <\/b>element.addEventListener()<\/b><\/span><\/li>\n
  9. <\/b>window.content<\/b><\/span><\/li>\n
  10. <\/b>window.onload<\/b><\/span><\/li>\n
  11. <\/b>console.log()<\/b><\/span><\/li>\n
  12. window.scrollTo()<\/b><\/span><\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"

    A web page is a document which can be displayed in the web browsers or as the HTML source but ultimately both are the same document. Document Object Model (DOM) represents the same document to be manipulated. An object-oriented representation of any web page is called DOM. This web page can be modified with JavaScript. […]<\/p>\n","protected":false},"author":32,"featured_media":1629,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[120],"tags":[125,121],"yoast_head":"\nSimplified methods of working with DOM<\/title>\n<meta name=\"robots\" content=\"index, follow\" \/>\n<meta name=\"googlebot\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta name=\"bingbot\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/openwebsolutions.in\/blog\/simplified-methods-of-working-with-dom\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Simplified methods of working with DOM\" \/>\n<meta property=\"og:description\" content=\"A web page is a document which can be displayed in the web browsers or as the HTML source but ultimately both are the same document. Document Object Model (DOM) represents the same document to be manipulated. An object-oriented representation of any web page is called DOM. This web page can be modified with JavaScript. […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/openwebsolutions.in\/blog\/simplified-methods-of-working-with-dom\/\" \/>\n<meta property=\"og:site_name\" content=\"Openweb Solutions Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-04-22T07:24:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/openwebsolutions.in\/blog\/wp-content\/uploads\/2019\/04\/pic_htmltree.gif\" \/>\n\t<meta property=\"og:image:width\" content=\"486\" \/>\n\t<meta property=\"og:image:height\" content=\"266\" \/>\n<meta name=\"twitter:card\" content=\"summary\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#website\",\"url\":\"https:\/\/openwebsolutions.in\/blog\/\",\"name\":\"Openweb Solutions Blog\",\"description\":\"Transforming ideas into reality\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/openwebsolutions.in\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/simplified-methods-of-working-with-dom\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/openwebsolutions.in\/blog\/wp-content\/uploads\/2019\/04\/pic_htmltree.gif\",\"width\":486,\"height\":266},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/simplified-methods-of-working-with-dom\/#webpage\",\"url\":\"https:\/\/openwebsolutions.in\/blog\/simplified-methods-of-working-with-dom\/\",\"name\":\"Simplified methods of working with DOM\",\"isPartOf\":{\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/openwebsolutions.in\/blog\/simplified-methods-of-working-with-dom\/#primaryimage\"},\"datePublished\":\"2019-04-22T07:24:58+00:00\",\"dateModified\":\"2019-04-22T07:24:58+00:00\",\"author\":{\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#\/schema\/person\/094fa2d34b71e8b2c73c005d1bd4c074\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/openwebsolutions.in\/blog\/simplified-methods-of-working-with-dom\/\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#\/schema\/person\/094fa2d34b71e8b2c73c005d1bd4c074\",\"name\":\"Soumik Hens\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/5028fba9f350d268e8a8845b54985006?s=96&r=g\",\"caption\":\"Soumik Hens\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/posts\/1486"}],"collection":[{"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/comments?post=1486"}],"version-history":[{"count":6,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/posts\/1486\/revisions"}],"predecessor-version":[{"id":1564,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/posts\/1486\/revisions\/1564"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/media\/1629"}],"wp:attachment":[{"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/media?parent=1486"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/categories?post=1486"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/tags?post=1486"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}