阅读 12

超级小白笔记之属性(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才能够操作它。

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

  1. 当我想要获取到一个dom对象的属性时,我最先想到的是利用getAttribute获取它的属性值
<div id="box title="damao"></div>
<script>
    var box = document.geteLElementById("box");
    box.getAttribute("title");
</script>
复制代码
  1. 但是我突然发现我同样可以用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-*

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

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

  1. 我想用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

关注下面的标签,发现更多相似文章
评论