一、概述

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. (转) redis的事务和watch

    redis的事务 严格意义来讲,redis的事务和我们理解的传统数据库(如mysql)的事务是不一样的. redis中的事务定义 Redis中的事务(transaction)是一组命令的集合. 事务同 ...

  2. hdu 1596 find the safest road (dijkstra)

    Problem Description XX星球有很多城市,每个城市之间有一条或多条飞行通道,但是并不是所有的路都是很安全的,每一条路有一个安全系数s,s是在 0 和 1 间的实数(包括0,1),一条 ...

  3. margin padding 图

  4. PHP视频教程 字符串处理函数(二)

    1.字符串输出:echo()输出一个或者多个字符串 2.截取 chunk_split(); 3.

  5. BZOJ 3676: [Apio2014]回文串 后缀自动机 Manacher 倍增

    http://www.lydsy.com/JudgeOnline/problem.php?id=3676 过程很艰难了,第一次提交Manacher忘了更新p数组,超时,第二次是倍增的第0维直接在自动机 ...

  6. 两个矩阵相加 Exercise08_05

    import java.util.Scanner; /** * @author 冰樱梦 * 时间:2018年12月 * 题目:两个矩阵相加 * */ public class Exercise08_0 ...

  7. python开发_shelve_完整版_博主推荐

    ''' python中的shelve模块,可以提供一些简单的数据操作 他和python中的dbm很相似. 区别如下: 都是以键值对的形式保存数据,不过在shelve模块中, key必须为字符串,而值可 ...

  8. iOS开发经验总结——基础工程

    iOS开发经验总结--依赖库 这篇博客,我想说一下开发中经常遇到的一个问题,虚拟个场景描述一下的话,应该是这样的. 项目经理:今天我们正式开始一个新项目,iOSer你负责把苹果端的APP完成,有没有问 ...

  9. CentOS 6.9/7通过yum安装指定版本的PostgreSQL

    PostgreSQL(10+) 一.安装PostgreSQL // 安装EPEL源 # wget http://dl.fedoraproject.org/pub/epel/6/x86_64/epel- ...

  10. MOSFET enhances voltage regulator's overcurrent protection

    The classic LM317 adjustable-output linear voltage regulator offers a relatively high, if package-de ...