标签：至少1个，最多5个
当我们通过js处理DOM对象时非常容易将attribute（特性）和property（属性）混淆。document.getElementById('test').getAttribute('id')，$('#test').attr('id'), document.getElementById('test').id还有$('#test').prop('id')三者都返回相同的id：“test”。这篇文章我将解释attribute和property的区别。
Attribute（特性）
attribute特性由HTML定义，所有出现在HTML标签内的描述节点都是attribute特性。
&div id="test" class="button" custom-attr="1"&&/div&
document.getElementById('test').
// return: [custom-attr="hello", class="button",
id="test"]
attribute特性的类型总是字符串类型。拿上边的DIV为例，document.getElementById('test').getAttribute('custom-attr')
或者 $('#test').attr('custom-attr')总是返回字符串类型的"1"。
Property（属性）
property属性属于DOM对象，DOM实质就是javascript中的对象。我们可以跟在js中操作普通对象一样获取、设置DOM对象的属性，并且property属性可以是任意类型。
document.getElementById('test').foo = 1; // 设置属性: foo 为 number类型: 1
document.getElementById('test'). // 获取属性值, return number: 1
$('#test').prop('foo'); // 使用jquery获取属性值, return number: 1
$('#test').prop('foo', {
name: 'John'
}); // 使用jquery设置一个名为foo的对象
document.getElementById('test').foo. // return number类型: 23
document.getElementById('test').foo. // return string类型: "John"
译者注：这里的property可以是任意类型指的是我们为DOM对象自定义添加的属性，对于DOM对象的原始属性，类似name属性，无论我们设置什么类型的值，最后返回的都是字符类型。
另外，我们获取HTML5定义的data属性时，获取的值也是字符串。&div data-id="33"&&/div&,ele.dataset.id // string 33
非自定义的attribute特性与property有1:1的映射关系，比如：id，class，title等。
&div id="test" class="button" foo="1"&&/div&
document.getElementById('test'). // return string: "test"
document.getElementById('test').classN // return string: "button"
document.getElementById('test'). // return undefined 因为foo是一个自定义的attr特性
注意：当我们通过property属性进行设置或获取class时，我们需要使用"className"，因为在js中class是关键字。
译者注：第二点的意思是说当我们在html中写非自定义的attribute特性时，DOM对象会自动映射对应的property
非自定义的property（attribute）改变的时候，其对应的attribute（property）在多数情况下也会改变。
&div id="test" class="button"&&/div&
var div = document.getElementById('test');
div.className = 'red-input';
div.getAttribute('class'); // return string: "red-input"
div.setAttribute('class','green-input');
div.classN // return string: "green-input"
当对应的property改变的时候，attribute特性value的值一直未默认值，并不会随之改变。
&input id="search" value="foo" /&
var input = document.getElementById('search');
input.value = 'foo2';
input.getAttribute('value'); // return string: "foo"
译者注：这条特性意味着我们平时在写业务的时候多数情况下使用property是正确的。当用户input输入更改的时候，attribute-value值不会变化，即使js更改value，也不会使attribute变化。这也验证了第三点的。
在javascript中我们推荐使用property属性因为这个属性相对attribute更快，更简便。尤其是有些类型本该是布尔类型的attribute特性。比如："checked", "disabled", "selected"。浏览器会自动将这些值转变成布尔值传给property属性。
&input id="test" class="blue" type="radio" /&
document.getElementById('test').
// set class
document.getElementById('test').className = 'red';
// get and set radio control status
document.getElementById('test'). // boolean
document.getElementById('test').checked =
$('#test').prop('checked'); // boolean
$('#test').prop('checked', true);
document.getElementById('test').getAttribute('id');
// set class
document.getElementById('test').setAttribute('class', 'red');
document.getElementById('test').getAttribute('checked'); //
返回字符串类型 'checked'
本文来自，有什么需要讨论的欢迎找我。
0 收藏&&|&&1
你可能感兴趣的文章
19 收藏，1.5k
41 收藏，3.1k
本作品采用 署名-非商业性使用-禁止演绎 4.0 国际许可协议 进行许可
分享到微博？
你好！看起来你挺喜欢这个内容，但是你还没有注册帐号。 当你创建了帐号，我们能准确地追踪你关注的问题，在有新答案或内容的时候收到网页和邮件通知。还能直接向作者咨询更多细节。如果上面的内容有帮助，记得点赞 (????)? 表示感谢。
明天提醒我
我要该，理由是：
扫扫下载 App推荐到广播
150018 人聚集在这个小组
(北京宇利来翻译)
(快乐Kria)
(我要强健肠动力)
第三方登录：property、character、characteristic、trait、attribute、feature 区别_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
property、character、characteristic、trait、attribute、feature 区别
上传于|0|0|文档简介
&&property、character、characteristic、trait、attribute、feature 区别
阅读已结束，如果下载本文需要使用0下载券
想免费下载更多文档？
定制HR最喜欢的简历
你可能喜欢> 博客详情
&div id="test" name="div1" class="center" customtag="divTest"/&
上例中div里面的id、name、class还有自定义的customtag都放到了attributes里面，attributes类似数组的容器，名字索引存放的是name=value的attribute的节点
document.getElemmentById("test").getAttribute("customtag") //divTest
很多attribute节点有一个相应的property属性，如例子中的div元素的id和class既是attribute也有property，不管哪种方式都可以访问和修改,但是对于自定义的attribute节点，或者自定义property，两者就没有关系了,对于IE6-7来说，没有区分attribute和property。
虽然getAttribute和点号方法都能获取标准属性，但是他们对于某些属性，获取到的值存在差异性，比如href,src,value等
&a href="#" id="link"&Test Link&/a&
&img src="img.png" id="image" /&
&input type="text" value="enter text" id="ipt" /&
var $ = function(id){return document.getElementById(id);};
alert($('link').getAttribute('href'));//#
alert($('link').href);//fullpath/file.html#
alert($('image').getAttribute('src'))//img.png
alert($('image').src)//fullpath/img.png
alert($('ipt').getAttribute('value'))//enter text
alert($('ipt').value)//enter text
$('ipt').value = 5;
alert($('ipt').getAttribute('value'))//enter text
alert($('ipt').value)//5
人打赏支持
码字总数 23478
支付宝支付
微信扫码支付
打赏金额: ￥
已支付成功
打赏金额: ￥标签：至少1个，最多5个
DOM对象的property值通过点方式获取
document.body.className //获取body的类名
DOM对象是对象，所以它可以像其他JS对象一样存储自定义的property
document.body.myData = {
name : 'John'
document.body.sayHi = function(){
alert('hello world');
console.log(document.body.myData.name);
console.log(document.body.sayHi());
自定义的property和方法只会在JS中显示，不会影响HTML.
使用for...in可以遍历出所有的标准property和自定义propery
document.body.custom = 5;
var list = [];
for(var key in document.body){
list.push([key, document.body[key]]);
console.log(list);
So,自定义的dom property：
可以有任意值，property名区分大小写
不会影响HTML
DOM节点提供如下方法来访问html attributes
ele.hasAttribute(name) //&=ie8
ele.getAttribute(name)
ele.setAttribute(name)
ele.removeAttribute(name) //&=ie8
Note: IE8以下及ie8兼容模式下，setAttribute修改的是dom property，不是attribute
和property对比，attribute:
值只能为字符串
名称不区分大小写
会在html中呈现
可以用DOM的attributes propery列出所有的attribute
&div about="Elephant" class="smiling"&&/div&
var div = document.body.children[0]
console.log( div.getAttribute('ABOUT') ) // (1)
div.setAttribute('Test', 123)
console.log( document.body.innerHTML )
property和attribute的同步
每个dom节点对象都有标准的properties，同步的可能性有三种
标准dom property和attribute值保持一致
document.body.setAttribute('id','pageWrap')
console.log(document.body.id) // pageWrap
标准dom property的值不一定和attribute完全一致
&a id="test"&测试&/a&
var a = document.getElementById('test');
a.href = '/';
console.log(a.getAttribute('href')); // '/'
console.log(a.href); // 完整链接，但ie7及以下'/' (若链接中有中文，ff和chrome下会转义),这是因为w3c规定href property必须为格式良好的链接
还有一些其他的attribute，同步的值却不相同，比如input.checked
&input type='checkbox' id='check' checked='aa'/&
var input = document.getElementById('check');
console.log(input.checked); //true
console.log(input.getAttribute('checked')) //'aa'
input.checked的property值只可能为true或false，但attribute值是获取你填入的任意值
有些内置property是单向同步的比如，input.value同步value attribute值，但value attribute值不同步value property值.并且，input框内用户改变输入值后，value property值会随着变化，value attribute值不变.
&input type="text" id="text"/&
var input = document.getElementById('text');
input.setAttribute('value','hello');
console.log(input.value); //hello
console.log(input.getAttribute('value')); //hello
input.value = 'new';
console.log(input.value); //new
console.log(input.getAttribute('value')); //hello
input.setAttribute('value','other'); //此时再改变value attribute，value property不再变化
console.log(input.value); //other
console.log(input.getAttribute('value')); //other
所以value attribute可以存储输入框的初始值,用于判断输入框值是否被改变
同步的propery和attribute名称不一致class/className因为JS中class是保留字，所以对于class attribute，用className property来代替class property。
document.body.setAttribute('class', 'big red bloom');
console.log(document.body.className); //big red bloom, 但ie8及以下输出为空
除了&ie9,其他浏览器都会随着class attribute的变化，而修改类名。为了保证兼容性，不要用class attribute,用className property.
attribute和property都是dom模型的重要特征.
在实际应用中，98%场景使用property，只有在如下两个场景使用attribute：
自定义的html attribute，因为使用property时不会同步到HTML.
需要获取内置html attribute，并且不和property同步的，并且你确定你需要这个attribute. eg.input的value attribute.
translate for
4 收藏&&|&&19
你可能感兴趣的文章
1 收藏，366
41 收藏，3.1k
2 收藏，436
本作品采用 署名-非商业性使用-禁止演绎 4.0 国际许可协议 进行许可
分享到微博？
你好！看起来你挺喜欢这个内容，但是你还没有注册帐号。 当你创建了帐号，我们能准确地追踪你关注的问题，在有新答案或内容的时候收到网页和邮件通知。还能直接向作者咨询更多细节。如果上面的内容有帮助，记得点赞 (????)? 表示感谢。
明天提醒我
我要该，理由是：
扫扫下载 App