区分元素特性attribute和对象属性property

其实attribute和property两个单词,翻译出来都是属性,但是《javascript高级程序设计》将它们翻译为特性和属性,以示区分。本文将详细介绍特性和属性的不同之处

定义

  元素特性attribute是指HTML元素标签的特性

  下面的id、class、title、a都是特性,其中a叫做自定义特性

<div id="id1" class="class1" title="title1" a=‘a1‘></div>

  对象属性property是指元素节点的属性

  下面的id、title、b都是属性,其中b叫做自定义属性

<div id="test"></div><script>test.id = ‘id2‘;
test.title = ‘title2‘;
test.b = ‘b2‘;</script>

共有

  id、title等既是属性,也是特性。修改属性,其对应的特性会发生改变;修改特性,属性也会改变

  【1】修改元素特性(以title为例)

<div id="test" title=‘123‘>测试内容</div><script>console.log(test.title);//123document.onclick = function(){
    test.setAttribute(‘title‘,‘456‘);
    console.log(test.title);//456    }</script>

  【2】修改对象属性

<div id="test" title=‘123‘>测试内容</div><script>console.log(test.getAttribute(‘title‘));//123document.onclick = function(){
    test.title = ‘456‘;
    console.log(test.getAttribute(‘title‘));//456    }</script>

例外

  class和for这两个元素特性是例外,因为class和for是保留字,无法直接在对象属性中使用。所以在对象属性中,class变成了className,而for变成了htmlFor

  【1】class

<div id="test" class="class1">测试内容</div><script>console.log(test.getAttribute(‘class‘));//‘class1‘console.log(test.className);//‘class1‘console.log(test.class);//undefined</script>

  【2】for

<label id="test" for="input"></label><script>console.log(test.getAttribute(‘for‘));//‘input‘console.log(test.htmlFor);//‘input‘console.log(test.for);//undefined</script>

特殊

  style和onclick是两个特殊的特性,它们虽然有对应的属性名,但属性值与通过getAttribute()返回的值并不相同

  【1】style

  通过getAttribute()访问时,返回的style特性值中包含的是CSS文本,而通过属性来访问它则会返回一个CSSStyleDeclaration对象

<div id="test" style="height: 100px;width: 100px;"></div><script>console.log(test.getAttribute(‘style‘));//‘height: 100px;width: 100px;‘//{0: "height", 1: "width", alignContent: "", alignItems: "", alignSelf: ""…}console.log(test.style);
console.log(typeof test.style);//‘object‘console.log(test.style.height);//‘100px‘</script>

  【2】onclick

  如果通过getAttribute()访问,会返回相应代码的字符串。而访问onclick属性时,会返回一个javascript函数

  [注意]其他事件处理程序也类似

<div id="test" onclick = "alert(1)">测试内容</div><script>    console.log(test.getAttribute(‘onclick‘));//‘alert(1)‘console.log(test.onclick);//‘function onclick(event) {alert(1)}‘console.log(typeof test.onclick);//‘function‘</script>

  [注意]如果通过对象属性设置onclick属性,则不会有对应的元素特性

<div id="test">测试内容</div><script>test.onclick = function(){
    alert(1);
}    
console.log(test.getAttribute(‘onclick‘));//nullconsole.log(test.onclick);//‘function onclick(event) {alert(1)}‘console.log(typeof test.onclick);//‘function‘</script>

自定义

  【1】自定义特性

  自定义特性用来在HTML元素上绑定一些额外的信息。但是自定义特性无法在对象属性中有所体现

<div id="test" index=‘1‘></div><script>console.log(test.getAttribute(‘index‘));//‘1‘console.log(test.index);//undefined    </script>

  HTML5新增了数据集属性dataset(规范的自定义特性),用于存储页面或应用程序的私有定制数据。数据集属性以‘data-‘为前缀,可以使用javascript中对象属性dataset访问data-*的值

  由于元素特性的值以‘-‘做间隔,在对象属性中将转换为首字母大写的形式

data-index-one -> dataset.indexOne

  所以,元素特性的值一定不要出现大写,否则对象属性会解释出错

  [注意]IE10-浏览器不支持dataset

<div id="test" data-index-one="1"></div><script>console.log(test.getAttribute(‘data-index-one‘));//‘1‘console.log(test[‘data-index-one‘]);//undefinedconsole.log(test.dataset.indexOne);//‘1‘</script>

【兼容代码】

function getDataSet(element){    if(element.dataset){        return element.dataset;
    }    var attrs= element.attributes;    var len = attrs.length;    var data = {};    for(var i=0;i<len;i++){        var sName = attrs[i].name;        var sValue = attrs[i].value;        if(sName.substring(0,5)==="data-"){            var tempName = sName.slice(5).replace(/-([A-Za-z])/g,function(item,item1){                return item1.toUpperCase();
            });
            data[tempName] = sValue;
        }   
    }    return data;
}var dataset = getDataSet(box);

  【2】自定义属性

  自定义属性在javascript中非常常用,是一种常用的编程技术。但元素特性上并不会有所体现

<div id="test"></div><script>test.index = 1;
console.log(test.index);//1console.log(test.getAttribute(‘index‘));//null</script>

  [注意]可以使用数据集属性的逆向操作来实现自定义属性向元素特性的对应

<div id="test"></div><script>test.dataset.index = 1;
console.log(test.getAttribute(‘data-index‘));//1</script>

混淆

  IE7-浏览器下会混淆元素特性attribute和对象属性property。在下列情况下,IE7-浏览器通过getAttribute()返回的值与对象属性相同

  【1】class

  设置对象属性className,在IE7-浏览器下,访问元素特性时,参数也设置为className才有效

  [注意]for也有类似效果,不再赘述

<div id="test"></div><script>test.className = ‘class1‘;//IE7-浏览器返回‘class1‘,其他浏览器返回nullconsole.log(test.getAttribute(‘className‘));//IE7-浏览器返回null,其他浏览器返回‘class1‘console.log(test.getAttribute(‘class‘));</script>

  【2】style

  IE7-浏览器通过getAttribute()方法返回的元素特性与对象属性一样,都是CSSStyleDeclaration对象

  [注意]click等事件处理程序也有类似效果,不再赘述

<div id="test" style="width: 100px;"></div><script>//IE7-浏览器下,返回CSSStyleDeclaration对象;其他浏览器返回‘width: 100px;‘console.log(test.getAttribute(‘style‘));//IE7-浏览器下,返回true;其他浏览器返回falseconsole.log(test.getAttribute(‘style‘) === test.style);</script>

  【3】自定义

  在IE8-浏览器下,自定义特性会自动对应为对象属性,自定义属性也会自动对应为元素特性

<div id="test" a=‘a1‘></div><script>test.b = ‘b1‘;//IE7-浏览器返回‘a1‘,其他浏览器返回undefinedconsole.log(test.a);//IE7-浏览器返回‘b1‘,其他浏览器返回nullconsole.log(test.getAttribute(‘b‘));</script>

总结

  对象节点对于HTML标签元素说来,是元素DOM化的结果。与此相对应,对象属性也是元素特性的DOM化结果

  由于javascript中保留字的限制,存在class和for这两种例外情况

  与普通的元素特性不同,通过style实现的脚本化CSS机制和通过onclick等实现的事件处理机制是DOM的两大功能,它们被DOM实现为对象,而不仅仅是普通的字符串

  自定义特性和自定义属性非常有用,但却没有对应关系。HTML5新增的数据集属性dataset建立了两者的联系

  最后,IE7-浏览器对元素特性和对象属性有所混淆。如果网站仍然需要兼容IE7-浏览器,就要非常小心

时间: 2024-10-26 13:20:23

区分元素特性attribute和对象属性property的相关文章

python 对象属性与 getattr &amp; setattr

Python对象的属性可以通过obj.__dict__获得,向其中添加删除元素就可以实现python对象属性的动态添加删除的效果,不过我们应该使用更加正规的getattr和setattr来进行这类操作 getattr(object, name[, default]) Return the value of the named attribute of object. name must be a string. If the string is the name of one of the ob

DOM元素的特性(Attribute)和属性(Property)

1.介绍: 上篇js便签笔记http://www.cnblogs.com/wangfupeng1988/p/3626300.html最后提到了dom元素的Attribute和Property,本文简单介绍一下我的理解. 其实Attribute和Property这两个单词,翻译出来都是“属性”,<js高级程序设计>书中翻译为“特性”和“属性”,以示区别. 简单理解,Attribute就是dom节点自带的属性,例如html中常用的id.class.title.align等: 而Property是这

python0.16------构造函数/析构函数/self详解/重写/访问限制/对象属性和类属性/@property/运算符重载

构造函数:__init__()引子:因为每个人一出生都是不一样的.因此,如果在Person类中直接给类元素赋值有问题,它会导致每个人的初始状态相同,这不符合大自然的逻辑.应该根据每个人的特点,给每个出生的人不一样的特性.可以通过构造函数实现这个想法.__init__()函数在使用类创建对象自动调用.注意:如果不显式写出构造函数,默认会添加一个空的构造函数. 使用构造函数:def __init__(self,name,age,height,weight):#一般定义属性在构造函数里面定义. sel

boolean attribute(布尔值属性) attribute vs property

boolean attribute(布尔值属性) boolean attribute     HTML - Why boolean attributes do not have boolean value?     Boolean HTML Attributes   HTML Boolean Attributes A number of attributes are boolean attributes. The presence of a boolean attribute on an ele

HTML5游戏开发引擎Pixi.js完全入门手册(二)元素对象属性解析

下面,我们来解释下PIXI里面对象的各个属性.. 首先我们来看看这个各个元素对象里面到底长啥样.. alpha Number 整个舞台对象的透明度. buttonMode Boolean 渲染是否作为一个按钮.此项作者暂未测试.. cacheAsBitmap Boolean 设置元素,不显示对象缓存作为一个位图. children Array [只读] 返回一个包含子元素的数组. defaultCursor String 元素被鼠标进过后的样式. 但是必须设置 interaction = tru

.Net内置特性Attribute介绍

特性Attribute概述 特性(Attribute)是一种特殊的类型,可以加载到程序集或者程序集的类型上,这些类型包括模块.类.接口.结构.构造函数.方法.字段等,加载了特性的类型称之为特性的目标.这里为与属性(Property)区分,所以称之为特性(Attribute).特性是为程序集添加元数据的一种机制,通过它可以为编译器提供指示或者对数据进行说明.例如前段时间学习的Remoting技术(主要用于应用程序域之间的对象通信)中在应用程序域间的引用对象时该对象具有序列化(Serializabl

.NET基础编程之特性 - Attribute

这一篇文章是给大家介绍的是:.NET基础编程之特性 - Attribute,对这一部分掌握不熟悉的同学,可以仔细的看一下! 一.特性简介 特性提供功能强大的方法,用以将元数据或声明信息与代码(程序集.类型.方法.属性等)相关联.特性与程序实体关联后,可在运行时使用"反射"查询特性. 特性具有以下属性: (1)特性可向程序中添加元数据.元数据是有关在程序中定义的类型的信息.所有的 .NET 程序集都包含指定的一组元数据,这些元数据描述在程序集中定义的类型和类型成员.可以添加自定义特性,以

【C#进阶系列】17 特性Attribute

这个东西有的叫定制特性,然而我喜欢直接叫特性,但是这样的话一些人不知道我说的是什么,如果我说是Attribute的话那么知道的或者用过的就都懂了. 还记得讲到枚举和位标志那一章,关于位标志,有一个[Flags]的用法. [ComVisible(true)] [Flags] public enum FileAttributes { /***/ } 这里的ComVisible和Flags就是特性. 特性的作用 利用特性可宣告式地为自己的代码构造添加注解来实现特殊功能.它相当于往元数据表里写附加信息,

DOM读取和修改节点对象属性

一.获取和修改元素间的内容(3种) 1.innerHTML 获得/设置元素开始标签和结束标签之间的html原文 固定套路:1.删除父元素下所有子元素:parent.innerHTML=""; 2.批量替换父元素下所有子元素:parent.innerHTML="所有子元素标签组成的html" 2.textContent/innerText: 获得开始标签和结束标签之间的文本(去除标签) textContent 是DOM标准:innerText 是IE8: 3.文本节点