Capt. Horatio T.P. Webb
THREE OBJECT MODELS -- SUMMARY
Parks -- Fall 2016

Version 2 -- 4/16/2018

Three ways to reference objects from javascript:

  1. The HTML Object Model

    This model is used to get/set HTML form objects from javascript

    In javascript, to access an HTML form object the format is:

    document.form name
    OR
    forms(index)    		.element name
    OR
    elements(index)    		.value;

    HTML
    Code
    Example
    <form name="form1">
<input type="text" name="text1" value="23">
<input type="button" value="go f1" onclick="f1()"> 
</form>

    function f1()
{
 alert (document.form1.text1.value);
}

The four ways are:

      

    1. Both by name:                 document.form1.text1.value

    2. Numbered form, named element: document.forms[0].text1.value

    3. Named form, numbered element: document.form1.elements[0].value

    4. Both numbered:                document.forms[0].elements[0].value

  2. The XML Object Model

    This model is used to get XML objects from javascript

    In javascript, to access an XML node value the format is:

    root.childNodes[index].childNodes[index]. ... .childNodes[0].nodeValue;

    HTML
    Code
    Example
    <form name="form2">
<input type="text" name="text2" 
value="<outer><branch1>23</branch1></outer>">
<input type="button" value="go f2" onclick="f2()"> 
</form>

    function f2()
{
 data_value=document.form2.text2.value;
 parser=new DOMParser();
 xmlDoc=parser.parseFromString(data_value,"text/xml");
 root=xmlDoc.documentElement;
 alert (root.childNodes[0].childNodes[0].nodevalue);
}

  3. The Document Object Model

    This model is used to get/set any HTML objects's SS property or content from javascript

    In javascript, to access an DOM value (typically style) the format is:

    document.getElementById[ "id value" ].style.CSS property =  CSS property value;
    OR
    document.getElementById[ "id value" ].innerHTML =  value;

    HTML
    Code
    Example
    <DIV id="div_id" style="color:red;">23</div>

    function f3()
{
 alert (document.getElementById("div_id").innerHTML);
 document.getElementById("div_id").style.color="blue"
}

    


    23