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>

    ~~~~呵呵,不知道算不算问题的自我发现呢·~~
  • 相关阅读:
    hitachi2020 C-ThREE
    LOJ#2083. 「NOI2016」优秀的拆分
    BZOJ2754: [SCOI2012]喵星球上的点名
    BZOJ4516: [Sdoi2016]生成魔咒
    AtCoder Beginner Contest 146解题报告
    拉格朗日插值复习笔记
    对于求解单峰函数最值问题的探讨
    BZOJ5509: [Tjoi2019]甲苯先生的滚榜
    面试技巧
    性能案例分析 | MAT分析内存泄露
  • 原文地址:https://www.cnblogs.com/shoupifeng/p/1600906.html
Copyright © 2011-2022 走看看