getElementById()，getElementsByName()，getElementsByTagName的用法和区别

最新推荐文章于 2021-04-01 22:24:03 发布

mylove20041109

最新推荐文章于 2021-04-01 22:24:03 发布

阅读量599

点赞数

分类专栏： JavaScript 文章标签： HTML

JavaScript 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了三种常见的DOM元素获取方法：getElementById, getElementsByName及getElementsByTagName，并通过实例展示了这些方法的具体应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、定义：

getElementById(id)，以id标识符取得对象，是一个对象;

getElementsByName(name)，以name取得节点清单，是一个数组集合;

getElementsByTagName(tagname)，返回带有指定标签名的对象的集合.

2、一个文件中id是唯一的，但是name可以重名(比如radio)，所以，getElementById获得的是单个对象，用getElementById("id")直接访问，而getElementsByName获得的结果以数组形式表示，访问getElementsByName获得的对象的方法是getElementsByName("name")[i]。访问哪个标签对象用getElementsByTagName("tagName")[i],注意getElementsByTagName的字符串可以不区分大小写。

3、比如有两个DIV：
        <div name="docname" id="docid1"></div>
        <div name="docname" id="docid2"></div>
        那么可以用getElementsByName("docname")获得这两个DIV，用getElementsByName("docname")[0]访问第一个DIV对象，用getElementsByName")[1]访问第二个DIV对象。具体访问哪个对象还有用getElementById("docid1");

4,例子

(1)

<html>

<head>
<script>
    function idfun1(){
        var v = document.getElementById("divOne");
        v.innerText="linjianqinghao";  //写入信息
    }
    function idfun2(){
        var v = document.getElementById("divOne");
        v.innerText="you are very good";  //写入信息
    }
</script>
</head>

<body>

</body>
<input type="button" value="显示信息1" onclick="idfun1()">  <!--换成图片可以制作菜单-->
<input type="button" value="显示信息2" onclick="idfun2()"><br><br>
<div id="divOne" style="width:100,height:100"></div>
</html>

(2)

<html>
<head>
<script>
    function namefun() {
        var s = document.getElementsByName("sex");
        for(var i=0;i<s.length;i++) {
            if(s[i].checked) {           //选中发生的事件
                alert(s[i].value);
            }
        } 
    } 
</script>
</head>

<body>
<form>
    <table>
        <tr>
            <td><input type="radio" name="sex" value="0" id="s0" onclick="namefun()">男</td>
            <td><input type="radio" name="sex" value="1" id="s1" onclick="namefun()">女</td>
        </tr>
    </table>
</form>
</body>
</html>

(3)

<html>
<head>
<script>
    function tagNamefun(i) {
        var s = document.getElementsByTagName("input");
        s[i].value='请输入'+s[i].name;
    } 
</script>
</head>

<body>
<form>
    <table>
        <tr>
            <td>用户名:<input type="text" name="username"  onfocus="tagNamefun(0)"></td>
        </tr>
        <tr>
            <td>密码:<input type="text" name="password"  onfocus="tagNamefun(1)"></td>
        </tr>
    </table>
</form>
</body>
</html>

(4)

<html>
<head>
<script>
    function keyup(obj){
        var vOne = obj.value.length;
        //name也有时会被视作id(如在textarea中)
        // 等价于document.getElementById("txaTwo").value = vOne;
        //等价于document.getElementsByName("txaTwo")[0].value = vOne; 
        formOne.txaTwo.value = vOne;
    }
</script>
</head>
<body >
    <form name="formOne">
        <table>
            <tr>
                <td><textarea name="txaOne" onkeyup="keyup(this)"></textarea></td>
                <td><textarea name="txaTwo"></textarea></td>
            </tr>
        </table>
    </form>
</body>
</html>