HTML中的attribute和property
一、概述
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的更多相关文章
- Javascript中的attribute和property分析
attribute和property这两个单词,都有属性的意思,attribute有属性.特质的意思,property则有性质,性能的意思. 首先需要明确的是,在规范中,读取和设置attribute的 ...
- attribute和property兼容性分析
上一篇文章中,详细的分析了他们的区别,请看Javascript中的attribute和property分析 这次,来详细的看下他们的兼容性,这些内容主要来自于对于jQuery(1.9.x)源代码的分析 ...
- 有关attribute和property,以及各自对select中option的影响
这个问题老生常谈,但是直到现在我依旧时常会把它搞混.下面列一些各自的特性. attribute property 设置方法 option.setAttribute('selected', true ...
- 详解JS中DOM 元素的 attribute 和 property 属性
一.'表亲戚':attribute和property 为什么称attribute和property为'表亲戚'呢?因为他们既有共同处,也有不同点. attribute 是 dom 元素在文档中作为 h ...
- C#中Attribute和Property
XAML是XML派生而来的语言,所以很多XML中的概念在XAML中是通用的. 为了表示同类标签中的某个标签与众不同,可以给它的特征(Attribute)赋值,为特征值赋值的语法如下: 非空标签:< ...
- javascript中attribute和property的区别详解
DOM元素的attribute和property很容易混倄在一起,分不清楚,两者是不同的东西,但是两者又联系紧密.很多新手朋友,也包括以前的我,经常会搞不清楚. attribute翻译成中文术语为“特 ...
- 前端中的 Attribute & Property
为了在翻译上显示出区别,Attribute一般被翻译为特性,Property被译为属性. 在使用上面,Angular已经表明态度 Template binding works with propert ...
- javascript DOM 操作 attribute 和 property 的区别
javascript DOM 操作 attribute 和 property 的区别 在做 URLRedirector 扩展时,注意到在使用 jquery 操作 checkbox 是否勾选时,用 at ...
- JavaScript的attribute和property辨析
1.Attribute Attribute是HTML上设置的属性,在html中显式地设置,或者通过setAttribute()方法设置. <input type='text' id='txt' ...
随机推荐
- EOJ 3246 实验室传染病
线段树,暴力. 先处理出每个点直接能感染到的最左边的和最右边的. 之后每次扩展,看向左能到达的那些点中,最左以及最右能到哪些点,更新. 看向右能到达的那些点中,最左以及最右能到哪些点,更新. 最左最右 ...
- Django框架之【自定义模板过滤器与标签】
本文在我的微信公众号的链接:https://mp.weixin.qq.com/s?__biz=MzU5NTU5MjcwNw==&mid=2247483674&idx=1&sn= ...
- bazel使用汇总
最近重构代码之后,打算在本地用bazel来作项目构建.主要是因为brpc已经支持了bazel,所以在此之前料想会简单许多. 安装比较简单,centos直接用yum就行.按照这个指示: https:// ...
- File Associations
- codevs1081 线段树练习 2<区间修改>
1081 线段树练习 2 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 大师 Master 题目描述 Description 给你N个数,有两种操作 1:给区间[a,b]的所有 ...
- BSGS算法+逆元 POJ 2417 Discrete Logging
POJ 2417 Discrete Logging Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 4860 Accept ...
- MySQL -- 性能优化的最佳20+条经验
FROM:http://www.cnblogs.com/shlhm/p/3235848.html ,学习学习~ 今天,数据库的操作越来越成为整个应用的性能瓶颈了,这点对于Web应用尤其明显.关于数据库 ...
- [转] 关于Struts-JSON配置(详解带实例struts2的json数据支持)
关于Struts-JSON的提高开发效率 一.JSON是什么? :JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写,同时也易于机器解 析和 ...
- Codeforces Beta Round #10 A. Power Consumption Calculation 水题
A. Power Consumption Calculation 题目连接: http://www.codeforces.com/contest/10/problem/A Description To ...
- Android TextView 显示HTML加图片
TextView显示网络图片,我用android2.3的系统,可以显示图片出来,并且如果图片比较大,应用会卡的现象,肯定是因为使用主线程去获取网络图片造成的,但如果我用android4.0以上的系统运 ...