getAttribute()与直接获取节点属性的区别

关于getAttribute,setArribute,setArribute的理解

今天温习红宝书，看到264页DOM操作的取得节点特性（属性），感觉很
疑惑之前获取节点属性一直都是直接获取可是为什么万能的高程书非得搞得这么麻烦弄出getArribute()这样的一个操作方法，所以我专门的去讨论了这三种方法，与直接操作节点属性的区别;

那么让我们先来看我们经常采取的一种获取节点中属性的方式

[html]  view plain  copy

1. <div id="hello"></div>  
2.     <div></div>  
3.     <script type="text/javascript">  
4.   
5.         var t = document.getElementById("hello");  
6.         console.log(t.id);  
7.     </script>  

不出意外我们获取到了id的值

但是我不光想获取id的值我还想获取class的值

[html]  view plain  copy

1. <div class="hello"></div>  
2. <div></div>  
3. <script type="text/javascript">  
4.   
5.     var t = document.getElementsByClassName("hello")[0];  
6.     console.log(t.class);  

然而这次我并没有像预想的那样获取到class的值，这是为什么呢，其实className,与id都是存储在节点对象的原型中，而每次调用的节点属性都是从原型中共享调用的，试用下面这行代码

[html]  view plain  copy

1. console.log(Element.prototype);  

在控制台的输出可以看到白纸红字的className证明我没有骗你的

这时候大家又会说那知道了这些又有什么用，这和getAttibute又有什么关系嘛，别急我们这就讲它们的区别

那么就上代码:

[html]  view plain  copy

1. <div id="case" create="hello"></div>  
2. <div></div>  
3. <script type="text/javascript">  
4.     var t = document.getElementById("case");  
5.     console.log(t.create);//undefine  
6. </script>  

这里我想自己创建属性，然后用直接获取的方式发现输出的是undefine,这一点都不神奇，如过你学习了原型感觉您可以换一篇博客进行下一阶段的学习，如果还是有点迷糊那就接着往下看;

那么这个时候体现用啰嗦的办法getAttribute()的方法与直接获取属性的差距就来了，既然麻烦那肯定是有原因的。

那么就再上代码:

[html]  view plain  copy

1. <div id="case" create="hello"></div>  
2. <div></div>  
3. <script type="text/javascript">  
4.     var t = document.getElementById("case");  
5.     console.log(t.getAttribute("create"));//hello  
6. </script>  

差距很明显嘛，这次会输出而且不是undefine,区别不言而喻;

直接获取的方式只能获取节点本来具有的属性，而getAttribute（）可以获取自己定义的属性，例如阿猫阿狗;

而Attribute的家族还有setAttribute()和removeAttribute(),没错正如你想的英语单词的意思一样set （设置），remove（移除）,这两个方法用来设置和移除节点原型中不存在的属性；

后续:

看到这里的程序猿们肯定学会了两种取得节点特性的方式，然而也肯定被我的啰嗦给吓到了，这么一个小知识点讲这么多，其实我想引出原型，用原型可以帮助我们去解决很多我们理解不清的问题，等待后续对原型有了更深入的理解会更新一篇关于原型的博客；

希望大家也都可以用原型去解决红宝书中不常见的问题，不为解决问题而是抓问题的本质;

本文作者 : makerbeen
文章地址 : https://i-blog.csdnimg.cn/blog_migrate/9f804d01fe717c7d98231e0a693dfe81.png