属性（Property）

总结

两者属性有交集，但两者互不包含

对属性Property可以赋任何类型的值，而对特性Attribute只能赋值字符串

脚踏两者船属性同步变更

取值与赋值

《js高级程序设计》中提到，为了方便操作，建议大家用setAttribute()和getAttribute()来操作即可。

简单理解，
Attribute就是dom节点自带的属性，例如html中常用的id、class、title、align等
Property是这个DOM元素作为对象，其附加的内容，例如childNodes、firstChild等

Attribute赋值和Property赋值区别

常用的Attribute，例如id、class、title等，已经被作为Property附加到DOM对象上，可以和Property一样取值和赋值。但是自定义的Attribute，就不会有这样的特殊优待，例如：

这个div里面的“title1”就不会变成Property。
即，只要是DOM标签中出现的属性（HTML代码），都是Attribute。然后有些常用特性（id、class、title等），会被转化为Property。可以很形象的说，这些特性/属性，是“脚踏两只船”的。

但是这个方法的浏览器兼容性有问题，有些浏览器可能会获取属性Property的值，因此jQuery要做一个测试，看getAttribute()是否是绝对获取特性Attribute的值。

div1.className = 'a';
var judge = div1.getAttribute("className") === 'a';

如果以上代码成立，说明getAttribute()方法出现了问题，将不再使用。

脚踏两只船属性

value等属性踏不踏两只船还要取决于dom标签类型。

>document.querySelector('#searchBox').value
"4444"
>document.querySelector('#searchBox').getAttribute('value')
"4444"

document.body.value

undefined

document.body.getAttribute('value')

null

document.body.setAttribute('value','test')

undefined

document.body.getAttribute('value')

"test"

document.body.value

undefined

$(document.body).val()

""

$(document.body).attr('value')

"test"

class的确脚踏两只船，但名称换了

domC.children[1].class
undefined
domC.children[1].className
"btn btn-xs btn-default ml10 preview"
domC.children[1].classList
["btn","btn-xs","btn-default","ml10","preview",value: "btn btn-xs btn-default ml10 preview"]

获取style的方式

样式表的样式(即非内联样式)无法通过getAttribute()/"."获取(虽然能起效果)。

• 用“.”获取Style

console.log(div1.style);

以上代码中，返回了一个CSSStyleDeclaration对象，这个对象中包含着样式的所有信息

• 用getAttribute()获取style：

console.log(div1.getAttribute("style"));

以上代码返回的就是一个简单的字符串：“width:100%; padding:10px;”

用“.”获取的是style属性Property，我们可以给属性Property赋任何类型的值；而用getAttribute()获取的是特性Attribute，特性Attribute中只能存贮字符串。两者的数据结构不一致，导致返回的结果不一致。(setAttribute('style','width: 800px');,style内容就都换了)

案例：元素的高宽（样式属性）

方式1:

document.getElementsByTagName('div')[3].children[1].style.width = '700px'

方式2:

document.getElementsByTagName('div')[3].children[1].setAttribute('style','width: 800px');

案例：元素的disabled（样式属性）

input.removeAttribute('disabled'); 
input.setAttribute('disabled','disabled'); //起始值要有此属性就会禁用

.diabled = true;
.diabled = false;

案例：checked

默认的checked只在外面，不在attributes里。(所以[]选不到的) (与input的标签页value一样，不会跟随变更)

document.querySelector('[checked]')
null

document.querySelector('[checked]')
 ​…​​
document.querySelector('[checked]').checked
 false
document.querySelectorAll('[name="gender"]')
 (2) [input,input]
document.querySelectorAll('[name="gender"]')[1]
 dio" value=​"f">​…​​
document.querySelectorAll('[name="gender"]')[1].checked
 true