{"id":349,"date":"2011-12-20T11:39:16","date_gmt":"2011-12-20T11:39:16","guid":{"rendered":"http:\/\/javascript-tutor.net\/index.php\/"},"modified":"2017-11-18T05:44:44","modified_gmt":"2017-11-18T05:44:44","slug":"lesson-12-objects-part-4-document-object","status":"publish","type":"page","link":"https:\/\/javascript-tutor.net\/index.php\/lesson-12-objects-part-4-document-object\/","title":{"rendered":"JavaScript Lesson 12: Document Object"},"content":{"rendered":"<h4 align=\"center\"><strong><a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-11-objects-part-3-string-object\/\">&lt;Lesson 11&gt;<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/javascript-tutorial\/\">[Contents]<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-13-function-part-1-introduction\/\">&lt;Lesson 13&gt;<\/a><\/strong><\/h4>\n<p>Document object in JavaScript is one of the most commonly used objects. The main purpose of the document object is to write something to the web page or more appropriately is to display text content in a web page. The document object also holds all the information contains in a web page, such as its background color, its title, the date the web page was last modified and more.Document object has <strong>properties<\/strong> and\u00a0<strong>methods<\/strong>. The properties are shown in the following table:<\/p>\n<p><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script><br \/>\n<ins class=\"adsbygoogle\" style=\"display: block; text-align: center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-3033628290023372\" data-ad-slot=\"5669011038\"><\/ins><br \/>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><\/p>\n<table style=\"table-layout: fixed; width: auto; font-size: 100%;\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<th valign=\"top\"><strong>Properties<\/strong><\/th>\n<th valign=\"top\"><strong>Description<\/strong><\/th>\n<\/tr>\n<tr>\n<td valign=\"top\">bgColor<\/td>\n<td valign=\"top\">Specifies the background color of the webpage.<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\">fgColor<\/td>\n<td valign=\"top\">Specifies the background color of the webpage.<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\">title<\/td>\n<td valign=\"top\">Displays the title of the web page.<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\">location<\/td>\n<td valign=\"top\">Displays URL of the document<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\">lastModified<\/td>\n<td valign=\"top\">The date the web page was last modified.<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\">linkColor<\/td>\n<td valign=\"top\">Hyperlink color\u00a0of a web page\u00a0in hexadecimal\u00a0value<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\">vlinkcolor<\/td>\n<td valign=\"top\">Visited hyperlink color of a web page in hexadecimal value<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\">alinkcolor<\/td>\n<td valign=\"top\">Activated hyperlink color (when the button is pressed and before releasing it) of a web page.<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\">links.length<\/td>\n<td valign=\"top\">Number of links in a web page.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3><strong>12.2 Document Methods<\/strong><\/h3>\n<p>Other than the properties, there are also a number of methods that are associated with the document object. The methods allow the document object to perform some operations.<\/p>\n<p>The methods are listed below:<\/p>\n<table style=\"table-layout: fixed; width: auto; font-size: 100%;\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<th>Method<\/th>\n<th>Description<\/th>\n<\/tr>\n<tr>\n<td>write(&#8220;text&#8221;)<\/td>\n<td>Display text\u00a0 or\u00a0string in the current window<\/td>\n<\/tr>\n<tr>\n<td>writeln(&#8220;text&#8221;)<\/td>\n<td>Display text or\u00a0string in the current window\u00a0and adds a line after the end of the text.<\/td>\n<\/tr>\n<tr>\n<td>Clears( )<\/td>\n<td>Clear the window<\/td>\n<\/tr>\n<tr>\n<td>Close( )<\/td>\n<td>Closes the window<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>For example, if you wish to specify the background of the web page, you can use<\/p>\n<p>document.bgcolor=&#8221;red&#8221;\u00a0 or use the color code\u00a0\u00a0 document.bgcolor=&#8221;#ff0000&#8243;<\/p>\n<p>If you wish to specify the title of the web page, you can use<\/p>\n<p>document.title=&#8221;My Title&#8221;<\/p>\n<p>If you wish to specify the\u00a0color\u00a0of\u00a0the hyperlinks in\u00a0a\u00a0web page, you can use<\/p>\n<p>document.linkColor=&#8221;Cyan&#8221;<\/p>\n<p>Let&#8217;s look at the actual application in a web page, as shown in Example 12.1.<\/p>\n<h4><strong>Example 12.1<\/strong><\/h4>\n<pre style=\"font-size: 100%;\">&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;meta http-equiv=\"Content-Type\" content=\"text\/html; charset=windows-1252\"&gt;\r\n&lt;title&gt;Document Object&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body bgcolor=\"#00FFFF\"&gt;\r\n&lt;a href=\"http:\/\/javascript-tutor.net\/\"&gt;JavaScript Tutorial&lt;\/a&gt;\r\n&lt;br&gt;\r\n&lt;a href=\"http:\/\/www.htmltutor.org\/\"&gt;HTML Tutorial&lt;\/a&gt;\r\n\r\n&lt;hr&gt;\r\n&lt;script&gt;\r\ndocument.bgColor = \"cyan\";\r\ndocument.linkColor=\"Magenta\";\r\ndocument.write(\"This web page title is : \"+document.title);\r\ndocument.write(\"&lt;br&gt;This web page backgroud color code is: \"+document.bgColor);\r\ndocument.write(\"&lt;br&gt;The URL of the web page is: \"+document.location);\r\ndocument.write(\"&lt;br&gt;This web page was last modified at : \"+document.lastModified);\r\ndocument.write(\"&lt;br&gt;The hyperlink color code of this web page is : \"+document.linkColor);\r\ndocument.write(\"&lt;br&gt;The visited hyperlink color code of this web page is : \"+document.vlinkColor);\r\ndocument.write(\"&lt;br&gt;The active hyperlink color code of this web page is : \"+document.alinkColor);\r\ndocument.write(\"&lt;br&gt;The number of hyperlinks of this web page is : \"+document.links.length);\r\ndocument.clear;\r\n\r\n&lt;\/script&gt;\r\n\r\n&lt;\/body&gt;\r\n<\/pre>\n<p>The output is<\/p>\n<p><script type=\"text\/javascript\">\ndocument.bgColor = \"cyan\";\ndocument.linkColor=\"Magenta\";\ndocument.write(\"This web page title is : \"+document.title);\ndocument.write(\"<br \/>This web page backgroud color code is: \"+document.bgColor);\ndocument.write(\"<br \/>The URL of the web page is: \"+document.location);\ndocument.write(\"<br \/>This web page was last modified at : \"+document.lastModified);\ndocument.write(\"<br \/>The hyperlink color code of this web page is : \"+document.linkColor);\ndocument.write(\"<br \/>The visited hyperlink color code of this web page is : \"+document.vlinkColor);\ndocument.write(\"<br \/>The active hyperlink color code of this web page is : \"+document.alinkColor);\ndocument.write(\"<br \/>The number of hyperlinks of this web page is : \"+document.links.length);\ndocument.clear;<\/p>\n<p>\/\/<\/script><\/p>\n<div style=\"background-color: cyan; border: 1px solid blue;\">\n<p><a href=\"\u201dhttp:\/\/javascript-tutor.net\/\u201d\">JavaScript Tutorial<\/a><\/p>\n<p><a href=\"\u201dhttp:\/\/www.htmltutor.org\/\u201d\">HTML Tutorial<\/a><\/p>\n<hr size=\"2\" \/>\n<p>This webpage title is: Document Object<br \/>\nThis webpage background color code is: #00ffff<br \/>\nThe URL of the webpage is: http:\/\/javascript-tutor.net\/java_tutor\/Javascrpt_Example12.1.htm<br \/>\nThis webpage was last modified at : 03\/19\/2011 08:23:51<br \/>\nThe hyperlink color code of this web page is : #ff00ff<br \/>\nThe visited hyperlink color code of this web page is : #800080<br \/>\nThe active hyperlink color code of this web page is : #0000ff<br \/>\nThe number of hyperlinks of this web page is : 2<\/p>\n<\/div>\n<p>Click<a href=\"http:\/\/javascript-tutor.net\/java_tutor\/Javascrpt_Example12.1.htm\"> Example 12.1<\/a> to see the actual output.<br \/>\n<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script><br \/>\n<ins class=\"adsbygoogle\" style=\"display: block; text-align: center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-3033628290023372\" data-ad-slot=\"5669011038\"><\/ins><br \/>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><\/p>\n<h4 align=\"center\"><a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-11-objects-part-3-string-object\/\">&lt;Lesson 11&gt;<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/javascript-tutorial\/\">[Contents]<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-13-function-part-1-introduction\/\">&lt;Lesson 13&gt;<\/a><\/h4>\n","protected":false},"excerpt":{"rendered":"<p>&lt;Lesson 11&gt; [Contents] &lt;Lesson 13&gt; Document object in JavaScript is one of the most commonly used objects. The main purpose of the document object is to write something to the web page or more appropriately is to display text content in a web page. The document object also holds all the information contains in a &hellip; <a href=\"https:\/\/javascript-tutor.net\/index.php\/lesson-12-objects-part-4-document-object\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;JavaScript Lesson 12: Document Object&#8221;<\/span><\/a><\/p>\n","protected":false},"author":35895,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-349","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>JavaScript Lesson 12: Document Object - Learn JavaScript Online | Free Interactive JavaScript Tutorials<\/title>\n<meta name=\"description\" content=\"This javascript lesson shows how to use document object in javascript to create a dynamic web page\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson11.html\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Lesson 12: Document Object - Learn JavaScript Online | Free Interactive JavaScript Tutorials\" \/>\n<meta property=\"og:description\" content=\"This javascript lesson shows how to use document object in javascript to create a dynamic web page\" \/>\n<meta property=\"og:url\" content=\"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson11.html\" \/>\n<meta property=\"og:site_name\" content=\"Learn JavaScript Online | Free Interactive JavaScript Tutorials\" \/>\n<meta property=\"article:modified_time\" content=\"2017-11-18T05:44:44+00:00\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-12-objects-part-4-document-object\/\",\"url\":\"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson11.html\",\"name\":\"JavaScript Lesson 12: Document Object - Learn JavaScript Online | Free Interactive JavaScript Tutorials\",\"isPartOf\":{\"@id\":\"https:\/\/javascript-tutor.net\/#website\"},\"datePublished\":\"2011-12-20T11:39:16+00:00\",\"dateModified\":\"2017-11-18T05:44:44+00:00\",\"description\":\"This javascript lesson shows how to use document object in javascript to create a dynamic web page\",\"breadcrumb\":{\"@id\":\"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson11.html#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson11.html\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson11.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/javascript-tutor.net\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript Lesson 12: Document Object\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/javascript-tutor.net\/#website\",\"url\":\"https:\/\/javascript-tutor.net\/\",\"name\":\"Learn JavaScript Online | Free Interactive JavaScript Tutorials\",\"description\":\"Master JavaScript with free, interactive tutorials for beginners and experienced coders. Practice live coding and visualize how JavaScript works step by step.\",\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript Lesson 12: Document Object - Learn JavaScript Online | Free Interactive JavaScript Tutorials","description":"This javascript lesson shows how to use document object in javascript to create a dynamic web page","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson11.html","og_locale":"en_US","og_type":"article","og_title":"JavaScript Lesson 12: Document Object - Learn JavaScript Online | Free Interactive JavaScript Tutorials","og_description":"This javascript lesson shows how to use document object in javascript to create a dynamic web page","og_url":"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson11.html","og_site_name":"Learn JavaScript Online | Free Interactive JavaScript Tutorials","article_modified_time":"2017-11-18T05:44:44+00:00","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/javascript-tutor.net\/index.php\/lesson-12-objects-part-4-document-object\/","url":"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson11.html","name":"JavaScript Lesson 12: Document Object - Learn JavaScript Online | Free Interactive JavaScript Tutorials","isPartOf":{"@id":"https:\/\/javascript-tutor.net\/#website"},"datePublished":"2011-12-20T11:39:16+00:00","dateModified":"2017-11-18T05:44:44+00:00","description":"This javascript lesson shows how to use document object in javascript to create a dynamic web page","breadcrumb":{"@id":"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson11.html#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson11.html"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson11.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/javascript-tutor.net\/"},{"@type":"ListItem","position":2,"name":"JavaScript Lesson 12: Document Object"}]},{"@type":"WebSite","@id":"https:\/\/javascript-tutor.net\/#website","url":"https:\/\/javascript-tutor.net\/","name":"Learn JavaScript Online | Free Interactive JavaScript Tutorials","description":"Master JavaScript with free, interactive tutorials for beginners and experienced coders. Practice live coding and visualize how JavaScript works step by step.","inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/349","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/users\/35895"}],"replies":[{"embeddable":true,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/comments?post=349"}],"version-history":[{"count":27,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/349\/revisions"}],"predecessor-version":[{"id":2491,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/349\/revisions\/2491"}],"wp:attachment":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/media?parent=349"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}