JavaScript中property和attribute的区别


原文链接: JavaScript中property和attribute的区别
  • 1. 定义

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

  • 标准 DOMproperties(元素属性)与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 值

`