zoukankan      html  css  js  c++  java
  • 关于document.getElementsByTagName的取值问题

    这段时间,由于工作,所以要接触js,由于文件的命名出现了**-**.**中间出现了横杠,所以我就想用document.getElementsByTagName来取动态生成的<li>里面的value值了,但是奇怪的问题就出现了,调试只出现**,后面的-**.**这部分就取不到了(请看下面的小demo),我就奇怪了,后来在雷兔群问了一下,终于解决了

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>

    <body>
    <div>
    <ul id="loading">
    <li value="21_1">21-113123123</li>
    <li value="21_2">21-212312312321</li>
    <li value="21_3">21-3</li>
    <li value="21_4">21-4</li>
    <li value="21_5">21-5</li>
    <li value="21_6">21-6</li>
    <li value="21_7">21-7</li>

    </ul>
    <input name="" type="button"  value="点击触发"onClick="onlon()">
    </div>
    <script type="text/javascript">
    function onlon(){
    var ta = document.getElementById("loading");
    var t = ta.getElementsByTagName('li');
    var len = t.length;
    for(i=0; i < len; i++){
      alert(t[i].value);
     
      }
    }
    </script>
    </body>
    </html>

    //////////////////////////////////////////////////////////////////////////////////////////////////////////

    原因就在<li>里面的value的属性,因为浏览器会将value的值直接用parsetInt转一下的,所以搞的后面那部分就取不到了,只要改了后面的value的名字,再用getAttribute()输出就好了

    所以该证以上错误,就有了下面的代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>

    <body>
    <div>
    <ul id="loading">
    <li val="21_1">21-113123123</li>
    <li val="21_2">21-212312312321</li>
    <li val="21_3">21-3</li>
    <li val="21_4">21-4</li>
    <li val="21_5">21-5</li>
    <li val="21_6">21-6</li>
    <li val="21_7">21-7</li>

    </ul>
    <input name="" type="button"  value="点击触发"onClick="onlon()">
    </div>
    <script type="text/javascript">
    function onlon(){
    var ta = document.getElementById("loading");
    var t = ta.getElementsByTagName('li');
    var len = t.length;
    for(i=0; i < len; i++){
      alert(t[i].getAttribute('val'));
     
      }
    }
    </script>
    </body>
    </html>

    ~~~~呵呵,不知道算不算问题的自我发现呢·~~
  • 相关阅读:
    神奇的flex布局
    reset、revert、rebase
    Vue.filter过滤器
    moment.js时间格式化总结
    Vue之组件大全
    过滤器filter
    Vue之animate
    Vue之axios
    Mac OS系统上测试PHP代码前的准备工作 | 使用XAMPP搭建Apache服务器的步骤
    Python中的标识符、关键字、变量、语句、注释、模块
  • 原文地址:https://www.cnblogs.com/shoupifeng/p/1600906.html
Copyright © 2011-2022 走看看