当前位置: 首页 > Web前端 > HTML

容易混淆的属性和特征【一清二楚】

时间:2023-04-02 22:55:19 HTML

自从学前端以来,属性和特征困扰了我很久。今天在使用jQuery的时候,又踩到了这个坑。所以我决定彻底弄清楚。1、物、属性、特征的关系先看字典的解释:property:1,财产,所有权,不动产;2、性质、特征、属性;attribute:attribute,trait,characteristic,quality好吧,除了property,Realestate(手动眯眼),似乎无法区分两者。既然如此,还是从专业书籍中寻找答案吧。《JavaScript高级程序设计》第6章:ECMA-262将对象定义为:“无序属性的集合,其属性可能包含原始值、对象或函数。”“嗯……物体的属性……”好像和物体有直接的联系啊!财产不是财产吗?然后我假装属性是对象的属性(手动滑稽)。举个例子:varperson={name:"小明",age:'26',sayName:function(){alert(this.name);}};在这里,name和age都是person对象的属性。这些属性是用一些特征值(characteristic)创建的,JavaScript通过这些特征值来定义它们的行为。--《JavaScript高级程序设计》简单来说,一个属性有一个特征值,用来定义属性的行为。(注意属性与属性之间出现了关系。)对于像name、age这样的属性,有4个属性描述了它们的行为,分别是[[Configurable]]、[[Enumerable]]、[[Writable]]、[[Value]]],这些特性描述了name和age属性:1.是否可以重新定义2.是否可以使用for-in循环返回属性3.是否可以修改。先说到这里,我们知道了,属性可以用来描述属性的行为。在这里,我们自己创建的一个对象和一个DOM对象在直觉上似乎是不同的。两者不容易联系起来。所以,让我们关注DOM(文档对象模型),它是一个真实的对象!JavaScript中的所有节点类型都继承自Node类型,因此所有节点类型都共享相同的基本属性和方法。(IE9以下除外)nodetype属性:表示节点的类型。值为1表示该节点为Element类型,2为Attr类型,3为Text类型等nodeName属性:节点名称nodeValue属性:节点值...即div,ul,li等在我们的html中都是node节点,而id、class、type、title等都是元素节点的特征。特征属于Attr类型,特征是元素属性属性的节点。看起来很绕,我们来算一下,像div这样的元素都有attributes属性,而id、class等是这个属性的节点,也就是说id、class等属性是用来描述属性的的属性。和我们之前学过的“用来描述属性行为的特性”没什么区别。在这里,我们总结一下。不管是person对象还是DOM对象(比如div),它们都有自己的属性,属性有一个叫做属性的东西来定义它的行为。好了,我们搞清楚了三者的关系。然而,我们似乎还有一些未解之谜。接下来我们看看属性和属性是如何被访问的。2.属性和特性的访问要访问对象的属性,比如刚才的person对象,我们可以使用person.name来访问person对象的name属性;对于DOM对象

,为了弄清楚问题,我们先获取对象的引用:varoBox=document.getElementById('box');//我们可以通过oBox.tagName访问tagName属性和nodeType属性console.log(oBox.tagName);//DIVconsole.log(oBox.nodeType);//1但是,这是正常的!问题出现了://我们可以通过oBox.id获取对象的id值console.log(oBox.id);//框console.log(oBox.className);//red也许我们会觉得这还是很正常的啊!怎么了?是的,这里不正常!因为id明明是oBox对象的attributes属性中的一个节点,并不是属性,为什么可以用oBox.id来访问呢?!不过我们一开始就是这么学的,一开始我们也是这么用的~崩溃之后,我们找到了答案,来自《JavaScript高级程序设计》:所有的HTML元素都是用HTMLElement类型来表示的,直接继承自Element,加上一些属性。这些添加的属性对应于每个HTML元素中都存在的以下标准属性:id、className、title等。啊,恍然大悟!快点~你能这样访问是设计者的良苦用心。添加id、class、title等特性作为html元素的属性id、className、title,访问起来不是很方便吗?至此,迷雾散去。我们一点一点地看到真相。每个元素都有一个或多个属性,其目的是提供有关相应元素或其内容的附加信息。操作属性的DOM方法主要有3种,分别是getAttribute()、setAttribute()和removeAttribute()。这三种方法可用于任何属性,包括那些定义为HTMLElement类型属性的属性。console.log(oBox.getAttribute("id"));//boxconsole.log(oBox.getAttribute("class"));//red这样我们也明白了为什么在使用getAttribute()访问class的时候,没有使用className的原因。三、自定义特征和属性1、自定义特征html:
js:oBox.setAttribute('left','left');但是,自定义的特性不能作为属性访问,console.log(oBox.left);//undefinedconsole.log(oBox.getAttribute('left'));//left另外,在HTML5规范中,自定义特性要加上data-前缀进行校验。2.自定义属性其实我们已经用到了“自定义”属性。在设置定时器的时候,给元素绑定定时器,不同的元素会有自己的定时器。oBox.timer=setTimeout(function(){//要做},5000);oBox2.timer=setTimeout(function(){//要做2},5000);(结束)