一、概述

attribute和property是常常被弄混的两个概念。

简单来说,property则是JS代码里访问的:

document.getElementByTagName('my-element').prop1 = 'hello';

attribute类似这种:

<my-element attr1="cool" />

JS代码里访问attribute的方式是getAttribute和setAttribute:

document.getElementByTagName('my-element').setAttribute('attr1','Hello');

document.getElementByTagName('my-element').getAttribute('attr1','Hello');

二、区别

多数情况下,两者是等效的。在web标准中,常常会规定某attribute“反射”了同名的property。但是例外的情况还是不少的。

1. 名字不一致

最典型的是className,为了回避JavaScript保留字,JS中跟class attribute对应的property是className。

<div class="cls1 cls2"></div>

<script>

var div = document.getElementByTagName('div');

div.className //cls1 cls2

</scrpit>

2. 类型不一致

最典型的是style,不接受字符串型赋值。

<div class="cls1 cls2" style="color:blue" ></div>

<script>

var div = document.getElementByTagName('div');

div.style // 对象

</scrpit>

3. 语义不一致

如a元素的href属性。

<a href="//m.taobao.com" ></div>

<script>

var a = document.getElementByTagName('a');

a.href // “http://m.taobao.com”,这个url是resolve过的结果

a.getAttribute('href') // “//m.taobao.com”,跟HTML代码中完全一致

</scrpit>

4. 单向同步关系

value是一个极为特殊的attribute/property。

<input value = "cute" />

<script>

var input = document.getElementByTagName('input');

//若property没有设置,则结果是attribute

input.value //cute

input.getAttribute('value'); //cute

input.value = 'hello';

//若value属性已经设置,则attribute不变,property变化,元素上实际的效果是property优先

input.value //hello

input.getAttribute('value'); //cute

</scrpit>

除此之外,checkbox的显示状态由checked和indeterminate两个property决定,而只有一个名为checked的property,这种情况下property是更完善的访问模型。

三、特殊场景

1.mutation

使用mutation observer,只能监测到attribute变化。

var observer = new MutationObserver(function(mutations){

for(var i = 0; i < mutations.length; i++) {

var mutation = mutations[i];

console.log(mutation.attributeName);

}

});

observer.observe(element,{attributes:true});

element.prop1 = 'aa' // 不会触发

element.setAttribute('attr1', 'aa') //会触发

2.custom element

在使用WebComponents时,可以定义attribute和property,两者可以互相反射,也可以全无关联。

var MyElementProto = Object.create(HTMLElement.prototype, {

createdCallback : {

value : function() { }

}

});

//定义property

Object.defineProperty(MyElementProto,'prop1', {

get:function(){

return //

},

set:function(){

console.log('property change');//do something

}

});

//定义attribute

MyElementProto.attributeChangedCallback = function(attr, oldVal, newVal) {

if(attr === 'attr1') {

console.log('attribute change');//do something

}

};

window.MyElement = document.registerElement('my-element', {

prototype: MyElementProto

});

HTML中的attribute和property的更多相关文章

  1. Javascript中的attribute和property分析

    attribute和property这两个单词,都有属性的意思,attribute有属性.特质的意思,property则有性质,性能的意思. 首先需要明确的是,在规范中,读取和设置attribute的 ...

  2. attribute和property兼容性分析

    上一篇文章中,详细的分析了他们的区别,请看Javascript中的attribute和property分析 这次,来详细的看下他们的兼容性,这些内容主要来自于对于jQuery(1.9.x)源代码的分析 ...

  3. 有关attribute和property,以及各自对select中option的影响

    这个问题老生常谈,但是直到现在我依旧时常会把它搞混.下面列一些各自的特性.   attribute property 设置方法 option.setAttribute('selected', true ...

  4. 详解JS中DOM 元素的 attribute 和 property 属性

    一.'表亲戚':attribute和property 为什么称attribute和property为'表亲戚'呢?因为他们既有共同处,也有不同点. attribute 是 dom 元素在文档中作为 h ...

  5. C#中Attribute和Property

    XAML是XML派生而来的语言,所以很多XML中的概念在XAML中是通用的. 为了表示同类标签中的某个标签与众不同,可以给它的特征(Attribute)赋值,为特征值赋值的语法如下: 非空标签:< ...

  6. javascript中attribute和property的区别详解

    DOM元素的attribute和property很容易混倄在一起,分不清楚,两者是不同的东西,但是两者又联系紧密.很多新手朋友,也包括以前的我,经常会搞不清楚. attribute翻译成中文术语为“特 ...

  7. 前端中的 Attribute & Property

    为了在翻译上显示出区别,Attribute一般被翻译为特性,Property被译为属性. 在使用上面,Angular已经表明态度 Template binding works with propert ...

  8. javascript DOM 操作 attribute 和 property 的区别

    javascript DOM 操作 attribute 和 property 的区别 在做 URLRedirector 扩展时,注意到在使用 jquery 操作 checkbox 是否勾选时,用 at ...

  9. JavaScript的attribute和property辨析

    1.Attribute Attribute是HTML上设置的属性,在html中显式地设置,或者通过setAttribute()方法设置. <input type='text' id='txt' ...

随机推荐

  1. EOJ 3246 实验室传染病

    线段树,暴力. 先处理出每个点直接能感染到的最左边的和最右边的. 之后每次扩展,看向左能到达的那些点中,最左以及最右能到哪些点,更新. 看向右能到达的那些点中,最左以及最右能到哪些点,更新. 最左最右 ...

  2. Django框架之【自定义模板过滤器与标签】

    本文在我的微信公众号的链接:https://mp.weixin.qq.com/s?__biz=MzU5NTU5MjcwNw==&mid=2247483674&idx=1&sn= ...

  3. bazel使用汇总

    最近重构代码之后,打算在本地用bazel来作项目构建.主要是因为brpc已经支持了bazel,所以在此之前料想会简单许多. 安装比较简单,centos直接用yum就行.按照这个指示: https:// ...

  4. File Associations

  5. codevs1081 线段树练习 2<区间修改>

    1081 线段树练习 2 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 大师 Master   题目描述 Description 给你N个数,有两种操作 1:给区间[a,b]的所有 ...

  6. BSGS算法+逆元 POJ 2417 Discrete Logging

    POJ 2417 Discrete Logging Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 4860   Accept ...

  7. MySQL -- 性能优化的最佳20+条经验

    FROM:http://www.cnblogs.com/shlhm/p/3235848.html ,学习学习~ 今天,数据库的操作越来越成为整个应用的性能瓶颈了,这点对于Web应用尤其明显.关于数据库 ...

  8. [转] 关于Struts-JSON配置(详解带实例struts2的json数据支持)

    关于Struts-JSON的提高开发效率 一.JSON是什么? :JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写,同时也易于机器解 析和 ...

  9. Codeforces Beta Round #10 A. Power Consumption Calculation 水题

    A. Power Consumption Calculation 题目连接: http://www.codeforces.com/contest/10/problem/A Description To ...

  10. Android TextView 显示HTML加图片

    TextView显示网络图片,我用android2.3的系统,可以显示图片出来,并且如果图片比较大,应用会卡的现象,肯定是因为使用主线程去获取网络图片造成的,但如果我用android4.0以上的系统运 ...