超级小白笔记之属性(Property)和特性(Attribute)

我想在div中添加一个内容是“我是超级小白”的H1标签，但是当我在用innerHTML的时候，想尝试用两种思路实现，然后就发现了问题第一种思路完全可以实现效果

<body>
    <div id="box">
        
    </div>
    <script>
        var box = document.getElementById("box");
        var h1 = document.createElement("h1");
        h1.innerHTML = "我是超级小白";
        box.appendChild(h1);
    </script>
</body>

然后我想到了利用getAtteribute来实现这个效果，很遗憾，失败了。

<body>
    <div id="box">
        
    </div>
    <script>
        var box = document.getElementById("box");
        var h1 = document.createElement("h1");
        h1.setAttribute("innerHTML","我是超级小白");
        box.appendChild(h1);
    </script>
</body>

控制台不显示任何错误，我于是将h1的innerHTML中的属性输出，竟然能够获取到属性的值

console.log(h1.getAttribute("innerHTML"); // 我是超级小白

难道是用.来获取属性和用getAttribute获取属性的区别？

首先明确的是对象的属性和方法是对象的两个成员，用点可以获取对象的属性，也可以获取对象的方法。语法是object.propertyName和object.methodName。

这个理论让我离答案又进一步。我几乎肯定了property和attribute之间的区别并没有我想像的那么简单。求助谷歌或者必应似乎是一个不错的选择。原来他们真的有区别，而且区别还蛮大的。

Attribute翻译过来是特性的意思，指的是HTML标签自带的属性值，这些属性值在也就是尖括号中包含的属性值，我可以在w3cDOM对象中的标准属性中查看到。比如id，title，class，lang等等，每个元素的标准属性是不同的，但是我可用以下几种方式来获取或者设置他们

getAttribute();// 获取标准特性
setAttribute();// 获取和设置标准特性
removeAttribute()；// 移除某个标准特性

Property翻译过来是属性的意思。我们在看HTML的时候，总是将这个用尖括号包裹的元素看做DOM对象，我习惯性的把它看做一个人。身为一个人，它本身带有身份证号id，它的母语lang等等，这些都是它生下来就带有的特性，我们可以用getAttribute来获取。它同时还有非常复杂的人际关系，比如他的第一个孩子，第二个孩子，他的父亲，他的兄弟姐妹等等，这些是他身为一个人，在这个社会上生存所衍生出来的各种关系，那么我再用getAttribute就获取不到了，这时候我应该用property来处理这些复杂的关系。

新标准中没有了属性节点的说法，只有元素节点和文本节点

在这种情况下，我把innerHTML理解成了是文本节点，相当于这个人的儿子辈，是他的关系的处理，所以用property才能够操作它。

当然以上只是我的臆想思维，实际的知识点是下面这样的

当我想要获取到一个dom对象的属性时，我最先想到的是利用getAttribute获取它的属性值

<div id="box title="damao"></div>
<script>
    var box = document.geteLElementById("box");
    box.getAttribute("title");
</script>

但是我突然发现我同样可以用object.property来获取title的值

    box.title;

我能够用点操作的方式获取到div的id或者title完全是因为我们常用的attribute已经被附加在html的dom对象上，也就是说我们的“身份证”id等等不仅仅是我们与生俱来的特性，也是我们生存在这个社会上的一种衍生物（卡片身份证？）继续懵逼中。

3.我突然想给div自定义一个属性叫eat，并想把它设置成“水果沙拉”，意味着这个人从出生到死亡唯一的食物只有水果沙拉，非它不吃，非它即死。

box.getAttribute("eat"); // 水果沙拉

4.但是当我想用property像妹子炫技的时候，却发现它掉链子了，心中难受啊

property不能获取到dom元素的自定义属性，我们只能用getAttribute来进行获取，在HTML5中发布的data-*

我这个小白突然有点点明白了

attribute和property这两个完全不着边的东西产生联系完全是因为很多attribute的名字和dom对象的property的名字是一样的，这让我产生了混淆

6.我突然想试试是否attribute能够获取到property的自有属性

<div id="box" eat="chishala" class="damao" mixi="zhurou">
    
        </div>
        <script>
            var box = document.getElementById("box");
            box.mixi = 'niurou';

            console.log(box.getAttribute('mixi'));// zhurou
        </script>

于build-in属性，attribute和property共享数据，attribute更改了会对property造成影响，反之亦然，但是两者的自定义属性是独立的数据，即使name一样，也互不影响，看起来是下面这张图，但是IE6、7没有作区分，依然共享自定义属性数据。并不是所有的attribute与对应的property名字都一致，比如刚才使用的attribute 的class属性，使用property操作的时候应该是这样className

我想用attribute来获取style，并将h1设置为红色

<div id="box" eat="chishala" class="damao" mixi="zhurou">
    
        </div>
        <script>
            var box = document.getElementById("box");
            box.setAttribute("style","width:50px;height:80px;background-color:red;")
            console.log(box.getAttribute('style'));//字面量width:50px;height:80px;background-color:red;
        </script>

这个方法成功了，但是我想单独改一下style中的宽度，还不想改动上面的代码

<script>
            var box = document.getElementById("box");
            box.setAttribute("style","width:50px;height:80px;background-color:red;")
            console.log(box.style)// style CSSStyleDeclaration
        </script>

总有例外的存在，总体来说attribute是获取字面量的存在，他不会把相对路径转换成绝对路径，他获取到的style和onclick是对象，对于checked等属性，他会取html得字面量，但是如果像checked属性，他改变字面量后会影响property的计算结果。

总结：

attribute和property的存储方式不一样。
attribute仅仅是字面量
大部分情况下用点的方式可以访问attribute

参考文章：

http://www.cnblogs.com/dolphinX/p/3348582.html http://www.cnblogs.com/wangfupeng1988/p/3631853.html http://www.cnblogs.com/wangfupeng1988/p/3626300.html https://blog.csdn.net/u013510614/article/details/51923959 https://www.cnblogs.com/xiaohuochai/p/5817608.html https://www.cnblogs.com/dojo-lzz/p/4781563.html?utm_source=tuicool&utm_medium=referral