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

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

来源：9-5 getAttribute()方法

AirIce

2016-06-03 13:33

原码
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);的简写。还是说两者的底层实现是不一样的。

写回答关注

3回答

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属性的值不会显示。"

2 3

Charle... 回复Charle...

把li元素中的某个title改为title1，使用con[i].getAttribute("title1")可以得到相应的属性值；但是使用con[i].title1;得不到结果。

2016-07-15 17:10:45

共 2 条回复 >
慕粉4253983

2017-03-09 18:05:49

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

0 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

（这里其实还有个空行）

这样应该就理解了吧 :)

1 4

strawI...

为什么text中会是NULL，text1中会是空行？？

2016-08-09 17:58:43

共 1 条回复 >