zoukankan      html  css  js  c++  java
  • getElementsByTagName( )方法

    <!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;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 + " ";
    }
    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 +" ";
    }
    console.log(str);
    }
    </script>
  • 相关阅读:
    linux相关的常用站点
    基于命令行的网络调试和测试工具
    清除DNS缓存
    数组映射
    react-native 自定义多选
    weex 长按图片保存
    MySql常用总结
    git常用命令
    react-native 自制多选功能
    react-native setState无法保持更新
  • 原文地址:https://www.cnblogs.com/Logo-TPM/p/6483538.html
Copyright © 2011-2022 走看看