属性attribute和property的区别

最新推荐文章于 2022-01-11 10:44:13 发布
最新推荐文章于 2022-01-11 10:44:13 发布
阅读量204 收藏 2
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/jinxiaohang/p/10233070.html
版权 
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
    </head>
<body>

    <p id="intro">property: 指的是html 标签自带的属性，比如input 的value，id这些特有的属性，也就是说在w3c标准里面有提到的属性</p>
    <input id="abc" name="name123" data="data123" value="value123">
    <p>attributes:指的是html标签上面的所有属性，包括自定义属性，比如：data属性，mydata属性，daye属性</p>
    <h2>
        总结：
    </h2>
    <p>
        1、property和attributies都是properties的子集，而每个attribute是attributies的子集；  
    </p>
    <p>
        2、attribute可以理解为特性，可以自定义，直接在html标签上添加的和使用setAttribute添加的情况一致，即html标签添加的都是attribute属性， <br>
        property则是使用xx.属性进行更改，通常来讲，更改互相影响（value除外） 
    </p>
    <p>
        3、当添加新的非默认属性时，是不互通的；
    </p>
    <p>
        4、一些特殊属性，则需要特殊对待。
    </p>
    <p>
        js的setAttribute()、getAttribute()，jQ的prop()、attr()。
    </p>

</body>
<script src="http://libs.baidu.com/jquery/1.6.3/jquery.min.js"></script>
<script>
        var x=document.getElementById("abc");
        //1.1
        console.log("1.1、");
        console.log("修改前(x.value方式获取value的值)：value="+x.value);
        console.log("修改前(x.getAttribute('value')方式获取value的值)：value="+x.getAttribute('value'));
    
        //1.2
        console.log("1.2、");
        console.log('通过x.value="value456";方式修改value的值。');
        x.value="value456";
        console.log("修改后(x.value方式获取value的值)：value="+x.value);
        console.log("修改后(x.getAttribute('value')方式获取value的值)：value="+x.getAttribute("value"));
        
        //1.3
        console.log("1.3、");
        console.log('通过x.setAttribute("value","value789")方式修改value的值。');
        x.setAttribute("value","value789");
        console.log("修改后(x.value方式获取value的值)：value="+x.value);
        console.log("修改后(x.getAttribute('value')方式获取value的值)：value="+x.getAttribute("value"));
        console.log("**********************************************************************\n");
    
        //2.1
        console.log("2.1、");
        console.log("修改前(x.data方式获取data的值)：data="+x.data);
        console.log("修改前(x.getAttribute('data')方式获取data的值)：data="+x.getAttribute('data'));
    
        //2.2
        console.log("2.2、");
        console.log('通过x.data="data456";方式修改data的值。');
        x.data="data456";
        console.log("修改后(x.data方式获取data的值)：data="+x.data);
        console.log("修改后(x.getAttribute('data')方式获取data的值)：value="+x.getAttribute("data"));
    
        //2.3
        console.log("2.3、");
        console.log('通过x.setAttribute("data","data789")方式修改data的值。');
        x.setAttribute("data","data789");
        console.log("修改后(x.data方式获取data的值)：data="+x.data);
        console.log("修改后(x.getAttribute('data')方式获取data的值)：data="+x.getAttribute("data"));
        console.log("**********************************************************************\n");
    
        //3.1
        console.log("3.1、");
        console.log("修改前(x.name方式获取name的值)：name="+x.name);
        console.log("修改前(x.getAttribute('name')方式获取name的值)：name="+x.getAttribute('name'));
    
        //3.2
        console.log("3.2、");
        console.log('通过x.name="name456";方式修改name的值。');
        x.name="name456";
        console.log("修改后(x.name方式获取name的值)：name="+x.name);
        console.log("修改后(x.getAttribute('name')方式获取name的值)：name="+x.getAttribute("name"));
        
        //3.3
        console.log("3.3、");
        console.log('通过x.setAttribute("name","name789")方式修改name的值。');
        x.setAttribute("name","name789");
        console.log("修改后(x.name方式获取name的值)：name="+x.name);
        console.log("修改后(x.getAttribute('name')方式获取name的值)：name="+x.getAttribute("name"));
        console.log("**********************************************************************\n");
    
        //4.1 JQ
        console.log("4.1、");
        console.log("修改前($('#abc').prop('value')方式获取value的值)：value=" + $("#abc").prop('value'));
        console.log("修改前($('#abc').attr('value')方式获取value的值)：value="+$("#abc").attr('value'));
        console.log("修改前(x.value方式获取value的值)：value="+x.value);
        console.log("修改前(x.getAttribute('value')方式获取value的值)：value="+x.getAttribute('value'));
    
        //4.2
        console.log("4.2、");
        console.log('通过$("#abc").attr("value","*value456");方式修改value的值。');
        $('#abc').attr("value","*value456");
        console.log("修改后($('#abc').prop('value')方式获取value的值)：value=" + $("#abc").prop('value'));
        console.log("修改后($('#abc').attr('value')方式获取value的值)：value="+$("#abc").attr('value'));
        console.log("修改后(x.value方式获取value的值)：value="+x.value);
        console.log("修改后(x.getAttribute('value')方式获取value的值)：value="+x.getAttribute("value"));
    
        //4.3
        console.log("4.3、");
        console.log('通过$("#abc").prop("value","*value789");方式修改value的值。');
        $('#abc').prop("value","*value789");
        console.log("修改后($('#abc').prop('value')方式获取value的值)：value=" + $("#abc").prop('value'));
        console.log("修改后($('#abc').attr('value')方式获取value的值)：value="+$("#abc").attr('value'));
        console.log("修改后(x.value方式获取value的值)：value="+x.value);
        console.log("修改后(x.getAttribute('value')方式获取value的值)：value="+x.getAttribute("value"));
        console.log("**********************************************************************\n");
    
        //5.1
        console.log("5.1、");
        console.log("修改前($('#abc').prop('data')方式获取data的值)：data=" + $("#abc").prop('data'));
        console.log("修改前($('#abc').attr('data')方式获取data的值)：data="+$("#abc").attr('data'));
        console.log("修改前(x.data方式获取data的值)：data="+x.data);
        console.log("修改前(x.getAttribute('data')方式获取data的值)：data="+x.getAttribute('data'));
    
        //5.2
        console.log("5.2、");
        console.log('通过$("#abc").attr("data","*data456");方式修改data的值。');
        $('#abc').attr("data","*data456");
        console.log("修改后($('#abc').prop('data')方式获取data的值)：data=" + $("#abc").prop('data'));
        console.log("修改后($('#abc').attr('data')方式获取data的值)：data="+$("#abc").attr('data'));
        console.log("修改后(x.data方式获取data的值)：data="+x.data);
        console.log("修改后(x.getAttribute('data')方式获取data的值)：value="+x.getAttribute("data"));
    
        //5.3
        console.log("5.3、");
        console.log('通过$("#abc").prop("data","*data789");方式修改data的值。');
        $('#abc').prop("data","*data789");
        console.log("修改后($('#abc').prop('data')方式获取data的值)：data=" + $("#abc").prop('data'));
        console.log("修改后($('#abc').attr('data')方式获取data的值)：data="+$("#abc").attr('data'));
        console.log("修改后(x.data方式获取data的值)：data="+x.data);
        console.log("修改后(x.getAttribute('data')方式获取data的值)：value="+x.getAttribute("data"));
        console.log("**********************************************************************\n");
    
        //6.1
        console.log("6.1、");
        console.log("修改前($('#abc').prop('name')方式获取name的值)：name=" + $("#abc").prop('name'));
        console.log("修改前($('#abc').attr('name')方式获取name的值)：name="+$("#abc").attr('name'));
        console.log("修改前(x.name方式获取name的值)：name="+x.name);
        console.log("修改前(x.getAttribute('name')方式获取name的值)：name="+x.getAttribute('name'));
    
        //6.2
        console.log("6.2、");
        console.log('通过$("#abc").attr("name","*name456");方式修改name的值。');
        $('#abc').attr("name","*name456");
        console.log("修改后($('#abc').prop('name')方式获取name的值)：name=" + $("#abc").prop('name'));
        console.log("修改后($('#abc').attr('name')方式获取name的值)：name="+$("#abc").attr('name'));
        console.log("修改后(x.name方式获取name的值)：name="+x.name);
        console.log("修改后(x.getAttribute('name')方式获取name的值)：name="+x.getAttribute("name"));
    
        //6.3
        console.log("6.3、");
        console.log('通过$("#abc").prop("name","*name789");方式修改name的值。');
        $('#abc').prop("name","*name789");
        console.log("修改后($('#abc').prop('name')方式获取name的值)：name=" + $("#abc").prop('name'));
        console.log("修改后($('#abc').attr('name')方式获取name的值)：name="+$("#abc").attr('name'));
        console.log("修改后(x.name方式获取name的值)：name="+x.name);
        console.log("修改后(x.getAttribute('name')方式获取name的值)：name="+x.getAttribute("name"));
        console.log("**********************************************************************\n");
    
        
    </script>
</html>

　　

 

转载于:https://www.cnblogs.com/jinxiaohang/p/10233070.html

weixin_30617737
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript中attribute和property的区别详解
12-09
attribute翻译成中文术语为“特性”，property翻译成中文术语为“属性”，从中文的字面意思来看，确实是有点区别了，先来说说attribute。attribute是一个特性节点，每个DOM元素都有一个对应的attributes属性来存放...
Hibernate 实体配置中properties 和 property的区别
小道仙的后宫
07-03 1472
今天在做再改一个Hibernate项目的时候，遇到了不管我怎么写dao层，三种查询 原生sql、criteria、hql都用上了全部都查询不出结果来。修改了很久都没有弄出来。最后发现是实体中的hbm.xml文件写出了，出错如下： 我用三种方式查询 出现了的错误如下： properties 是导入外部资源用的，后面接的是个路径 指向的是properties文件 ...
Property和Attribute的区别
在云端
08-10 6715
Property属于面向对象理论范畴。在使用面向对象思想编程的时候常常需要对客观事物进行抽象，再把抽象出来的结果封装成类，类中用来表示对象状态的成员就是property。Attribute则是编程语言文法层面的东西，比如有两个同类的语法元素A和B，为了区分A和B，就需要加一些Attribute，attribute可以翻译为特征。在标签语言中进行面向对象编程时，property也被包装成为attrib
attribute和property的区别
ysds20211402的博客
01-11 3007
转自：微点阅读https://www.weidianyuedu.com property 和 attribute非常容易混淆，两个单词的中文翻译也都非常相近（property：属性，attribute：特性），但实际上，二者是不同的东西，属于不同的范畴。 property是DOM中的属性，是JavaScript里的对象； attribute是HTML标签上的特性，它的值只能够是字符串； attribute和property介绍 简单理解，Attribute就是dom节点自带的属性，例如ht..
Attribute和Property的区别
热门推荐
u013362969的博客
03-11 1万+
一：Attribute和Property的区别 1.含义区别 首先在定义上更准确的来说，Attribute和Property分别为特性和属性，作为区别。 其次，这样理解下来，我们知道Attribute就是DOM节点自带属性，例如我们在HTML中常用的id,class,src,title,alt等。而Property则是这个DOM元素作为对象，其附加的属性或者内容，例如childNodes，fir...
attribute和property的区别 (转载)
weixin_30915951的博客
09-05 240
DOM元素的attribute和property很容易混倄在一起，分不清楚，两者是不同的东西，但是两者又联系紧密。很多新手朋友，也包括以前的我，经常会搞不清楚。 attribute翻译成中文术语为“特性”，property翻译成中文术语为“属性”，从中文的字面意思来看，确实是有点区别了，先来说说attribute。 attribute是一个特性节点，每个DOM元素都有一个对应的attribut...
C#中Property和Attribute的区别实例详解
01-01
在C#中有两个属性，分别为Property和Attribute，两个的中文意思都有特性、属性之间，但是用法上却不一样，为了区别，本文暂把Property称为特性，把Attribute称为属性。 Attribute才是本文的主角，把它称为属性我觉得...
JS中DOM元素的attribute与property属性示例详解
10-18
主要给大家介绍了关于JS中DOM元素的attribute与property属性的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起看看吧
JavaScript中property和attribute的区别详细介绍
12-07
1. 定义 Property：属性，所有的HTML元素都由HTMLElement类型表示，HTMLElement类型直接继承自Element并添加了一些属性，添加的这些...Attribute：特性，区别于property，attribute只能是字符串，大小写不敏感，出现
DOM 中 Property 和 Attribute 的区别
weixin_30391339的博客
08-03 519
property 和 attribute非常容易混淆，两个单词的中文翻译也都非常相近（property：属性，attribute：特性），但实际上，二者是不同的东西，属于不同的范畴。 property是DOM中的属性，是JavaScript里的对象； attribute是HTML标签上的特性，它的值只能够是字符串； 基于JavaScript分析property 和 attribute html...
【心得】Attribute和Property的区别；
陶洲川的博客
03-28 1万+
Attribute和Property的区别 1、Attribute和Property都是属性的意思，也有人翻译Attribute为特性，Property为属性，有的地方和人也不会去区分这个意思，这个看人，这个帖子也总结了一些观点，如果有不同意见欢迎交流，权当有趣； Attribute是原属性； Property是通过方法处理过得到的属性； 2、类似： 生活中的广义的水（Attri
Attribute和Property的区别?
追命-
07-21 555
作者：史蒂芬 链接：https://www.zhihu.com/question/30111950/answer/143155895 来源：知乎 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 其实老外也经常混着用，没去仔细区分它们区别。 如果有点编程的知识，可能会更加理解这两个词的意思。 英文系统里，右键单击一个文件，显示是property（中文系统里对应的是"属性“）...
html的attributes和dom的property的区别
Wind_waving的博客
08-15 103
转载自https://www.cnblogs.com/elcarim5efil/p/4698980.html

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值