How to use document.getElementByName and getElementByTag?

前端 未结 6 1731
一生所求
一生所求 2020-11-29 08:38
 document.getElementById(\'frmMain\').elements

can i use like this

document.getElementByName(\'frmMain\').elements 
相关标签:
6条回答
  • 2020-11-29 08:58
    • 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

    0 讨论(0)
  • 2020-11-29 08:58

    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.

    0 讨论(0)
  • 2020-11-29 08:59

    It's getElementsByName() and getElementsByTagName() - note the "s" in "Elements", indicating that both functions return a list of elements, i.e., a NodeList, which you will access like an array. Note that the second function ends with "TagName" not "Tag".

    Even if the function only returns one element it will still be in a NodeList of length one. So:

    var els = document.getElementsByName('frmMain');
    // els.length will be the number of elements returned
    // els[0] will be the first element returned
    // els[1] the second, etc.
    

    Assuming your form is the first (or only) form on the page you can do this:

    document.getElementsByName('frmMain')[0].elements
    document.getElementsByTagName('table')[0].elements
    
    0 讨论(0)
  • 2020-11-29 09:21

    I assume you are talking about getElementById() returning a reference to an element whilst the others return a node list. Just subscript the nodelist for the others, e.g. document.getElementBytag('table')[4].

    Also, elements is only a property of a form (HTMLFormElement), not a table such as in your example.

    0 讨论(0)
  • 2020-11-29 09:22

    If you have given same text name for both of your Id and Name properties you can give like document.getElementByName('frmMain')[index] other wise object required error will come.And if you have only one table in your page you can use document.getElementBytag('table')[index].

    EDIT:

    You can replace the index according to your form, if its first form place 0 for index.

    0 讨论(0)
  • 2020-11-29 09:23
    1. The getElementsByName() method accesses all elements with the specified name. this method returns collection of elements that is an array.
    2. The getElementsByTagName() method accesses all elements with the specified tagname. this method returns collection of elements that is an array.
    3. Accesses the first element with the specified id. this method returns only a single element.

    eg:

    <script type="text/javascript">
        function getElements() {
            var x=document.getElementById("y");
            alert(x.value);
        }
    </script>
    </head>
    <body>
        <input name="x" id="y" type="text" size="20" /><br />
    

    This will return a single HTML element and display the value attribute of it.

    <script type="text/javascript">
        function getElements() {
            var x=document.getElementsByName("x");
            alert(x.length);
        }
    </script>
    </head>
    <body>
        <input name="x" id="y" type="text" size="20" /><br />
        <input name="x" id="y" type="text" size="20" /><br />
    

    this will return an array of HTML elements and number of elements that match the name attribute.

    Extracted from w3schools.

    0 讨论(0)
提交回复
热议问题