咨询热线 ：
028-86922220
×
01
关于我们

公司简介

发展历程

02
服务项目

高端网站建设

微信开发

APP开发

网络营销服务

电商网站定制

生物医药网站建设

外贸网站建设

教育培训网站建设

03
小程序开发

小程序开发

功能应用

客户案例

04
案例展示

网站建设案例

小程序案例

电商平台案例

APP案例

系统平台案例

05
建站动态

网站建设

网站设计

网站营销

小程序

06
联系我们

公司地址

人才招聘

地址：成都市太升南路288号锦天国际A幢1002号

电话：028-86922220

028-86922220

大橙子网站建设，新征程启航

为企业提供网站建设、域名注册、服务器等服务

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

定义

十多年的罗源网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。成都全网营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整罗源建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。成都创新互联从事“罗源网站设计”,“罗源网站推广”以来，每个客户项目都认真落实执行。

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

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

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

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

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

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

 

共有

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

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

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

测试内容

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

【2】修改对象属性

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

测试内容

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

例外

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

【1】class

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

测试内容

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

【2】for

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

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

 

特殊

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

【1】style

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

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

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

【2】onclick

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

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

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

测试内容

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

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

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

测试内容

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

 

自定义

【1】自定义特性

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

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

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

data-index-one -> dataset.indexOne

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

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

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

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

【兼容代码】

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

function getDataSet(element){    if(element.dataset){        return element.dataset;
    }    var attrs= element.attributes;    var len = attrs.length;    var data = {};    for(var i=0;i
区分元素特性attribute和对象属性property
【2】自定义属性
自定义属性在javascript中非常常用，是一种常用的编程技术。但元素特性上并不会有所体现
区分元素特性attribute和对象属性property
区分元素特性attribute和对象属性property
[注意]可以使用数据集属性的逆向操作来实现自定义属性向元素特性的对应 
 
混淆
IE7-浏览器下会混淆元素特性attribute和对象属性property。在下列情况下，IE7-浏览器通过getAttribute()返回的值与对象属性相同
【1】class
设置对象属性className，在IE7-浏览器下，访问元素特性时，参数也设置为className才有效
[注意]for也有类似效果，不再赘述
区分元素特性attribute和对象属性property
区分元素特性attribute和对象属性property
【2】style
IE7-浏览器通过getAttribute()方法返回的元素特性与对象属性一样，都是CSSStyleDeclaration对象
[注意]click等事件处理程序也有类似效果，不再赘述
区分元素特性attribute和对象属性property
区分元素特性attribute和对象属性property
【3】自定义
在IE8-浏览器下，自定义特性会自动对应为对象属性，自定义属性也会自动对应为元素特性
区分元素特性attribute和对象属性property
区分元素特性attribute和对象属性property
 
总结
对象节点对于HTML标签元素说来，是元素DOM化的结果。与此相对应，对象属性也是元素特性的DOM化结果
由于javascript中保留字的限制，存在class和for这两种例外情况
与普通的元素特性不同，通过style实现的脚本化CSS机制和通过onclick等实现的事件处理机制是DOM的两大功能，它们被DOM实现为对象，而不仅仅是普通的字符串
自定义特性和自定义属性非常有用，但却没有对应关系。HTML5新增的数据集属性dataset建立了两者的联系
最后，IE7-浏览器对元素特性和对象属性有所混淆。如果网站仍然需要兼容IE7-浏览器，就要非常小心
            
            
                            

                网站题目：区分元素特性attribute和对象属性property                

                本文路径：http://dzwzjz.com/article/jehdcd.html
            
        
        

            
其他资讯

            

                
            

        

    




    

        

            

                

                

                    
分享至：

                    

                        
                        
                        
                        
                    

                    
                

            

            

                

                    
关于我们

                    

                        公司简介
                        发展历程
                    

                

                

                    
服务项目

                    

                        高端网站建设
                        小程序开发
                        APP开发
                        网络营销
                    

                

                

                    
建站知识

                    

                        行业新闻
                        建站学堂
                        常见问题
                    

                

                

                    
联系我们

                    

                        公司地址
                        人才招聘
                    

                

            

            

                

                    成都
                    达州
                

                

                    

                        

                            

                            
电话：028-86922220

                        

                        

                            

                            
地址：成都市太升南路288号锦天国际A幢1002号

                        

                    

                    

                        

                            

                            
电话：028-86922220

                        

                        

                            

                            
地址：达州市南岸区弹子石腾龙大道58号2栋21-6

                        

                    

                

            

        

        

            友情链接：
            化妆品企业网站建设方案   品牌网站建设   专业网站建设   新型地坪材料   电商网站建设方案   攀枝花网站设计   移动APP   网站建设公司   成都水电改造   定制级高端网站建设           

    

    
版权所有：青羊区大橙子信息咨询工作室
        蜀ICP备2022028542号-14
    







    
        

            

            
在线咨询

        

    
    
        

            

            
服务热线

        

        
服务热线：028-86922220

    
    
        

            

            
TOP