Three Approches to Addressing an HTML form Elements in JavaScript / Accessing form data via JavaScript and the DOM

 

Accessing and manipulating the various elements on a Web page is a common endeavor that is easily accomplished with JavaScript and the HTML Document Object Model (DOM).

fig. Document Object Model (DOM) in JavaScript.

Accessing data

As you work with a page and its data, you will often need to gain access to an element and massage the data associated with it. The following methods are available via the DOM and JavaScript to access individual page elements.

• getElementById(): 

            Returns a reference to the first object with the specified id passed to the method. The getElementById() method accesses the first element with the specified id.
  

  Syntax

  document.getElementById("id")

   

           JavaScript document.getElementById is the most useful method of the JavaScript DOM document object that allows you to access the HTML elements by their "id". In HTML you can set the "id" attribute of different HTML elements that must be unique for each tag. getElementById method will return the HTML object based on "id" passed to the method that further provides various properties and methods to dynamically manipulate the HTML objects.

   

  Things to Remember About getElementById

  When using the getElementById function, you need to remember a few things to ensure that everything goes smoothly. 

  
  

  1)  getElementById is a method (or function) of the document object. This means you can only access it by using document.getElementById.

  
  

  2)  be sure that you set your HTML elements' id attributes if you want to be able to use this function. Without an id, you'll be dead in the water.

  
  

  3) If you want to access the text within a non-input HTML element, then you are going to have to use the innerHTML property instead of value.

   

• getElementsByName():    

  Returns a collection of objects with the specified name passed to the method. The getElementsByName() method accesses all elements with the specified name.

  Syntax

  document.getElementsByName(name)

   
            Javascript DOM provides a getElementsByName method that can be accessed using the document object. getElementsByName method returns the array collection of HTML document elements present in the HTML web page with specified name. You can pass the value of name attribute of the HTML tags whose list of array you want to collect. In HTML, form objects that is objects associated with input tag support name attribute. You can specify the same name for different set of form objects for example input type text objects can be defined with same name. Javascript for loop can be used to get the value stored as HTML element at each index of the array returned by the getElementsByName method of Javascript. You can use the length property and item and tags functions of getElementsByName method of document object.
  
  
  
  

• getElementsByTagName() :    

  Returns a collection of objects with the specified tag name passed to the method. The getElementsByTagName() method accesses all elements with the specified tagname.

  Syntax

  document.getElementsByTagName(tagname)
   
            JavaScript document.getElementsByTagName enables you to access the HTML elements by their Tag names. getElementsByTagName method returns the collection of HTML elements placed inside the HTML body tag. You can pass the wildcard character "*" to get the collection of all HTML elements or you can specifiy the HTML tag name e.g.: DIV, SPAN, P etc. whose collection you want to retrieve.
  
  
  
  
  
  
  By M@nkpsmile