有关attribute和property,以及各自对select中option的影响
这个问题老生常谈,但是直到现在我依旧时常会把它搞混。下面列一些各自的特性。
attribute | property | |
设置方法 |
option.setAttribute('selected', true) option.getAttribute('selected') |
option.selected = true |
dom节点表现 |
会表现在html节点上。打开控制台,可以看到 <option selected=true></option> |
不会表现在html中。打开控制台,孤零零的 :<option></option> |
数据类型 |
当你把一个对象传给attribute时,它会转为string类型, 根据dom节点表现特点,很好理解,html代码就是字符串不可能有什么数据类型。 比如: option.setAttribute('test', {}) option.getAttribute('test') 你将得到"[object object]",它自动调用了Object.toString方法 |
而当你把一个对象传给property时,你可以保留这个对象。 比如: option.test = {}; 这就是代码层级的东西,跟html一点关系都没有 |
由上面我们可以看到:
attribute总是试图与html代码串产生关联,对attribute的操作会直接反映在页面html代码中。attribute的这个特性可以让我们在js代码执行前就定义好某些变量,然后在js执行时获取它们,虽然这些变量都是字符串类型,但是提前定义变量可以让我们实现很多事,它被广泛的应用在smarty模板中。
如果要在js执行过程中保存变量到某dom节点,不妨使用property,它可以把变量类型完美的保存下来,因此可以把dom节点上内置实现的函数浅显的理解为property。
下面以select,option为栗子,谈一下浏览器执行时,这两个东西的表现。
<select>
<option id="one" value="1">北京</option>
<option id="two"value="2">上海</option>
</select>
代码 | property | attribute | 选中状况 |
one: true two: falss |
one: null two: null |
默认状态,one选中 |
|
设置two的attribuite,让它选中 two.setAttrbute('selected', true) |
one: false
two: true |
one: null
two: true |
two选中 虽然我们设置的是attribuite,但是property发生了变化。 这里one.selected自动变为false。two.selected自动变为true |
然后我们设置one的attrbute,让它选中 one.setAttribute('selected', true) |
one: true
two: false |
one: true two: true |
one选中 设置one的attribute后,property同上一次一样,自动做出了相应的变化, 但是attribute严格按照我们的代码,保留了我们设置的属性,所以出现了两个attribute都是true的情况。 |
然后我们再次设置two的attribuite,让它选中 two.setAttrbute('selected', true) |
one: false
two: true |
one: true two: true |
two选中 我们可以看到,attibuite没有变化 |
property,更像是浏览器的当前状态的一个反应,不只代码影响它,用户的交互也可以影响它。而attibute仅仅依赖代码的执行,仅仅你的代码可以改变它。
而对于浏览器控件来说,会有一些特殊的属性来决定它的表现与动作,如value,selected等。实质上起作用的是property的值。但是当我们设置attribute时,也会自动触发propery的改变(从上表格可以看出,不管attribute值变化与否,只要赋值就会引发propery的变化),从而达到控制控件动作样式的目的。相对的,我们设置propery时,不会改变attribute,只能控制控件的动作样式。最近我在工作重发现,设置disabled的prop值时,attr也会受影响。button.disabled=true,反映在html中的状态是<button disabled></button>,再执行button.disabled=false,html恢复原样<button disabled></button>。
有关attribute和property,以及各自对select中option的影响的更多相关文章
- 下拉框select中option居中样式
下拉框select中option居中样式 text-align:center;text-align-last:center;
- select中option的onclick事件失效
html: <select id="pageSelect"> <option value="1" selected onclick=" ...
- js html标签select 中option 删除除了第一行外的其他行
背景:共两个下拉框,第一个下拉框选择完之后,以第一个选定的值为条件返回第二个下拉框中的内容,用js中的createElement()创建,并利用appendChild()来添加进父标签.出现意外:每次 ...
- js添加select中option
1.js代码 $("#year").append("<option value="+value的值+">"+内容+"& ...
- js 获取select 中option 的个数
//document.writeln(document.getElementById("sel").options.length); //document.writeln(docu ...
- attribute和property兼容性分析
上一篇文章中,详细的分析了他们的区别,请看Javascript中的attribute和property分析 这次,来详细的看下他们的兼容性,这些内容主要来自于对于jQuery(1.9.x)源代码的分析 ...
- 作为 attribute 和 property 的 value 及 Vue.js 的相关处理
attribute 和 property 是 Web 开发中,比较容易混淆的概念,而对于 value,因其特殊性,更易困惑,本文尝试做一下梳理和例证 attribute 和 property 的概念 ...
- 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' ...
随机推荐
- [WPF]ComboBox.Items为空时,点击不显示下拉列表
ComboBox.Items为空时,点击后会显示空下拉列表: ComboBox点击显示下拉列表,大概原理为: ComboBox存在ToggleButton控件,默认ToggleButton.IsChe ...
- javaweb project create
软件分享 myeclipse 10 链接:http://pan.baidu.com/s/1i3tUFpb 密码:qnyo 新建一个web project 找到web.xml 修改这里的index.ph ...
- js中Json 对象,Json字符串转换
//tmppcd 是一个对象 //JSON.stringify() 是把对象转换成json 字符串
- 解决因为使用了官方xbean-2.4.0.jar 的库造成的性能问题
最近我们游戏经常收到玩家投诉卡进度条的问题.而且后台显示执行队列和CPU使用率异常高 根据调用的JDB分析出 使用xbean 时候会调用以下代码 在设置xmlobject 时候会有一个 GlobalL ...
- Web自动化测试学习方向(Selenium)
目前越来越多的人想学自动化测试,认为自动化测试好牛逼.经常在测试交流群里看见有HR发招聘广告说:招初级(功能测试),招中级(性能测试),招高级(自动化测试)...... 我不去讨论他们这个初中高级的说 ...
- iOS---自动布局
自动布局的发展 1.frame:通过代码计算 frame iPhone3GS \ iPhone4 \ iPhone4S 屏幕的物理尺寸是一样的(无需屏幕适配), 而且一个当时的应用要么是横屏要么是竖屏 ...
- Berkeley DB的数据存储结构——哈希表(Hash Table)、B树(BTree)、队列(Queue)、记录号(Recno)
Berkeley DB的数据存储结构 BDB支持四种数据存储结构及相应算法,官方称为访问方法(Access Method),分别是哈希表(Hash Table).B树(BTree).队列(Queue) ...
- Eclipse快捷键汇总
[ALT+/] 此快捷键为用户编辑的好帮手,能为用户提供内容的辅助,不要为记不全方法和属性名称犯愁,当记不全类.方法和属性的名字时,多体验一下[ALT+/]快捷键带来的好处吧. 2 [Ctrl+O] ...
- css个人随笔,适合新手总结整理
CSS的3种引用方式:1.外部样式表 都是在head标签内使用Link标签来引用的.2.内部样式表 <style type="text/css"> </style ...
- android开发中的问题集锦(慢慢搬运...)
1, android 设置ExpandableListView 系统默认箭头到右边 if(android.os.Build.VERSION.SDK_INT < android.os.Build. ...