问答详情
源自：9-5 getAttribute()方法

大家来讨论一下关于getAttribute() 和 对象直接调用的区别

原码
var con=document.getElementsByTagName("li");
    for (var i=0; i< con.length;i++){
    var text=con[i].getAttribute(title);
      if(text!=null)
      {
        document.write(text+"<br>");
      }
    }

其中var text=con[i].getAttribute(title);

改为var text=con[i].title;

也是一样能操作的，求解里面的内涵区别。是否是con[i].title;是con[i].getAttribute(title);的简写。还是说两者的底层实现是不一样的。

提问者：AirIce 2016-06-03 13:33

个回答

  • MaDou
    2016-06-03 20:38:10
    已采纳

    "con[i].title只能获取HTML元素中现有的属性

    而con[i].getAttribute("title")不仅可以获取HTML元素中现在的属性，还可以获取非HTML元素也就是自定义的。

    你可以试着把li元素中的某个title改为title1，使用con[i].getAttribute("title")，会发现结果只能显示title1的属性值，而title属性的值不会显示。"


    3
  • 慕粉4253983
    2017-03-09 18:05:49

    第一种是DOM Core方法来获取属性，你说的那种属于HTML -DOM方法，两种同样可以获取和设置元素的属性，后一种代码相对简单

    0
  • 我是刘高兴
    2016-07-17 14:10:50

    采纳的那个回答应该不好理解吧。你把if(text !== null)先注释掉，

    <ul>  
    <li title="第1个li">HTML</li>  
    <li>CSS</li>  
    <li title="第3个li">JavaScript</li>  
    <li title="第4个li">Jquery</li>  
    <li>Html5</li>  
</ul>  
...
var con=document.getElementsByTagName("li");
    for (var i=0; i< con.length;i++){
      var text = con[i].getAttribute("title");//text获取的是title的key值
      var text1 = con[i].title;//text1获取的是title本身
      document.write(text+"<br>")//会得到第1个li null 第3个li 第4个li null（有换行）
      document.write(text1+"<br>")//会得到第1个li 空行（什么都不显示）第个li 第4个li  空行（什么都不显示）（有换行）
    }

    注意看我代码里注释的文本。还是写在外边吧：

    text结果：

    第1个li
    null
    第3个li
    第4个li
    null

    text1结果：

    第1个li

    第3个li
    第4个li

    （这里其实还有个空行）


    这样应该就理解了吧 :)

    4