首页 > 代码库 > getElementsByTagName( )方法

getElementsByTagName( )方法

2024-09-06 11:15:13   218人阅读

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0">

    <style>

        div{ margin:0 auto;padding:0;  }
        a{ display:block;width:300px;line-height:20px;font-family:microsoft yahei;  }
    </style>
    <title></title>
</head>
<body>

<div id="demo2">
    <a>我是第 1 个&lt;a&gt;标签</a>
    <a>我是第 2 个&lt;a&gt;标签</a>
    <a>我是第 3 个&lt;a&gt;标签</a>
    <a>我是第 4 个&lt;a&gt;标签</a>
    <a>我是第 5 个&lt;a&gt;标签</a>
    <a>我是第 6 个&lt;a&gt;标签</a>
</div>
</div>
</div>
<script type="text/javascript">
    // 使用 getElementsByTagName() 方法获得 id="demo2" 的标签内部的所有 <div> 标签
    window.onload = function (){
                var arr = document.getElementById("demo2").getElementsByTagName("a");
                var len =arr.length;   //文本节点的总长度
                var str ="";   //  定义一个字符串表示要打印的标签内容
                //得到标签的长度 然后打印出来

            for(var i=0;i<len;i++){
                    str += "第"+(i+1)+"个文本节点是："+arr[i].firstChild.nodeValue + "\n";
            }
            console.log(str);
    }
</script>
            </body>
            </html>

  注释：  //  要获得不同标签内的内容只需要修改
              //  var  arr = document.getElementById("demo2").getElementsByTagName("要修改的标签名")



//方法二：
<script type="text/javascript">
    // 使用  children  的用法
    window.onload = function (){
            var arr = document.getElementById("demo2").children;
            var str ="";
            for(var i=0;i<arr.length;i++){
                    str += "第"+(i+1)+"个文本节点的内容"+ arr[i].firstChild.nodeValue +"\n";
            }
            console.log(str);
    }
</script>

getElementsByTagName( )方法


联系
我们