JavaScript (JS) id Example: HTML DOM Objects – Body Object – JavaScript (JS) id Example

JavaScript (JS) id Example: HTML DOM Objects – Body Object – JavaScript (JS) id Example

Purpose: – Illustrates the for the .

View Other Body Object Properties

Prerequistes:

Syntax: BodyObject.id=”idname” – Allows you to access the id for a BodyObject.

Restrictions: None

Notes:

  • You can build your own library of syntax examples by using same web site over and over and just add new files to it.

Instructions:

  1. Use Visual Web Developer 2008
  2. Create new web site;
    • Click File/New Web Site
    • Select ASP.NET Website Template
    • Select C-Sharp for language
    • name of Web Site could be JavaScript_Syntax.
  3. Folder

  4. Add New folder named “HTMLDOMObjects”
    • Right-click project name in solution explorer;
    • add new folder;
    • name of folder should be: HTMLDOMObjects
  5. Add New subfolder to “HTMLDOMObjects” folder named “DOMBody”
    • Right-click folder named “HTMLDOMObjects” in solution explorer;
    • add new folder;
    • name of folder should be: DOMBody
  6. Add New subfolder to “DOMBody” subfolder named “BodyObjectProperties”
    • Right-click subfolder named “DOMBody” in solution explorer;
    • add new folder;
    • name of folder should be: BodyObjectProperties
  7. Add HTML Page Named id to BodyObjectProperties subfolder
    • Right-click BodyObjectProperties subfolder;
    • add new item;
    • Select HTML Page
    • HTML Page name should be id
  8. Click on copy code in code below to copy code into HTML Page id.htm
  9. Right-click on HTML page id.htm and select view in browser
View Example In Browser
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html>
  <head>
    <title>IdealProgrammer.com: id </title>
    <!-- 
    ***************************************************
    * This example is from http://idealprogrammer.com *
    ***************************************************
    -->
    <style type="text/css" id="myStyle">
 
       .myButtons
        {
            font-size:large;           
            color:red;
        }
        .myButtons input
        {
        color:Blue
        }
 
        .myButton2
        {
            font-size:small;
        }
        .myButton2 input
        {
        font-style :italic
        }
 
        .myButton3
        {
            background-color:#d0e4fe;
        }
        .myButton3 input
        {
        font-weight:600
        }
 
 
    </style>
    <script type="text/javascript">
 
        //****************************************************************
        //         Set Cookie
        //****************************************************************    
 function Set_Cookie( name, value, expires, path, domain, secure )
{
// set time, it's in milliseconds
var today = new Date();
today.setTime( today.getTime() );
 
/*
if the expires variable is set, make the correct
expires time, the current script below will set
it for x number of days, to make it for hours,
delete * 24, for minutes, delete * 60 * 24
*/
if ( expires )
{
expires = expires * 1000 * 60 * 60 * 24;
}
var expires_date = new Date( today.getTime() + (expires) );
 
document.cookie = name + "=" +escape( value ) +
( ( expires ) ? ";expires=" + expires_date.toGMTString() : "" ) +
( ( path ) ? ";path=" + path : "" ) +
( ( domain ) ? ";domain=" + domain : "" ) +
( ( secure ) ? ";secure" : "" );
}
 
//****************************************************************
//         Get Cookie
//**************************************************************** 
// this fixes an issue with the old method, ambiguous values
// with this test document.cookie.indexOf( name + "=" );
function Get_Cookie(check_name) {
    // first we'll split this cookie up into name/value pairs
    // note: document.cookie only returns name=value, not the other components
    var a_all_cookies = document.cookie.split(';');
    var a_temp_cookie = '';
    var cookie_name = '';
    var cookie_value = '';
    var b_cookie_found = false; // set boolean t/f default f
 
    for (i = 0; i < a_all_cookies.length; i++) {
        // now we'll split apart each name=value pair
        a_temp_cookie = a_all_cookies[i].split('=');
 
 
        // and trim left/right whitespace while we're at it
        cookie_name = a_temp_cookie[0].replace(/^\s+|\s+$/g, '');
 
        // if the extracted name matches passed check_name
        if (cookie_name == check_name) {
            b_cookie_found = true;
            // we need to handle case where cookie has no value but exists (no = sign, that is):
            if (a_temp_cookie.length > 1) {
                cookie_value = unescape(a_temp_cookie[1].replace(/^\s+|\s+$/g, ''));
            }
            // note that in cases where cookie is initialized but no value, null is returned
            return cookie_value;
            break;
        }
        a_temp_cookie = null;
        cookie_name = '';
    }
    if (!b_cookie_found) {
        return null;
    }
}
 
</script>			
 
   </head>
  <body id="myBodyID" class="myButtons">
 
        Please click Buttons to change id assigned to body:<br /><br />
        <!--using onclick to set a cookie and reload page; 
        when page is reloading, we check that cookie to assign different styles to body
        -->
      <input id="Button1" type="button"  value="button" onclick="javascript: Set_Cookie( 'mycookie', '1', 30, '/', '', '' ); window.location.reload();" /><br /><br />
      <input id="Button2" type="button"  value="button - id2" onclick="javascript: Set_Cookie( 'mycookie', '2', 30, '/', '', '' ); window.location.reload();"/><br /><br />
      <input id="Button3" type="button"  value="button - id3" onclick="javascript: Set_Cookie( 'mycookie', '3', 30, '/', '', '' ); window.location.reload();"/><br /><br />
   <script type="text/javascript">
       //*****************************************************
       // DOM Objects
       //*****************************************************
 
 
       //*****************************************************
       //    ***    Body Object Properties   ***
       //*****************************************************
 
       //*****************************************************
       // id
       //*****************************************************
 
       //    SYNTAX:
       //    object.id="id"  Allows you to retrieve or assign id for
       //    body
       //*****************************************************
       // Two ways to retrieve id
       //*****************************************************
       document.write("<strong>Demonstrating Two Ways to Retrieve Property</strong><br />") 
         //   1. GetElementsByTagName
                myObject=document.getElementsByTagName('body')[0];
                document.write("1. Using getElementsByTagName: " + myObject.id);
                document.write("<br />");
            //   2. GetElementById
 
                document.write("2. Using getElementById: ");
                document.write(document.getElementById('myBodyID').id);
                document.write("<br />");
                document.write("<br />");
 
 
 
        //*****************************************************
        // Two ways to assign id
        //*****************************************************
        // using cookies to change property and style on the fly
                if (Get_Cookie('mycookie')) {
 
                    ButtonNum = (Get_Cookie('mycookie'));
                }
                else {
                    ButtonNum = '1';
                }
 
                //   1. GetElementById
 
                if (ButtonNum == '2') {
                    document.write("<strong>Demonstrating Assigning Property with GetById</strong><br />") 
                    document.getElementById('myBodyID').className = "myButton2"
                    document.getElementById('myBodyID').id = "myID2"
                    document.write("Body id changed to myID2: " + document.getElementById('myID2').id + "<br />");
                }
            //   2. GetElementsByTagName
 
                if (ButtonNum == '3') {
                    document.write("<strong>Demonstrating Assigning Property with GetElementsByTagName</strong><br />") 
                    myThirdButton = document.getElementsByTagName('body')[0];
                    myThirdButton.className = "myButton3";
                    myThirdButton.id = "myID3";
                    document.write("Body id changed to myID3: " + myThirdButton.id);
 
                }
 
 
 
 
   </script>
 
  </body>
</html>