getElementById()、getElementsByName()和getElementsByTagName()的区别

最新推荐文章于 2023-03-08 08:32:28 发布

哆来咪er

最新推荐文章于 2023-03-08 08:32:28 发布

阅读量631

点赞数

分类专栏： ★Web前端 ----------dom

本文链接：https://blog.csdn.net/Maxbyzhou/article/details/71914745

版权

★Web前端同时被 2 个专栏收录

59 篇文章 0 订阅

订阅专栏

----------dom

2 篇文章 0 订阅

订阅专栏

1、通过id获取网页中的某一部分

在一个网页里，id属性是一个元素的标识符，所有的网页元素都可以拥有这个id属性。通常，id是不允许重复的。因此，通过id来获取网页中一个元素的DOM是最常见的定位元素的方法。

该实例主要演示如何使用getElementById()来获取一个元素的DOM对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通过id获取一个特定的DOM元素</title>
    <script type="text/javascript">
        //获取DOM的文字内容
        function getDomText(){
            //获取链接的DOM
            var myLink = document.getElementById("myLink");
            //获取Span的DOM
            var mySpan = document.getElementById("mySpan");
            //定义拼接字符变量
            var str = '';
            //加入链接的文本
            str += myLink.innerHTML;
            //加入Span的文本
            str += mySpan.innerHTML;
            alert("两个DOM的内容是："+str);
        }
    </script>
</head>
<body style="text-align:center">
    <p>
        <!-- 定义有id属性的元素 -->
        <a id="myLink" href="#">链接</a>
        <span id="mySpan">文字</span>
        <br/>
        <input type="button" value="获取" onclick="getDomText()"/>    
    </p>

</body>
</html>

效果：

这里写图片描述

点击“获取”按钮之后，弹出：

这里写图片描述

2、据name获取网页中的全部复选框

与id不同，多个元素可使用相同的name属性，譬如复选框。因此，若要获取这一类元素的DOM对象，就需要使用getElementsByName()。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>据标签名获取多个元素</title>
    <script type="text/javascript">
        //获取多个DOM
        function getDomsByName(){
            //获取的DOMs
            var doms = document.getElementsByName("myName");
            var str = '';                 //定义拼接字符变量
            for (var i = 0; i < doms.length; i++) {
                str += doms[i].tagName; //拼接标签的名字
                str += ",";               //分隔符
            }
            alert("两个DOM的文本是："+str);
        }
    </script>
</head>
<body style="text-align:center">
    <p>
        <!-- 定义有name属性的元素 -->
        <a name="myName" href="#">链接</a>
        <span name="myName">文字</span>
        <br/>
        <input type="button" value="获取" onclick="getDomsByName()"/> 
    </p>

</body>
</html>

运行效果：

这里写图片描述

解析：

name属性是网页元素的有一个重要属性，尤其对于表单控件来说，在提交表单时，name就是参数的名称。获取同一个name的多个元素应用得比较广，比如可用于校验复选框是否已经勾选。

3、据标签名获取网页中的多个元素

获取多个DOM的方式还有获取相同标签的DOM。如获取网页里所有图片、所有链接等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>据标签名获取多个元素</title>
    <script type="text/javascript">
        //获取多个DOM
        function getDomsByTag(){
            //获取的DOMs
            var doms = document.getElementsByTagName("span");
            var str = '';               //定义拼接字符变量
            for (var i = 0; i < doms.length; i++) {
                str += doms[i].innerHTML; //拼接标签的名字
                str += ",";             //分隔符
            }
            alert("两个DOM的文本是："+str);
        }
    </script>
</head>
<body style="text-align:center">
    <p>
        <!-- 定义元素 -->
        <span>文字一</span>
        <span>文字二</span>
        <br/>
        <input type="button" value="获取" onclick="getDomsByTag()"/>  
    </p>

</body>
</html>