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 相关文章推荐
nullJavascript中创建对象的五种方法实例
May 07 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
Aug 13 Javascript
Javascript弹出窗口的各种方法总结
Nov 11 Javascript
js实现俄罗斯方块小游戏分享
Jan 31 Javascript
用jQuery toggleClass 实现鼠标移上变色
May 14 Javascript
JavaScript学习笔记之JS函数
Jan 22 Javascript
jQuery标签编辑插件Tagit使用指南
Apr 21 Javascript
理解javascript封装
Feb 23 Javascript
bootstrap选项卡扩展功能详解
Jun 14 Javascript
Angular简单验证功能示例
Dec 22 Javascript
Javascript柯里化实现原理及作用解析
Oct 22 Javascript
vue实现Toast组件轻提示
Apr 10 Vue.js
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
使用Limit参数优化MySQL查询的方法
2008/11/12 PHP
PHP 将图片按创建时间进行分类存储的实现代码
2010/01/05 PHP
php中cookie的使用方法
2014/03/29 PHP
phpfpm的作用和用法
2019/10/10 PHP
javascript 拖放效果实现代码
2010/01/22 Javascript
jquery 插件学习(六)
2012/08/06 Javascript
js实现在页面上弹出蒙板技巧简单实用
2013/04/16 Javascript
jquery中插件实现自动添加用户的具体代码
2013/11/15 Javascript
JS动态日期时间的获取方法
2015/09/28 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
2016/03/09 Javascript
20分钟打造属于你的Bootstrap站点
2016/07/27 Javascript
深入浅析JavaScript中的3DES
2016/08/24 Javascript
javascript self对象使用详解
2016/10/18 Javascript
js实现图片左右滚动效果
2017/02/27 Javascript
详解Angular2学习笔记之Html属性绑定
2018/01/03 Javascript
AngularJS select加载数据选中默认值的方法
2018/02/28 Javascript
轻松解决JavaScript定时器越走越快的问题
2019/05/13 Javascript
vue+elementUI动态生成面包屑导航教程
2019/11/04 Javascript
Python编写的com组件发生R6034错误的原因与解决办法
2013/04/01 Python
fastcgi文件读取漏洞之python扫描脚本
2017/04/23 Python
Matplotlib 生成不同大小的subplots实例
2018/05/25 Python
python excel转换csv代码实例
2019/08/26 Python
python根据时间获取周数代码实例
2019/09/30 Python
Ubuntu 20.04安装Pycharm2020.2及锁定到任务栏的问题(小白级操作)
2020/10/29 Python
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
2016/11/16 HTML / CSS
爱尔兰旅游网站:ebookers.ie
2020/01/24 全球购物
上班早退检讨书
2014/01/09 职场文书
消防安全管理制度
2014/02/01 职场文书
《灯光》教学反思
2014/02/08 职场文书
小学语文教学反思
2014/02/10 职场文书
百日安全生产活动总结
2014/07/05 职场文书
公司演讲稿开场白
2014/08/25 职场文书
教师节慰问信
2015/02/15 职场文书
保送生自荐信
2015/03/06 职场文书
党员违纪检讨书
2015/05/05 职场文书
OpenCV-Python实现人脸美白算法的实例
2021/06/11 Python