DOM中的Attribute与Property的区别

2016年11月20日Web前端0

attribute与property这两个值总是给人以相同的感觉，其实他们之间也是有很大的不同的。 注：IE8-中两个值是一样的。

1.attribute

在原生JS中，提供了getAttribute/setAttribute等原生方法来获取或改变这些值。在节点中，也会细分属性节点，用attribute属性来获取。

<div id="one" name="two" data="three">1111</div>
var oDiv = document.getElementById('one');
console.log(oDiv.getAttribute('id'));   // one
console.log(oDiv.getAttribute('name')); // two
console.log(oDiv.attributes);           // NamedNodeMap {....} 仍可用 oDiv.attributes.属性获取

2.property

每个DOM节点可以看成是一个对象，我们要取其值时，只需要像对象取其属性一样操作就行了。

<div id="one" name="two" data="three">1111</div>
var oDiv = document.getElementById('one');
console.log(oDiv.id);   // one
console.log(oDiv.name); // undefined

我们可以直接取到id却取不到name，很显然，name不是一个property，默认的属性一般包括，id、src、href、className、dir、title、lang等。

3.自定义值下的attr和prop是不相等的

<div id="one" name="two" hehe="three" ok="true">1111</div>
var oDiv = document.getElementById('one');
console.log(oDiv.hehe);                  // undefined
console.log(oDiv.getAttribute('hehe'));  // three
oDiv.ok = 'ok';
console.log(oDiv.ok);                    // ok
console.log(oDiv.getAttribute('ok'));    // null

可以看出对于自定义的属性，两种值下的结果是不一样的。写在html中的值，是一直可以用attribute来获取的，而直接用属性获取，则只能是用JS添加的。

4.非自定义值

<input id="txt" type="text" />
var oTxt = document.getElementById('txt');
console.log(oTxt.value);                 // ""
console.log(oTxt.getAttribute('value')); // null
<input id="txt" type="text" value="123" />
var oTxt = document.getElementById('txt');
console.log(oTxt.value);                 // '123'
console.log(oTxt.getAttribute('value')); // '123'

对于DOM元素，未初始化的变量值的property与attribute是不一样的。对于前一个input框，我们继续操作，

var oTxt = document.getElementById('txt');
oTxt.value = 456;
console.log(oTxt.value);                 // 456
console.log(oTxt.getAttribute('value')); // 123

var oTxt = document.getElementById('txt');
oTxt.setAttribute('value', 456);
console.log(oTxt.value);                  // 456
console.log(oTxt.getAttribute('value'));  // 456

两种赋值方式都可以将输入框中的值改成456，但是影响是不同的。因为attribute的变化会反应到property上去，而property的改变不会影响attribute。 当然，同步不是完完全全的同步，当获取src或是href时，

<a id="adv" href="./1.html"></a>
var oA = document.getElementById('adv');
console.log(oA.href);                  // file:///D:/xampp/htdocs/project/1.html
console.log(oA.getAttribute('href'));  // ./1.html

attribute是直接取得html中的相对路径，而property则是绝对路径。 熟悉了这两个值的不同，何时选取哪个值就会变得很容易了。

HTMLJavaScript

目录