分享

getElementById、getElementsByName用法

 宇玲 2009-10-30

1、getElementById() 

 方法返回对拥有指定 ID 个对象的引用。

 如果您需要查找文档中的一个特定的元素,最有效的方法是 getElementById()。

 在操作文档的一个特定的元素时,最好给该元素一个 id 属性,为它指定一个(在文档中)唯

一的名称,然后就可以用该 ID 查找想要的元素。

2、Document:getElementsByName

getElementsByName() 方法可返回带有指定名称的对象的集合。

document.getElementsByName(name)该方法与 getElementById() 方法相似,但是它查询元素的 name

属性,而不是 id 属性。

另外,因为一个文档中的 name 属性可能不唯一(如 HTML 表单中的单选按钮通常具有相同的 name 属

性),所以 getElementsByName() 方法返回的是元素的数组,而不是一个元素。

3、getElementsByTagName()

方法可返回带有指定标签名的对象的集合。

getElementsByTagName() 方法返回元素的顺序是它们在文档中的顺序。

如果把特殊字符串 "*" 传递给 getElementsByTagName() 方法,它将返回文档中所有元素的列表,元素

排列的顺序就是它们在文档中的顺序。

下面是我写的一个小例子:

 

<html>

    <head>

        <title>插入</title>

    </head>

    <script type="text/javascript">...

         function getValue()

          ...{

              var x=document.getElementById("myHeader")

              alert(x.innerHTML)

          }

          function getElements()

          ...{

             var x=document.getElementsByName("sex");

              alert(x.length);

          }

  

          function getTagElements()

          ...{

              var x = document.getElementsByTagName("input");

              alert(x.length);

          }

         

     </script>

    <body>

        <form name="Input">

            <table align="center" width="50%" height="50%" border="1">

                <tr>

                    <td align="center" width="45%">

                        学号

                    </td>

                    <td align="center" width="55%">

                        <input type="text" id=userid name="user" onblur="validate();">

                        <div id=usermsg></div>

                    </td>

                </tr>

                <tr>

                    <td align="center" width="45%">

                        姓名

                    </td>

                        <td align="center">

                        <input type="text" name="name">

                    </td>

                </tr>

                <tr>

                    <td align="center" width="%45">

                        性别

                    </td>

                    <td align="center">

                        <input type="radio" name="sex" value="男">

                        男

                        <input type="radio" name="sex" value="女">

                        女

                    </td>

                </tr>

                <tr>

                    <td align="center" width="45%">

                        年龄

                    </td>

                    <td align="center" width="55%">

                        <input type="text" name="age">

                    </td>

                </tr>

                <tr>

                    <td align="center" width="45%">

                        籍贯

                    </td>

                    <td align="center" width="55%">

                        <input type="text" name="addr">

                    </td>

                </tr>

            </table>

        </form>

        <h1 id="myHeader" onclick="getValue()">

            This is a header

        </h1>

        <p>

            Click on the header to alert its value

        </p>

        <input type="button" onclick="getElements()"

            value="How many elements named 'sex'?" />

        <Br>

        <input type="button" onclick="getTagElements()"

            value="How many tags named 'input'?" />

    </body>

</html>

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约