辨清DOM元素的特性与属性

辨清DOM元素的特性与属性

初学JS的时候，我们可能经常分不清DOM元素的特性和属性，我们往往会把它们认为是一个东西，我们可以看看下面的代码：

HTML:

<div id='test' class='test'></div>

JS:

var test = document.getElementById('test');
test.className = '123';
console.log(test.className,test.getAttribute('class'));//123 123

我们可以看到当我们改变元素的class的时候，无论是它的属性className还是特性class都会发生改变，那么我们真的可以认为这两个是一样的么？我们在看看下面这个栗子:

HTML:

<form id="myForm" action="TEST" style="color:red">

</form>

JS:

var form = document.getElementById('myForm');

console.log(form.getAttribute('style'),form.style);//color:red style对象

我们发现获取style特性和style属性得到的完全不是一个东西，所有特性和属性其实是两个东西。但是对于大多数情况来说，属性会自动与特性对应，比如我们的第一个栗子。然而某些情况就不会自动对应了：

• 自定义的特性

由于自定义的特性找不到对应的属性，当然就无法对应了。

• 元素的属性被被改变成了对内部元素的引用。

元素的id和name特性会作为元素的属性值进行引用，如果这些特性值刚好与元素的属性同名，那么form的原有的属性就被覆盖。这个时候我们再去修改已经被覆盖过的属性值的时候，对应的特性值会发生改变，但是我们访问这个属性时却发现它返回的还是引用的那个DOM元素。在这里，我再来举个栗子:

HTML:

<form id="myForm" action="TEST" style="color:red" testData="1231">
            <input id="id">
            <input id="action">
</form>

JS:

var form = document.getElementById('myForm');
form.id ='123';
console.log(form.id);// <input id="id">
console.log(form.getAttribute('id'));// 123 

即便属性与特性自动对应，但是有的时候，它们可能是不同的东西，比如之前提到style的特性与属性。除此之外还有与URL、COLOR相关的属性和特性等等。下面来说一下属性规范化的问题。

属性规范化

获取dom元素中的src、href、action(跟URL相关)、style.color、style.backgroundColor(跟颜色相关)的属性值，得到的是规范化后的值并不是原始值，而要想访问原始值有两种途径:访问DOM的属性节点，访问DOM的特性值(IE8以下返回的仍是规范化后的值)。

URL规范化

访问src、href、action属性的时候会自动转换为完整规范的URL格式。例如:

HTML:

<a href = "www.yuchenblog.cn" id="test"></a> 

JS:

var a = document.getElementById('test');
console.log(a.href);//file:///C:/Users/swull/Desktop/www.yuchenblog.cn
console.log(a.getAttribute('href')); // www.yuchenblog.cn

color规范化

访问color相关的属性值，通常也不一定返回原值，而是返回规范化后的值，但是不同游览器规范化后的值会有一定的区别。

• webkit游览器

元素值	规范化后
blue	rgb(0,0,255)
#0000FF	rgb(0,0,255)
rgba(0,0,255,0.4)	rgb(0,0,255,0.4)
HSL(120,100%,25%)	rgb(0,127,0)
HSLA(120,100%,25%,0.5)	rgba(0, 127, 0, 0.498039)

- Firefox

元素值	规范化后
blue	blue
#0000FF	rgb(0,0,255)
rgba(0,0,255,0.4)	rgb(0,0,255,0.4)
HSL(120,100%,25%)	rgb(0,127,0)
HSLA(120,100%,25%,0.5)	rgba(0, 127, 0, 0.498039)

- IE9+

元素值	规范化后
blue	blue
#0000FF	rgb(0,0,255)
rgba(0,0,255,0.4)	rgb(0,0,255,0.4)
HSL(120,100%,25%)	HSL(120,100%,25%)
HSLA(120,100%,25%,0.5)	HSLA(120,100%,25%,0.5)

- IE8-

元素值	规范化后
blue	blue
#0000FF	0000FF
rgba(0,0,255,0.4)	rgb(0,0,255,0.4)
HSL(120,100%,25%)
HSLA(120,100%,25%,0.5)

原文见这里