getElementById和getElemetsByTagName的区别

最新推荐文章于 2024-08-22 09:57:36 发布

最近头有点大

最新推荐文章于 2024-08-22 09:57:36 发布

阅读量1.5k

点赞数

本文链接：https://blog.csdn.net/weixin_40868425/article/details/79141704

版权

1.getElementById传入标签的id来获取对象返回的一个具体的对象，getElementsByTagName通过传入标签名获取对象数组，返回的是一个对象集合。
2.getElementById是静态方法前面只能跟document，而getElementsByTagName是动态方法前面可以跟其他元素（例子如下）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box1,#box2{
            width: 100px;height: 100px;background-color: red;
        }
    </style>
    <script>
        window.onload=function(){
        //第一段代码，先在函数外面用getElementById获取box对象，然后将对象当做参数调用函数，在函数内部使用getElementsByTagName获取img
            var box1=document.getElementById('box1');
            f1(box1);
            function f1(a){
                var img1 =a.getElementsByTagName('img')[0];  //getElementsByTagName前面可以跟其他元素
            }
        //第二段代码是直接调用函数，先在函数外面用getElementById获取box对象，然后将对象当做参数调用函数，然后在函数内部使用getElementById获取img
        var box2=document.getElementById('box2');
            f2(box2);
            function f2(a){
                var img2 =a.getElementById('img')[1];//getElementById前面不能跟其他元素，跟了会报错，只能跟document
            }
    };
    //第二段代码报错
    Uncaught TypeError: a.getElementById is not a function
    at f2  
    </script>
</head>
<body>
        <div id="box1">
            <img id="img1" src="images/1.jpg" alt="">
        </div>
        <div id="box2">
            <img id="img2" src="images/1.jpg" alt="">
        </div>
</body>
</html>