{"id":134,"date":"2018-07-26T10:33:02","date_gmt":"2018-07-26T10:33:02","guid":{"rendered":"http:\/\/csp12.epgpbooks.inflibnet.ac.in\/?post_type=chapter&p=134"},"modified":"2018-08-02T06:44:30","modified_gmt":"2018-08-02T06:44:30","slug":"javascript-and-html-dom","status":"publish","type":"chapter","link":"https:\/\/ebooks.inflibnet.ac.in\/csp12\/chapter\/javascript-and-html-dom\/","title":{"rendered":"JavaScript and HTML DOM"},"content":{"raw":"
\r\n\r\nDocument Object Model or DOM<\/strong>\r\n\r\n \r\n

The DOM is a W3C (World Wide Web Consortium) standard. It defines a standard for accessing documents using a platform and language-neutral interface and to dynamically access and update the content, structure and style of a document.<\/p>\r\n \r\n\r\nThe W3C DOM standard is separated into 3 different parts:\r\n\r\n \r\n\r\n1.\u00a0\u00a0\u00a0\u00a0\u00a0 Core DOM - standard model for all document types\r\n\r\n2.\u00a0\u00a0\u00a0\u00a0\u00a0 XML DOM - standard model for XML documents\r\n\r\n3.\u00a0\u00a0\u00a0\u00a0\u00a0 HTML DOM - standard model for HTML documents\r\n\r\n \r\n\r\nThe Legacy DOM<\/strong>\r\n\r\n \r\n

This is the model which was introduced in early versions of JavaScript language. It is well supported by all browsers, but allows access only to certain key portions of documents, such as forms, form elements and images.<\/p>\r\n \r\n\r\nThe W3C DOM<\/strong>\r\n\r\n<\/div>\r\n

This document object model allows access and modification of all document content and is standardized by the World Wide Web Consortium (W3C). This model is supported by almost all the modern browsers.<\/p>\r\n \r\n\r\nJavaScript - Document Object Model or DOM<\/strong>\r\n\r\n \r\n

The way a document content is accessed and modified is called the Document Object Model, or DOM. DOM is an object-oriented model that describes how all elements in an HTML page are arranged. It is used to locate any object in your HTML page (an unique address). Every web page resides inside a browser window which is considered as Window object. A Document object represents the HTML document that is displayed in that window.The Document object has various properties that refer to other objects which allow access to and modification of document content.<\/p>\r\n \r\n\r\nDOM - Objects<\/strong>\r\n\r\n \r\n\r\nHere is a simple hierarchy of a few important objects shown in Figure 18.1.\r\n\r\n \r\n

\"\"<\/p>\r\n \r\n

\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 HTML DOM<\/strong>\r\n\r\n \r\n

The HTML DOM is a standard object model and programming interface for HTML. DOM defines the HTML elements as objects<\/strong>, the properties<\/strong> of all HTML elements, the methods<\/strong> to access all HTML\u00a0elements, the <\/span>events<\/strong> for all HTML elements. The HTML DOM is a standard for how to get, change, add, or delete HTML elements.<\/span><\/p>\r\n\r\n<\/div>\r\n

\r\n\r\n\u00a0 \u00a0 \u00a0JavaScript \u2013 HTML DOM Programming Interface<\/strong>\r\n
    \r\n \t
  • The HTML DOM can be accessed with JavaScript and with other programming languages.<\/li>\r\n \t
  • In the DOM, all HTML elements are defined as objects<\/strong>.The programming interface defines the properties and methods of each object.<\/li>\r\n \t
  • Methods are actions<\/strong> you can perform on HTML Elements.<\/span><\/li>\r\n \t
  • Properties are values<\/strong> of HTML Elements that you can set or change.<\/span><\/li>\r\n<\/ul>\r\n\u00a0 \u00a0 \u00a0 Referencing Objects<\/strong>\r\n\r\n \r\n

    Objects can be referenced using their id or name. It should be unique in the hierarchy. It can be referenced using their numerical position in the hierarchy, by the array index. They can also be referenced using their relation to parent, child, or sibling like parentNode, previousSibling, nextSibling, firstChild, lastChild or the childNodes array.<\/p>\r\n \r\n\r\nTypes of DOM nodes<\/strong>\r\n\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n
    1<\/td>\r\nElement nodes<\/td>\r\nHTML tag<\/td>\r\n<\/tr>\r\n
    2<\/td>\r\nText nodes<\/td>\r\ntext in a block element<\/td>\r\n<\/tr>\r\n
    3<\/td>\r\nAttribute nodes<\/td>\r\nattribute\/value pair<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n
    \r\n

    Element nodes can have children and\/or attributes. Text or Attribute nodes are children in an element node. They cannot have children or attributes and not usually shown when drawing the DOM tree<\/p>\r\n \r\n\r\nTraversing the DOM tree<\/strong>\r\n\r\n \r\n\r\nThe nodes in the DOM tree can be traversed using the relationship like firstChild, lastChild, childNodes, nextSibling, previousSibling and parentNode. The description of these relationships are given in the below Table 18.1.\r\n\r\n<\/div>\r\n

    Table 18.1 Relationships among Nodes<\/strong><\/p>\r\n \r\n

    \"\"<\/p>\r\n \r\n

    \r\n\r\nAccessing HTML Elements<\/strong>\r\n\r\n \r\n

    All HTML elements (objects) are accessed through the document object. A document itself is automatically created. There are several ways to access a specific element, either using paths in the DOM tree or retrieval by tag or retrieval by ID.<\/p>\r\n \r\n\r\nMethods in document and other DOM objects for accessing descendants<\/strong>\r\n\r\n \r\n\r\nThere are two methods in Document object and other DOM objects for accessing the elements. They are,\r\n\r\ngetElementsByTagName\r\n\r\ngetElementsByName\r\n\r\n \r\n\r\nAccessing Elements by Paths<\/strong>\r\n\r\n \r\n\r\nExample<\/strong>\r\n\r\n \r\n\r\nfunction\u00a0 execute()\r\n\r\n{\r\n\r\nvar img = document.images[0];\u00a0\u00a0\u00a0\u00a0 img.src=\"lighton.gif\"\r\n\r\nvar inx = document.forms[0].elements[0];\u00a0\u00a0\u00a0 inx.value=\"xx\"\r\n\r\nvar iny = document.forms[\"form1\"].elements[\"y\"];\u00a0\u00a0\u00a0\u00a0\u00a0 iny.value=\"yy\"\r\n\r\n}\r\n\r\n<p><img src=\"lightoff.gif\" alt=\"light off\" id=\"img1\" \/><\/p> <form id=\"form1\" method=\"get\" action=\"nosuch\"><p>\r\n\r\n<input type=\"text\" name=\"x\"\/>\r\n\r\n<input type=\"text\" name=\"y\"\/>\r\n\r\n<input type=\"reset\"\/><\/p>\r\n\r\n<\/form>\r\n\r\n \r\n\r\nAccessing Elements by Tags<\/strong>\r\n\r\n \r\n\r\nExample<\/strong>\r\n\r\n<\/div>\r\n\u00a0 \u00a0 \u00a0function\u00a0 execute()<\/span>\r\n\r\n{<\/span>\r\n\r\nvar spans = document.getElementsByTagName(\"span\");<\/span>\r\n\r\nspans[0].style.color=\"red\";<\/span>\r\n\r\nspans[1].style.color=\"blue\";<\/span>\r\n\r\nS<\/span>pans[1].style.fontVariant=\"small-caps\";<\/span>\r\n\r\n}<\/span>\r\n\r\n<p> This <span>example<\/span> is lovely. <\/p> <p> But <span> this one <\/span>is even more! <\/p><\/span>\r\n

    \r\n\r\n\u00a0 \u00a0<\/strong>\r\n\r\nAccessing Elements by ID<\/strong>\r\n\r\n \r\n\r\nExample<\/strong>\r\n\r\n \r\n\r\nfunction execute() {\r\n\r\nvar theDiv = document.getElementById(\"div1\");\r\n\r\nif (theDiv.style.visibility==\"hidden\" )\r\n\r\n{ theDiv.style.visibility=\"visible\" } else { theDiv.style.visibility=\"hidden\" }\r\n\r\n}\r\n\r\n<div id = \"div1\"> This text can be hidden! <\/div>\r\n\r\n \r\n\r\nHTML DOM - Example<\/strong>\r\n\r\n \r\n\r\nExample:<\/strong>\r\n\r\n \r\n\r\nTo change the content ( i.e., the innerHTML) of the <p> element with id = \"demo\u201c.\r\n\r\n \r\n\r\n<html>\r\n\r\n<body>\r\n\r\n<p id=\"demo\"><\/p>\r\n\r\n<script>\r\n\r\ndocument.getElementById(\"demo\").innerHTML = \"Hello World!\";\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n\r\n<\/html>\r\n\r\n \r\n\r\ngetElementById is a method and innerHTML is a property.\r\n\r\n \r\n\r\nThe \u201cwindow\u201d Object<\/strong>\r\n\r\n \r\n

    It is the highest-level object in the JavaScript browser object hierarchy. It is the default object and is created automatically when a page is loaded. Since it is the default object, we may omit writing window explicitly.<\/p>\r\n \r\n\r\nHence we use the method\r\n\r\ndocument.write(\u201ca test message\u201d)\r\n\r\ninstead of\r\n\r\nwindow.document.write(\u201ca test message\u201d);<\/span>\r\n\r\nIt also includes several properties and methods for us to manipulate the webpage.<\/span>\r\n\r\n \r\n\r\n\u201cwindow\u201d Object - Property<\/strong>\r\n\r\n \r\n\r\nSome of the properties of the window object is listed in Table 18.2.<\/span>\r\n\r\n<\/div>\r\n

    \"\"<\/p>\r\n \r\n\r\n\u201cwindow\u201d Object - Method<\/strong>\r\n\r\n \r\n\r\nSome of the methods of the window object is listed in Table 18.3.\r\n\r\n \r\n

    \"\"<\/p>\r\n \r\n\r\n\u201cwindow\u201d Object - Attribute<\/strong>\r\n\r\n \r\n\r\nSome of the attributes of the window object is listed in Table 18.4.\r\n\r\n \r\n

    \"\"<\/p>\r\n \r\n

    \r\n\r\nWindow object example<\/strong>\r\n\r\n \r\n\r\n<html>\r\n\r\n<head>\r\n\r\n<script>\r\n\r\nvar w;\r\n\r\nfunction openwindow()\r\n\r\n{\r\n\r\nw = window.open('','', 'width=100,height=100');\r\n\r\nw.focus();\r\n\r\n}\r\n\r\nfunction myFunction()\r\n\r\n{\r\n\r\nw.resizeBy(50, 50);\r\n\r\nw.focus();\r\n\r\n}\r\n\r\n<\/script>\r\n\r\n<\/head>\r\n\r\n<body>\r\n\r\n<button onclick=\"openwindow()\">Create window<\/button> <button onclick=\"myFunction()\">Resize window<\/button> <\/body>\r\n\r\n<\/html>\r\n\r\n<\/div>\r\n

    This example shows the use of window<\/strong> object. The example shows the open(), resize() and focus() method of the window object. There are two buttons, \"Create Window\" and \"Resize window\". On clicking these buttons, it invokes the open() method or resize() method. Once the window is resized, in order to gain focus on the window, focus() method is also used with the window object as shown in Figure 18.2<\/p>\r\n \r\n

    \"\"<\/p>\r\n \r\n\r\nThe \u201cdocument\u201d Object<\/strong>\r\n\r\n \r\n

    It is one of the important objects in any window or frame. The document object represents a web document or a page in a browser window.<\/p>\r\n \r\n\r\n\u201cdocument\u201d Object - Property<\/strong>\r\n\r\n \r\n\r\nSome of the properties of the document object is listed in Table 18.5.\r\n\r\n \r\n

    Table 18.5 \u201cdocument\u201d Object - Property<\/strong><\/p>\r\n \r\n

    \"\"<\/p>\r\n \r\n\r\n\u201cdocument\u201d Object - Method<\/strong>\r\n\r\n \r\n\r\nSome of the methods of the document object is listed in Table 18.6.\r\n\r\n \r\n

    \"\"<\/p>\r\n \r\n

    \r\n\r\nDocument Object Example<\/strong>\r\n\r\n \r\n\r\n<html>\r\n\r\n<body>\r\n\r\n<script>\r\n\r\ndocument.write(\"Hello World!\");\r\n\r\n<\/script>\r\n\r\n<p>Click the button to display the number of script elements in the document.<\/p> <button onclick=\"myFunction()\">Try it<\/button>\r\n\r\n<p id=\"demo\"><\/p>\r\n\r\n<script>\r\n\r\nfunction myFunction() {\r\n\r\nvar x = document.scripts.length;\r\n\r\ndocument.getElementById(\"demo\").innerHTML = \"Found \" + x + \" script elements.\";\r\n\r\n}\r\n\r\n<\/script>\r\n\r\n<\/body><\/span>\r\n\r\n<\/html><\/span>\r\n\r\n<\/div>\r\n

    This example demonstrates how document object can be used. The write() method can be used with the document object to display output text \"Hello World!\". On clicking the button, the number of scripts found in the document can be displayed using the property \"length\" of the object as shown in Figure 18.3.<\/p>\r\n \r\n

    \"\"<\/p>\r\n \r\n\r\n \r\n\r\n<html>\r\n\r\n<body>\r\n\r\n<p>Click the button to display the URL of the document.<\/p> <button onclick=\"myFunction()\">Try it<\/button> <p id=\"demo\"><\/p>\r\n\r\n<script>\r\n\r\nfunction myFunction()\r\n\r\n{\r\n\r\nvar x = document.URL;\r\n\r\ndocument.getElementById(\"demo\").innerHTML = x;\r\n\r\n}\r\n\r\n<\/script><\/body>\r\n\r\n<\/html>\r\n\r\n \r\n

    Figure 18.4 displays the URL of the document. The example shows the use of the property \"URL\" used with the document object.<\/p>\r\n \r\n

    \"\"<\/p>\r\n \r\n\r\nThe \u201chistory\u201d Object<\/strong>\r\n\r\n \r\n

    Each time you visit a web page and click on the \u201cBack\u201d or \u201cForward\u201d arrow buttons on your browser toolbar, you are accessing the history list. You can also add similar buttons \/ links that allow users to move backward and forward via the information stored in the history object.<\/p>\r\n \r\n\r\n\u201chistory\u201d Object - Property<\/strong>\r\n\r\n \r\n\r\nSome of the properties of the history object is listed in Table 18.7.\r\n\r\n \r\n

    \"\"<\/p>\r\n \r\n\r\n\u201chistory\u201d Object - Method<\/strong>\r\n\r\n \r\n\r\nSome of the methods of the history object is listed in Table 18.8.\r\n\r\n \r\n

    \"\"<\/p>\r\n \r\n\r\nHistory Object Example<\/strong>\r\n\r\n \r\n\r\n<html>\r\n\r\n<body>\r\n\r\n<p>Display the number of URLs in the history list:<\/p> <button onclick=\"myFunction()\">Try it<\/button>\r\n\r\n<p id=\"demo\"><\/p>\r\n\r\n<script>\r\n\r\nfunction myFunction()\r\n\r\n{\r\n\r\ndocument.getElementById(\"demo\").innerHTML = history.length;\r\n\r\n}\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n\r\n<\/html>\r\n\r\n \r\n\r\nFigure 18.5 shows the property length of the history object. It displays the number of URL's in the history list.\r\n\r\n \r\n

    \"\"<\/p>\r\n \r\n\r\nHistory Object Example<\/strong>\r\n\r\n \r\n\r\n<html>\r\n\r\n<head>\r\n\r\n<script>\r\n\r\nfunction goBack()\r\n\r\n{\r\n\r\nwindow.history.go(-2)\r\n\r\n}\r\n\r\n<\/script>\r\n\r\n<\/head>\r\n\r\n<body>\r\n\r\n<button onclick=\"goBack()\">Go 2 pages back<\/button> <\/body>\r\n\r\n<\/html>\r\n\r\n \r\n

    This example uses the method go() of the \"history\" object. Figure 18.6 displays the button \"Go 2 pages back\". On clicking the button, it calls the function goBack() which navigates two pages back and hence the output shown as the Google home page shown in Figure 18.7.<\/p>\r\n \r\n

    \"\"<\/p>\r\n \r\n

    \"\"<\/p>\r\n \r\n

    \r\n\r\nAnchor Object - Example<\/strong>\r\n\r\n \r\n\r\n<html>\r\n\r\n<body>\r\n\r\n<\/div>\r\n \r\n\r\n<p> <a<\/strong> id=\"myAnchor\"\r\n\r\n \r\n\r\nhref=\"http:\/\/www.example.com:4097\/test.htm#part2\">Exam ple link <\/a><\/strong><\/p> <p>Click the button to display the port num ber of the link above.<\/p> <button onclick=\"myFunction()\">Try it<\/button>\r\n\r\n \r\n\r\n<p id=\"demo\"><\/p>\r\n\r\n<script>\r\n\r\n \r\n\r\nfunction myFunction() {\r\n\r\n \r\n\r\nvar x = document.getElementById(\"myAnchor\").port; <\/strong>document.getElementById(\"demo\").innerHTML = x;\r\n\r\n}\r\n\r\n<\/script>\r\n\r\n<\/ body>\r\n\r\n<\/ html>\r\n\r\n \r\n

    This example shows the property \"port\" used with the Anchor object. The property retrieves the port number of the anchor given as link and displays it as shown in Figure 18.8.<\/p>\r\n \r\n

    \"\"<\/p>\r\n \r\n

    \r\n\r\n\u00a0 \u00a0 The \u201cform\u201d Object<\/strong>\r\n\r\n \r\n

    The form object is accessed as a property of the document object. Each form element in a form (text input field, radio buttons), is further defined by other objects. The browser creates a unique \u201cform\u201d object for each form in a document. You can access the form object \u201cform1\u201d using the path document.form1.<\/p>\r\n\r\n<\/div>\r\n\u00a0 \u00a0Form Element-Based Objects<\/strong>\r\n

    \r\n\r\n \r\n\r\nHTML forms can include eight types of input elements\r\n\r\na.\u00a0 Text fields, Textarea fields\r\n\r\nb.\u00a0 Radio buttons\r\n\r\nc.\u00a0 Check box buttons\r\n\r\nd.\u00a0 Hidden fields\r\n\r\ne.\u00a0 Password fields\r\n\r\nf.\u00a0 Combo box select menu\r\n\r\ng. List select menu\r\n\r\n \r\n\r\nWorking with DOM<\/strong>\r\n\r\n \r\n\r\nExample:<\/strong>\r\n\r\n \r\n\r\n<html>\r\n\r\n<body>\r\n\r\n<img border=\"0\" src=\"grapes.jpg\" width=\"48\" height=\"48\">< br> <img border=\"0\" src=\"flower.jpg\" width=\"107\" height=\"98\"><br> <img border=\"0\" src=\"fish.jpg\" width=\"107\" height=\"98\"><br> <p>\r\n\r\n<script type=\"text\/javascript\"> document.write(\"<hr><b>This document contains: \"\r\n\r\n+\u00a0 document.images.length + \" images.<\/b>\") <\/script>\r\n\r\n<\/p>\r\n\r\n<\/body>\r\n\r\n<\/html>\r\n\r\n \r\n

    This example demonstrate the property length used with the image object. Figure 18.9 displays the number of images found in the document object.<\/p>\r\n \r\n\r\nWorking with DOM - Output<\/strong>\r\n\r\n<\/div>\r\n\"\"<\/strong>\r\n\r\n \r\n\r\n \r\n\r\nSummary<\/strong>\r\n\r\n \r\n

    This module is discussed about HTML DOM object hierarchy and explains about how to access HTML elements using DOM. This module also explores about working with DOM objects using JavaScript.<\/p>\r\n \r\n\r\nWeb Links<\/strong>\r\n

      \r\n \t
    • www.doc.ic.ac.uk\/~rcheung\/teaching\/2720\/ppt<\/strong>\/lecture04c.ppt<\/strong><\/em><\/li>\r\n \t
    • www.cs.huji.ac.il\/~dbi\/lectures\/dhtml<\/strong>\/dhtml<\/strong>.ppt<\/strong><\/em><\/li>\r\n<\/ul>","rendered":"
      \n

      Document Object Model or DOM<\/strong><\/p>\n

       <\/p>\n

      The DOM is a W3C (World Wide Web Consortium) standard. It defines a standard for accessing documents using a platform and language-neutral interface and to dynamically access and update the content, structure and style of a document.<\/p>\n

       <\/p>\n

      The W3C DOM standard is separated into 3 different parts:<\/p>\n

       <\/p>\n

      1.\u00a0\u00a0\u00a0\u00a0\u00a0 Core DOM – standard model for all document types<\/p>\n

      2.\u00a0\u00a0\u00a0\u00a0\u00a0 XML DOM – standard model for XML documents<\/p>\n

      3.\u00a0\u00a0\u00a0\u00a0\u00a0 HTML DOM – standard model for HTML documents<\/p>\n

       <\/p>\n

      The Legacy DOM<\/strong><\/p>\n

       <\/p>\n

      This is the model which was introduced in early versions of JavaScript language. It is well supported by all browsers, but allows access only to certain key portions of documents, such as forms, form elements and images.<\/p>\n

       <\/p>\n

      The W3C DOM<\/strong><\/p>\n<\/div>\n

      This document object model allows access and modification of all document content and is standardized by the World Wide Web Consortium (W3C). This model is supported by almost all the modern browsers.<\/p>\n

       <\/p>\n

      JavaScript – Document Object Model or DOM<\/strong><\/p>\n

       <\/p>\n

      The way a document content is accessed and modified is called the Document Object Model, or DOM. DOM is an object-oriented model that describes how all elements in an HTML page are arranged. It is used to locate any object in your HTML page (an unique address). Every web page resides inside a browser window which is considered as Window object. A Document object represents the HTML document that is displayed in that window.The Document object has various properties that refer to other objects which allow access to and modification of document content.<\/p>\n

       <\/p>\n

      DOM – Objects<\/strong><\/p>\n

       <\/p>\n

      Here is a simple hierarchy of a few important objects shown in Figure 18.1.<\/p>\n

       <\/p>\n

      \"\"<\/p>\n

       <\/p>\n

      \n

      \u00a0 \u00a0 \u00a0 \u00a0 HTML DOM<\/strong><\/p>\n

       <\/p>\n

      The HTML DOM is a standard object model and programming interface for HTML. DOM defines the HTML elements as objects<\/strong>, the properties<\/strong> of all HTML elements, the methods<\/strong> to access all HTML\u00a0elements, the <\/span>events<\/strong> for all HTML elements. The HTML DOM is a standard for how to get, change, add, or delete HTML elements.<\/span><\/p>\n<\/div>\n

      \n

      \u00a0 \u00a0 \u00a0JavaScript \u2013 HTML DOM Programming Interface<\/strong><\/p>\n

        \n
      • The HTML DOM can be accessed with JavaScript and with other programming languages.<\/li>\n
      • In the DOM, all HTML elements are defined as objects<\/strong>.The programming interface defines the properties and methods of each object.<\/li>\n
      • Methods are actions<\/strong> you can perform on HTML Elements.<\/span><\/li>\n
      • Properties are values<\/strong> of HTML Elements that you can set or change.<\/span><\/li>\n<\/ul>\n

        \u00a0 \u00a0 \u00a0 Referencing Objects<\/strong><\/p>\n

         <\/p>\n

        Objects can be referenced using their id or name. It should be unique in the hierarchy. It can be referenced using their numerical position in the hierarchy, by the array index. They can also be referenced using their relation to parent, child, or sibling like parentNode, previousSibling, nextSibling, firstChild, lastChild or the childNodes array.<\/p>\n

         <\/p>\n

        Types of DOM nodes<\/strong><\/p>\n<\/div>\n\n\n\n\n\n
        1<\/td>\nElement nodes<\/td>\nHTML tag<\/td>\n<\/tr>\n
        2<\/td>\nText nodes<\/td>\ntext in a block element<\/td>\n<\/tr>\n
        3<\/td>\nAttribute nodes<\/td>\nattribute\/value pair<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
        \n

        Element nodes can have children and\/or attributes. Text or Attribute nodes are children in an element node. They cannot have children or attributes and not usually shown when drawing the DOM tree<\/p>\n

         <\/p>\n

        Traversing the DOM tree<\/strong><\/p>\n

         <\/p>\n

        The nodes in the DOM tree can be traversed using the relationship like firstChild, lastChild, childNodes, nextSibling, previousSibling and parentNode. The description of these relationships are given in the below Table 18.1.<\/p>\n<\/div>\n

        Table 18.1 Relationships among Nodes<\/strong><\/p>\n

         <\/p>\n

        \"\"<\/p>\n

         <\/p>\n

        \n

        Accessing HTML Elements<\/strong><\/p>\n

         <\/p>\n

        All HTML elements (objects) are accessed through the document object. A document itself is automatically created. There are several ways to access a specific element, either using paths in the DOM tree or retrieval by tag or retrieval by ID.<\/p>\n

         <\/p>\n

        Methods in document and other DOM objects for accessing descendants<\/strong><\/p>\n

         <\/p>\n

        There are two methods in Document object and other DOM objects for accessing the elements. They are,<\/p>\n

        getElementsByTagName<\/p>\n

        getElementsByName<\/p>\n

         <\/p>\n

        Accessing Elements by Paths<\/strong><\/p>\n

         <\/p>\n

        Example<\/strong><\/p>\n

         <\/p>\n

        function\u00a0 execute()<\/p>\n

        {<\/p>\n

        var img = document.images[0];\u00a0\u00a0\u00a0\u00a0 img.src=”lighton.gif”<\/p>\n

        var inx = document.forms[0].elements[0];\u00a0\u00a0\u00a0 inx.value=”xx”<\/p>\n

        var iny = document.forms[“form1”].elements[“y”];\u00a0\u00a0\u00a0\u00a0\u00a0 iny.value=”yy”<\/p>\n

        }<\/p>\n

        <p><img src=”lightoff.gif” alt=”light off” id=”img1″ \/><\/p> <form id=”form1″ method=”get” action=”nosuch”><p><\/p>\n

        <input type=”text” name=”x”\/><\/p>\n

        <input type=”text” name=”y”\/><\/p>\n

        <input type=”reset”\/><\/p><\/p>\n

        <\/form><\/p>\n

         <\/p>\n

        Accessing Elements by Tags<\/strong><\/p>\n

         <\/p>\n

        Example<\/strong><\/p>\n<\/div>\n

        \u00a0 \u00a0 \u00a0function\u00a0 execute()<\/span><\/p>\n

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

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

        spans[0].style.color=”red”;<\/span><\/p>\n

        spans[1].style.color=”blue”;<\/span><\/p>\n

        S<\/span>pans[1].style.fontVariant=”small-caps”;<\/span><\/p>\n

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

        <p> This <span>example<\/span> is lovely. <\/p> <p> But <span> this one <\/span>is even more! <\/p><\/span><\/p>\n

        \n

        \u00a0 \u00a0<\/strong><\/p>\n

        Accessing Elements by ID<\/strong><\/p>\n

         <\/p>\n

        Example<\/strong><\/p>\n

         <\/p>\n

        function execute() {<\/p>\n

        var theDiv = document.getElementById(“div1″);<\/p>\n

        if (theDiv.style.visibility==”hidden” )<\/p>\n

        { theDiv.style.visibility=”visible” } else { theDiv.style.visibility=”hidden” }<\/p>\n

        }<\/p>\n

        <div id = “div1”> This text can be hidden! <\/div><\/p>\n

         <\/p>\n

        HTML DOM – Example<\/strong><\/p>\n

         <\/p>\n

        Example:<\/strong><\/p>\n

         <\/p>\n

        To change the content ( i.e., the innerHTML) of the <p> element with id = “demo\u201c.<\/p>\n

         <\/p>\n

        <html><\/p>\n

        <body><\/p>\n

        <p id=”demo”><\/p><\/p>\n

        <script><\/p>\n

        document.getElementById(“demo”).innerHTML = “Hello World!”;<\/p>\n

        <\/script><\/p>\n

        <\/body><\/p>\n

        <\/html><\/p>\n

         <\/p>\n

        getElementById is a method and innerHTML is a property.<\/p>\n

         <\/p>\n

        The \u201cwindow\u201d Object<\/strong><\/p>\n

         <\/p>\n

        It is the highest-level object in the JavaScript browser object hierarchy. It is the default object and is created automatically when a page is loaded. Since it is the default object, we may omit writing window explicitly.<\/p>\n

         <\/p>\n

        Hence we use the method<\/p>\n

        document.write(\u201ca test message\u201d)<\/p>\n

        instead of<\/p>\n

        window.document.write(\u201ca test message\u201d);<\/span><\/p>\n

        It also includes several properties and methods for us to manipulate the webpage.<\/span><\/p>\n

         <\/p>\n

        \u201cwindow\u201d Object – Property<\/strong><\/p>\n

         <\/p>\n

        Some of the properties of the window object is listed in Table 18.2.<\/span><\/p>\n<\/div>\n

        \"\"<\/p>\n

         <\/p>\n

        \u201cwindow\u201d Object – Method<\/strong><\/p>\n

         <\/p>\n

        Some of the methods of the window object is listed in Table 18.3.<\/p>\n

         <\/p>\n

        \"\"<\/p>\n

         <\/p>\n

        \u201cwindow\u201d Object – Attribute<\/strong><\/p>\n

         <\/p>\n

        Some of the attributes of the window object is listed in Table 18.4.<\/p>\n

         <\/p>\n

        \"\"<\/p>\n

         <\/p>\n

        \n

        Window object example<\/strong><\/p>\n

         <\/p>\n

        <html><\/p>\n

        <head><\/p>\n

        <script><\/p>\n

        var w;<\/p>\n

        function openwindow()<\/p>\n

        {<\/p>\n

        w = window.open(”,”, ‘width=100,height=100’);<\/p>\n

        w.focus();<\/p>\n

        }<\/p>\n

        function myFunction()<\/p>\n

        {<\/p>\n

        w.resizeBy(50, 50);<\/p>\n

        w.focus();<\/p>\n

        }<\/p>\n

        <\/script><\/p>\n

        <\/head><\/p>\n

        <body><\/p>\n

        <button onclick=”openwindow()”>Create window<\/button> <button onclick=”myFunction()”>Resize window<\/button> <\/body><\/p>\n

        <\/html><\/p>\n<\/div>\n

        This example shows the use of window<\/strong> object. The example shows the open(), resize() and focus() method of the window object. There are two buttons, “Create Window” and “Resize window”. On clicking these buttons, it invokes the open() method or resize() method. Once the window is resized, in order to gain focus on the window, focus() method is also used with the window object as shown in Figure 18.2<\/p>\n

         <\/p>\n

        \"\"<\/p>\n

         <\/p>\n

        The \u201cdocument\u201d Object<\/strong><\/p>\n

         <\/p>\n

        It is one of the important objects in any window or frame. The document object represents a web document or a page in a browser window.<\/p>\n

         <\/p>\n

        \u201cdocument\u201d Object – Property<\/strong><\/p>\n

         <\/p>\n

        Some of the properties of the document object is listed in Table 18.5.<\/p>\n

         <\/p>\n

        Table 18.5 \u201cdocument\u201d Object – Property<\/strong><\/p>\n

         <\/p>\n

        \"\"<\/p>\n

         <\/p>\n

        \u201cdocument\u201d Object – Method<\/strong><\/p>\n

         <\/p>\n

        Some of the methods of the document object is listed in Table 18.6.<\/p>\n

         <\/p>\n

        \"\"<\/p>\n

         <\/p>\n

        \n

        Document Object Example<\/strong><\/p>\n

         <\/p>\n

        <html><\/p>\n

        <body><\/p>\n

        <script><\/p>\n

        document.write(“Hello World!”);<\/p>\n

        <\/script><\/p>\n

        <p>Click the button to display the number of script elements in the document.<\/p> <button onclick=”myFunction()”>Try it<\/button><\/p>\n

        <p id=”demo”><\/p><\/p>\n

        <script><\/p>\n

        function myFunction() {<\/p>\n

        var x = document.scripts.length;<\/p>\n

        document.getElementById(“demo”).innerHTML = “Found ” + x + ” script elements.”;<\/p>\n

        }<\/p>\n

        <\/script><\/p>\n

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

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

        This example demonstrates how document object can be used. The write() method can be used with the document object to display output text “Hello World!”. On clicking the button, the number of scripts found in the document can be displayed using the property “length” of the object as shown in Figure 18.3.<\/p>\n

         <\/p>\n

        \"\"<\/p>\n

         <\/p>\n

         <\/p>\n

        <html><\/p>\n

        <body><\/p>\n

        <p>Click the button to display the URL of the document.<\/p> <button onclick=”myFunction()”>Try it<\/button> <p id=”demo”><\/p><\/p>\n

        <script><\/p>\n

        function myFunction()<\/p>\n

        {<\/p>\n

        var x = document.URL;<\/p>\n

        document.getElementById(“demo”).innerHTML = x;<\/p>\n

        }<\/p>\n

        <\/script><\/body><\/p>\n

        <\/html><\/p>\n

         <\/p>\n

        Figure 18.4 displays the URL of the document. The example shows the use of the property “URL” used with the document object.<\/p>\n

         <\/p>\n

        \"\"<\/p>\n

         <\/p>\n

        The \u201chistory\u201d Object<\/strong><\/p>\n

         <\/p>\n

        Each time you visit a web page and click on the \u201cBack\u201d or \u201cForward\u201d arrow buttons on your browser toolbar, you are accessing the history list. You can also add similar buttons \/ links that allow users to move backward and forward via the information stored in the history object.<\/p>\n

         <\/p>\n

        \u201chistory\u201d Object – Property<\/strong><\/p>\n

         <\/p>\n

        Some of the properties of the history object is listed in Table 18.7.<\/p>\n

         <\/p>\n

        \"\"<\/p>\n

         <\/p>\n

        \u201chistory\u201d Object – Method<\/strong><\/p>\n

         <\/p>\n

        Some of the methods of the history object is listed in Table 18.8.<\/p>\n

         <\/p>\n

        \"\"<\/p>\n

         <\/p>\n

        History Object Example<\/strong><\/p>\n

         <\/p>\n

        <html><\/p>\n

        <body><\/p>\n

        <p>Display the number of URLs in the history list:<\/p> <button onclick=”myFunction()”>Try it<\/button><\/p>\n

        <p id=”demo”><\/p><\/p>\n

        <script><\/p>\n

        function myFunction()<\/p>\n

        {<\/p>\n

        document.getElementById(“demo”).innerHTML = history.length;<\/p>\n

        }<\/p>\n

        <\/script><\/p>\n

        <\/body><\/p>\n

        <\/html><\/p>\n

         <\/p>\n

        Figure 18.5 shows the property length of the history object. It displays the number of URL’s in the history list.<\/p>\n

         <\/p>\n

        \"\"<\/p>\n

         <\/p>\n

        History Object Example<\/strong><\/p>\n

         <\/p>\n

        <html><\/p>\n

        <head><\/p>\n

        <script><\/p>\n

        function goBack()<\/p>\n

        {<\/p>\n

        window.history.go(-2)<\/p>\n

        }<\/p>\n

        <\/script><\/p>\n

        <\/head><\/p>\n

        <body><\/p>\n

        <button onclick=”goBack()”>Go 2 pages back<\/button> <\/body><\/p>\n

        <\/html><\/p>\n

         <\/p>\n

        This example uses the method go() of the “history” object. Figure 18.6 displays the button “Go 2 pages back”. On clicking the button, it calls the function goBack() which navigates two pages back and hence the output shown as the Google home page shown in Figure 18.7.<\/p>\n

         <\/p>\n

        \"\"<\/p>\n

         <\/p>\n

        \"\"<\/p>\n

         <\/p>\n

        \n

        Anchor Object – Example<\/strong><\/p>\n

         <\/p>\n

        <html><\/p>\n

        <body><\/p>\n<\/div>\n

         <\/p>\n

        <p> <a<\/strong> id=”myAnchor”<\/p>\n

         <\/p>\n

        href=”http:\/\/www.example.com:4097\/test.htm#part2″>Exam ple link <\/a><\/strong><\/p> <p>Click the button to display the port num ber of the link above.<\/p> <button onclick=”myFunction()”>Try it<\/button><\/p>\n

         <\/p>\n

        <p id=”demo”><\/p><\/p>\n

        <script><\/p>\n

         <\/p>\n

        function myFunction() {<\/p>\n

         <\/p>\n

        var x = document.getElementById(“myAnchor”).port; <\/strong>document.getElementById(“demo”).innerHTML = x;<\/p>\n

        }<\/p>\n

        <\/script><\/p>\n

        <\/ body><\/p>\n

        <\/ html><\/p>\n

         <\/p>\n

        This example shows the property “port” used with the Anchor object. The property retrieves the port number of the anchor given as link and displays it as shown in Figure 18.8.<\/p>\n

         <\/p>\n

        \"\"<\/p>\n

         <\/p>\n

        \n

        \u00a0 \u00a0 The \u201cform\u201d Object<\/strong><\/p>\n

         <\/p>\n

        The form object is accessed as a property of the document object. Each form element in a form (text input field, radio buttons), is further defined by other objects. The browser creates a unique \u201cform\u201d object for each form in a document. You can access the form object \u201cform1\u201d using the path document.form1.<\/p>\n<\/div>\n

        \u00a0 \u00a0Form Element-Based Objects<\/strong><\/p>\n

        \n

         <\/p>\n

        HTML forms can include eight types of input elements<\/p>\n

        a.\u00a0 Text fields, Textarea fields<\/p>\n

        b.\u00a0 Radio buttons<\/p>\n

        c.\u00a0 Check box buttons<\/p>\n

        d.\u00a0 Hidden fields<\/p>\n

        e.\u00a0 Password fields<\/p>\n

        f.\u00a0 Combo box select menu<\/p>\n

        g. List select menu<\/p>\n

         <\/p>\n

        Working with DOM<\/strong><\/p>\n

         <\/p>\n

        Example:<\/strong><\/p>\n

         <\/p>\n

        <html><\/p>\n

        <body><\/p>\n

        <img border=”0″ src=”grapes.jpg” width=”48″ height=”48″>< br> <img border=”0″ src=”flower.jpg” width=”107″ height=”98″><br> <img border=”0″ src=”fish.jpg” width=”107″ height=”98″><br> <p><\/p>\n

        <script type=”text\/javascript”> document.write(“<hr><b>This document contains: ”<\/p>\n

        +\u00a0 document.images.length + ” images.<\/b>”) <\/script><\/p>\n

        <\/p><\/p>\n

        <\/body><\/p>\n

        <\/html><\/p>\n

         <\/p>\n

        This example demonstrate the property length used with the image object. Figure 18.9 displays the number of images found in the document object.<\/p>\n

         <\/p>\n

        Working with DOM – Output<\/strong><\/p>\n<\/div>\n

        \"\"<\/strong><\/p>\n

         <\/p>\n

         <\/p>\n

        Summary<\/strong><\/p>\n

         <\/p>\n

        This module is discussed about HTML DOM object hierarchy and explains about how to access HTML elements using DOM. This module also explores about working with DOM objects using JavaScript.<\/p>\n

         <\/p>\n

        Web Links<\/strong><\/p>\n

          \n
        • www.doc.ic.ac.uk\/~rcheung\/teaching\/2720\/ppt<\/strong>\/lecture04c.ppt<\/strong><\/em><\/li>\n
        • www.cs.huji.ac.il\/~dbi\/lectures\/dhtml<\/strong>\/dhtml<\/strong>.ppt<\/strong><\/em><\/li>\n<\/ul>\n","protected":false},"author":4,"menu_order":16,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":["dr-m-vijayalakshmi"],"pb_section_license":""},"chapter-type":[],"contributor":[58],"license":[],"class_list":["post-134","chapter","type-chapter","status-publish","hentry","contributor-dr-m-vijayalakshmi"],"part":3,"_links":{"self":[{"href":"https:\/\/ebooks.inflibnet.ac.in\/csp12\/wp-json\/pressbooks\/v2\/chapters\/134","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ebooks.inflibnet.ac.in\/csp12\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/ebooks.inflibnet.ac.in\/csp12\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/ebooks.inflibnet.ac.in\/csp12\/wp-json\/wp\/v2\/users\/4"}],"version-history":[{"count":6,"href":"https:\/\/ebooks.inflibnet.ac.in\/csp12\/wp-json\/pressbooks\/v2\/chapters\/134\/revisions"}],"predecessor-version":[{"id":545,"href":"https:\/\/ebooks.inflibnet.ac.in\/csp12\/wp-json\/pressbooks\/v2\/chapters\/134\/revisions\/545"}],"part":[{"href":"https:\/\/ebooks.inflibnet.ac.in\/csp12\/wp-json\/pressbooks\/v2\/parts\/3"}],"metadata":[{"href":"https:\/\/ebooks.inflibnet.ac.in\/csp12\/wp-json\/pressbooks\/v2\/chapters\/134\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/ebooks.inflibnet.ac.in\/csp12\/wp-json\/wp\/v2\/media?parent=134"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/ebooks.inflibnet.ac.in\/csp12\/wp-json\/pressbooks\/v2\/chapter-type?post=134"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/ebooks.inflibnet.ac.in\/csp12\/wp-json\/wp\/v2\/contributor?post=134"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/ebooks.inflibnet.ac.in\/csp12\/wp-json\/wp\/v2\/license?post=134"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}