JavaScript中property和attribute的区别

by · 2016年07月27日 · 1139 Words · ~3min reading time | Improve on


原文链接： JavaScript中property和attribute的区别

  • 1. 定义

    • property（元素属性）：DOM 节点是一个对象，因此，可以添加自定义的属性以及方法。property 的值可以是任何的数据类型，对大小写敏感。自定义的property不会出现在 html 中，只存在 JavaSctipt 中。
    • attribute（标签属性）：attribute 只能是字符串，大小写不敏感，出现在 innerHTML 中，通过类数组attributes可以罗列所有的 attribute。

  • 2. 相同之处

  • 标准 DOM 的 properties（元素属性）与attributes（标签属性）是同步的。公认的 attributes（标签属性）会添加到DOM对象 property（元素属性）上，如 id、style、className、disabled、checked等。这时候直接操作 property (el. checked) 或者使用 el.getAttribute() / el.setAttribute()效果一致。但是参数不一定相同，如：el.className 与 el.getAttribute('class')

  • 3. 不同之处

  • 对于有些标准的特性的操作，el.getAttribute 与 el.property获取的值存在差异性。如: `href、src、value、style、onclic 等

  • Demo1：el.getAttribute 获取的是 href 的实际值，el.property 获取的是完整的 url

    alEl.href = '/';
alert(alEl.getAttribute('href'));  // '/'
alert(alEl.href);  				 // full URL
    • Demo2：el.property 可以从 el.setAttribute 获得同步

    inputEl.setAttribute('value', 'hello');
alert(inputEl.value );	 		    // 'hello' -- property changed!

  • Demo3： el.getAttribute 不能从 el.property 获得同步

    inputEl.value = 'bye';
    alert(inputEl.getAttribute('value')); // 'hello' – attribute not changed!
  • Demo4：el.getAttribute 只能获取输入框的原始值，el.property 可以获取输入框修改后值

用户输入 'good'，inputEl.value 获得 'good'，inputEl.getAttribute('value') 获得原始值 'hello'。
可以利用 inputEl.value == inputEl.getAttribute('value') 检验 input 是否变化

  • Demo5：checkbox 未选中时 -- el.getAttribute 返回 null，el.property 返回 false

checkbox 选中时 -- el.getAttribute 仍返回 null，el.property 返回 ture

alert(checkboxEl.checked); 					//  boolean true
alert(checkboxEl.getAttribute('checked')); 		//  object null
  • Demo6：style -- el.getAttribute 返回 string, el.property 返回 object

alert(divEl.style); 					// 'width:200px;height:200px;'
alert(divEl.getAttribute('style') ) 	//  [object CSSStyleDeclaration]

  • 4. 浏览器兼容性上的差别

    • 1)IE<9 浏览器中，el.property 和 el.getAttribute 可以相互访问自定义属性
    • 2)IE<8（包括IE8种的IE7兼容模式），el.property 和 el.getAttribute 相同
    • 因为 attribute 对大小写不敏感，在这种情况下，用 el.getAttribute 访问特性时，浏览器会选择第一次出现的值。

document.body.abba = 1 // assign property (now can read it by getAttribute)
document.body.ABBA = 5 // assign property with another case
// must get a property named 'ABba' in case-insensitive way.
alert( document.body.getAttribute('ABba') ) // 1

  • 5. 优先选择 property

    • 在实际应用中，98% 的 DOM 操作都是使用 properties。

    • 总结：只有两种情形需要使用attributes ：

    • 1) 自定义的 HTML attributes，因为它并不同步到DOM property

    • 2) 访问内置的HTML attributes（设置的初始值），这些 attribute不能从property 同步过来。例如input标签的 value 值

Tags:

`