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' ...
随机推荐
- 洛谷P1099 BZOJ1999 树网的核 [搜索,树的直径]
洛谷传送门,BZOJ传送门 树网的核 Description 设T=(V, E, W) 是一个无圈且连通的无向图(也称为无根树),每条边带有正整数的权,我们称T为树网(treenetwork),其中V ...
- XV6操作系统代码阅读心得(二):进程
1. 进程的基本概念 从抽象的意义来说,进程是指一个正在运行的程序的实例,而线程是一个CPU指令执行流的最小单位.进程是操作系统资源分配的最小单位,线程是操作系统中调度的最小单位.从实现的角度上讲,X ...
- 二. 创建Series和DataFrame对象
创建对象 创建Series对象 Series可以通过列表,标量值,字典,ndarray,其他函数来创建 a = pf.Series([1,2,3,4]) # 列表创建 b = pd.Series(25 ...
- FastReport.Net使用:[15]富文本控件使用
富文本(Rich Text)控件用于显示Rtf格式的文本. 认识富文本编辑窗体 1.下图就是富文本的编辑窗体,乍一看就像Word一样,不过功能没有Word强大了.具体功能就不一一介绍了,用个Word的 ...
- 看雪论坛 破解exe 看雪CTF2017第一题分析-『CrackMe』-看雪安全论坛
韩梦飞沙 韩亚飞 313134555@qq.com yue31313 han_meng_fei_sha 逆向 黑客 破解 学习 论坛 『CrackMe』 http://bbs.pediy.co ...
- 【带修改的主席树】BZOJ1901-Dynamic Rankings
稍后整理笔记.这题数据范围好像有点问题? #include<iostream> #include<cstdio> #include<cstring> #includ ...
- Python字典树实现
class Trie: # word_end = -1 def __init__(self): """ Initialize your data structure he ...
- mysql 存储过程案列一个。
-- 设置分隔符 DELIMITER // /*初始化*/ DROP PROCEDURE IF EXISTS useCursor // /*建立 存储过程 create */ CREATE PROCE ...
- uboot启动内核的实现
前面我们分析了uboot 的整个流程,我们知道uboot启动以后所有功能都是通过命令来实现的,启动kernel就是执行了bootcmd里面的命令.命令执行过程在uboot中是非常重要的现在我们就来看u ...
- 每天进步一点点——关于SSD写入放大问题
转载请说明出处:http://blog.csdn.net/cywosp/article/details/29812433 1. 关于SSD的写入放大 之前在SSD(Solid State Dr ...