Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use document.getElementByName and getElementByTag?

Tags:

javascript

 document.getElementById('frmMain').elements

can i use like this

document.getElementByName('frmMain').elements 

or

document.getElementBytag('table').elements`
like image 307
Manohar Kulanthai vel Avatar asked Oct 19 '11 05:10

Manohar Kulanthai vel


People also ask

What is the difference between getElementsByName and getElementsByTagName?

getElementsByName fetch all the elements with given name and returns list of elements. getElementsByTagName fetch all the elements with given Tag and returns list of elements.

What does document getElementsByTagName do?

getElementsByTagName() The getElementsByTagName method of Document interface returns an HTMLCollection of elements with the given tag name. The complete document is searched, including the root node.

What is document getElementsByName?

The getElementsByName() method of the Document object returns a NodeList Collection of elements with a given name attribute in the document.

How do you get all elements with same tag name?

The getElementsByTagName() method returns a collection of all elements with a specified tag name. The getElementsByTagName() method returns an HTMLCollection.


2 Answers

  • document.getElementById('frmMain').elements
    assumes the form has an ID and that the ID is unique as IDs should be. Although it also accesses a name attribute in IE, please add ID to the element if you want to use getElementById

  • document.getElementsByName('frmMain')[0].elements
    will get the elements of the first object named frmMain on the page - notice the plural getElements - it will return a collection.

  • document.getElementsByTagName('form')[0].elements
    will get the elements of the first form on the page based on the tag - again notice the plural getElements

A great alternative is

  • document.querySelector("form").elements
    will get the elements of the first form on the page. The "form" is a valid CSS selector

  • document.querySelectorAll("form")[0].elements
    notice the All - it is a collection. The [0] will get the elements of the first form on the page. The "form" is a valid CSS selector

In all of the above, the .elements can be replaced by for example .querySelectorAll("[type=text]") to get all text elements

like image 200
mplungjan Avatar answered Oct 13 '22 18:10

mplungjan


getElementById returns either a reference to an element with an id matching the argument, or null if no such element exists in the document.

getElementsByName() (note the plural Elements) returns a (possibly empty) HTMLCollection of the elements with a name matching the argument. Note that IE treats the name and id attributes and properties as the same thing, so getElementsByName will return elements with matching id also.

getElementsByTagName is similar but returns a NodeList. It's all there in the relevant specifications.

like image 33
RobG Avatar answered Oct 13 '22 18:10

RobG