这个问题老生常谈,但是直到现在我依旧时常会把它搞混。下面列一些各自的特性。

  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的影响的更多相关文章

  1. 下拉框select中option居中样式

    下拉框select中option居中样式 text-align:center;text-align-last:center;

  2. select中option的onclick事件失效

    html: <select id="pageSelect"> <option value="1" selected onclick=" ...

  3. js html标签select 中option 删除除了第一行外的其他行

    背景:共两个下拉框,第一个下拉框选择完之后,以第一个选定的值为条件返回第二个下拉框中的内容,用js中的createElement()创建,并利用appendChild()来添加进父标签.出现意外:每次 ...

  4. js添加select中option

    1.js代码 $("#year").append("<option value="+value的值+">"+内容+"& ...

  5. js 获取select 中option 的个数

    //document.writeln(document.getElementById("sel").options.length); //document.writeln(docu ...

  6. attribute和property兼容性分析

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

  7. 作为 attribute 和 property 的 value 及 Vue.js 的相关处理

    attribute 和 property 是 Web 开发中,比较容易混淆的概念,而对于 value,因其特殊性,更易困惑,本文尝试做一下梳理和例证 attribute 和 property 的概念 ...

  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. [WPF]ComboBox.Items为空时,点击不显示下拉列表

    ComboBox.Items为空时,点击后会显示空下拉列表: ComboBox点击显示下拉列表,大概原理为: ComboBox存在ToggleButton控件,默认ToggleButton.IsChe ...

  2. javaweb project create

    软件分享 myeclipse 10 链接:http://pan.baidu.com/s/1i3tUFpb 密码:qnyo 新建一个web project 找到web.xml 修改这里的index.ph ...

  3. js中Json 对象,Json字符串转换

    //tmppcd  是一个对象 //JSON.stringify()   是把对象转换成json 字符串

  4. 解决因为使用了官方xbean-2.4.0.jar 的库造成的性能问题

    最近我们游戏经常收到玩家投诉卡进度条的问题.而且后台显示执行队列和CPU使用率异常高 根据调用的JDB分析出 使用xbean 时候会调用以下代码 在设置xmlobject 时候会有一个 GlobalL ...

  5. Web自动化测试学习方向(Selenium)

    目前越来越多的人想学自动化测试,认为自动化测试好牛逼.经常在测试交流群里看见有HR发招聘广告说:招初级(功能测试),招中级(性能测试),招高级(自动化测试)...... 我不去讨论他们这个初中高级的说 ...

  6. iOS---自动布局

    自动布局的发展 1.frame:通过代码计算 frame iPhone3GS \ iPhone4 \ iPhone4S 屏幕的物理尺寸是一样的(无需屏幕适配), 而且一个当时的应用要么是横屏要么是竖屏 ...

  7. Berkeley DB的数据存储结构——哈希表(Hash Table)、B树(BTree)、队列(Queue)、记录号(Recno)

    Berkeley DB的数据存储结构 BDB支持四种数据存储结构及相应算法,官方称为访问方法(Access Method),分别是哈希表(Hash Table).B树(BTree).队列(Queue) ...

  8. Eclipse快捷键汇总

    [ALT+/] 此快捷键为用户编辑的好帮手,能为用户提供内容的辅助,不要为记不全方法和属性名称犯愁,当记不全类.方法和属性的名字时,多体验一下[ALT+/]快捷键带来的好处吧. 2 [Ctrl+O] ...

  9. css个人随笔,适合新手总结整理

    CSS的3种引用方式:1.外部样式表 都是在head标签内使用Link标签来引用的.2.内部样式表 <style type="text/css"> </style ...

  10. android开发中的问题集锦(慢慢搬运...)

    1, android 设置ExpandableListView 系统默认箭头到右边 if(android.os.Build.VERSION.SDK_INT < android.os.Build. ...