JS中DOM元素的attribute与property属性示例详解


Posted in Javascript onSeptember 04, 2018

一、'表亲戚':attribute和property

为什么称attribute和property为'表亲戚'呢?因为他们既有共同处,也有不同点.

attribute 是 dom 元素在文档中作为 html 标签拥有的属性;

property 是 dom 元素在 js 中作为对象拥有的属性。

从定义上可以看出:

  • 对于 html 的标准属性来说,attribute 和 property 是同步的,是会自动更新的
  • 但是对于自定义的属性来说,他们是不同步的.(自定义属性不会自动添加到property)
  • property 的值可以改变;attribute 的值不能改变

二、 两者输出形式

1、分别打印两个值

打印attribute属性

//html
<div class="divClass" id="divId" ></div>

//js
window.onload = function(){
 var divId = document.getElementById('divId');
 console.log(divId.attributes);
}

JS中DOM元素的attribute与property属性示例详解

可以看见attributes对应的值,我们打印一下:

console.log(divId.attributes[0]); //打印 class="divClass"
console.log(divId.attributes.class) //打印 class="divClass"

console.log(divId.getAttribute('class')) //打印divClass
console.log(divId.getAttribute('id')) //打印divId

发现上面两组值是相等的.

虽然都可以取值,但《js高级程序设计》中提到,为了方便操作,建议大家用setAttribute()和getAttribute()来操作即可。

打印property

html自带的dom属性会自动转换成property,但是自定义的属性没有这个'权利'

直接把div标签当作对象,用'.'输出即是property属性

但是注意!property是不能输出自定义属性的

<div class="divClass" id="divId" addUserDefine="zidingyi"></div>

console.log(divId.class);  //打印 divClass
console.log(divId.addUserDefine) //打印 undefined

JS中DOM元素的attribute与property属性示例详解

打开Elements的properties可以看到,dom存在的属性,property同样继承了,而addUserDefine却没有出现在property中

property:

var obj = {};
Object.defineProperty(obj,'name',{
 value:'Property'
})

console.log(obj.name) //打印 Property

三、用例子解析两者赋值

如果我们修改了property的值

//html
<input value="initValue" id="ipt"/>

//js
window.onload = function(){
 var ipt = document.getElementById('ipt');

 ipt.value = 'changeValue'
 console.log(ipt.value);
 console.log(ipt.getAttribute('value'));
}

猜一下结果??

答案是:

console.log(ipt.value);   //changeValue
console.log(ipt.getAttribute('value'));  //initValue

我们再来看看input的值

JS中DOM元素的attribute与property属性示例详解

难以置信?

我们再来看看从修改attribute入手

//html
<input value="initValue" id="ipt"/>

//js
window.onload = function(){
 var ipt = document.getElementById('ipt');

 ipt.setAttribute('value','changeValue')
 console.log(ipt.value);
 console.log(ipt.getAttribute('value'));

}

输出:

console.log(ipt.value);   //changeValue
console.log(ipt.getAttribute('value'));  //changeValue

总结如下:

  • property比attribute'霸道',估计是'表哥'
  • property和attribute两者是属于单方面通信,即:

1.property能够从attribute中得到同步;

2.attribute不会同步property上的值;

再??乱痪?

对属性Property可以赋任何类型的值,而对特性Attribute只能赋值字符串!

//js
var obj = {
 value : false,
}

var ipt = document.getElementById('ipt');

obj.value = true;  //property更改
ipt.setAttribute('value',true) //attribute更改

console.log(typeof obj.value); //boolean
console.log(obj.value)   //true

console.log(typeof ipt.value) //string
console.log(ipt.value);   //true

小结

分析了这么多,对property和attribute的区别理解也更深了,在这里总结一下:

创建

  • DOM对象初始化时会在创建默认的基本property;
  • 只有在HTML标签中定义的attribute才会被保存在property的attributes属性中;
  • attribute会初始化property中的同名属性,但自定义的attribute不会出现在property中;
  • attribute的值都是字符串;

数据绑定

  • attributes的数据会同步到property上,然而property的更改不会改变attribute;
  • 对于value,class这样的属性/特性,数据绑定的方向是单向的,attribute->property;
  • 对于id而言,数据绑定是双向的,attribute<=>property;
  • 对于disabled而言,property上的disabled为false时,attribute上的disabled必定会并存在,此时数据绑定可以认为是双向的;

使用

  • 可以使用DOM的setAttribute方法来同时更改attribute;
  • 直接访问attributes上的值会得到一个Attr对象,而通过getAttribute方法访问则会直接得到attribute的值;
  • 大多数情况(除非有浏览器兼容性问题),jQuery.attr是通过setAttribute实现,而jQuery.prop则会直接访问DOM对象的property;

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
node.js中的fs.rename方法使用说明
Dec 16 Javascript
javascript面向对象之访问对象属性的两种方式分析
Jan 13 Javascript
jQuery实现简单二级下拉菜单
Apr 12 Javascript
jquery使用each方法遍历json格式数据实例
May 18 Javascript
浅谈JavaScript字符串与数组
Jun 03 Javascript
jQuery实现延迟跳转的方法
Jun 05 Javascript
详解JavaScript操作HTML DOM的基本方式
Oct 21 Javascript
原生js实现焦点轮播图效果
Jan 12 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
vue与bootstrap实现时间选择器的示例代码
Aug 26 Javascript
jquery获取元素到屏幕四周可视距离的方法
Sep 05 jQuery
详解vuex数据传输的两种方式及this.$store undefined的解决办法
Aug 26 Javascript
JavaScript使用indexOf()实现数组去重的方法分析
Sep 04 #Javascript
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
Sep 04 #Javascript
原生JS实现获取及修改CSS样式的方法
Sep 04 #Javascript
微信小程序canvas拖拽、截图组件功能
Sep 04 #Javascript
mpvue写一个CPASS小程序的示例
Sep 04 #Javascript
Vue表单及表单绑定方法
Sep 04 #Javascript
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
Sep 04 #Javascript
You might like
PHP3 safe_mode 失效漏洞
2006/10/09 PHP
php下用cookie统计用户访问网页次数的代码
2010/05/09 PHP
美图秀秀web开放平台--PHP流式上传和表单上传示例分享
2014/06/22 PHP
XAMPP升级PHP版本实现步骤解析
2020/09/04 PHP
JavaScript 节点操作 以及DOMDocument属性和方法
2007/12/06 Javascript
传递参数的标准方法(jQuery.ajax)
2008/11/19 Javascript
JavaScript 异步方法队列链实现代码分析
2010/06/05 Javascript
javascript通过class来获取元素实现代码
2013/02/20 Javascript
JavaScript获取和设置CheckBox状态的简单方法
2013/07/05 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
2013/07/05 Javascript
jquery复选框全选/取消示例
2013/12/30 Javascript
js/jQuery简单实现选项卡功能
2014/01/02 Javascript
jQuery实现统计复选框选中数量
2014/11/24 Javascript
充分发挥Node.js程序性能的一些方法介绍
2015/06/23 Javascript
Bootstrap选项卡与Masonry插件的完美结合
2016/07/06 Javascript
AngularJs concepts详解及示例代码
2016/09/01 Javascript
jQuery属性选择器用法示例
2016/09/09 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
2017/11/20 Javascript
基于javascript 显式转换与隐式转换(详解)
2017/12/15 Javascript
解决vue build打包之后首页白屏的问题
2018/03/06 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
2019/02/02 Javascript
原生JS 实现的input输入时表格过滤操作示例
2019/08/03 Javascript
js实现小星星游戏
2020/03/23 Javascript
修改 CentOS 6.x 上默认Python的方法
2019/09/06 Python
JupyterNotebook 输出窗口的显示效果调整方法
2020/04/13 Python
Python 如何创建一个线程池
2020/07/28 Python
使用python-cv2实现视频的分解与合成的示例代码
2020/10/26 Python
会计专业毕业生自荐信范文
2013/12/20 职场文书
幼儿园教师奖惩制度
2014/02/01 职场文书
酒店总经理助理职责
2014/02/12 职场文书
2014年计划生育工作总结
2014/11/14 职场文书
2015年小学语文教师工作总结
2015/10/23 职场文书
严以修身专题学习研讨会发言材料
2015/11/09 职场文书
详解NodeJS模块化
2021/06/15 NodeJs
国际最新研究在陨石中发现DNA主要成分 或由陨石带来地球
2022/04/29 数码科技
vue实现input输入模糊查询的三种方式
2022/08/14 Vue.js