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 相关文章推荐
Exjs 入门篇
Apr 07 Javascript
网站页面自动跳转实现方法PHP、JSP(下)
Aug 01 Javascript
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
Jan 23 Javascript
jquery ajax 简单范例(界面+后台)
Nov 19 Javascript
js实现简单随机抽奖的方法
Jan 27 Javascript
javascript实现获取字符串hash值
May 10 Javascript
浅析如何利用JavaScript进行语音识别
Oct 27 Javascript
基于Bootstrap table组件实现多层表头的实例代码
Sep 07 Javascript
详解Vue 事件修饰符capture 的使用
Dec 29 Javascript
JavaScript定时器设置、使用与倒计时案例详解
Jul 08 Javascript
微信小程序实现签字功能
Dec 23 Javascript
小程序自定义弹框效果
Nov 16 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
PHP在XP下IIS和Apache2服务器上的安装
2006/09/05 PHP
不错的PHP学习之php4与php5之间会穿梭一点点感悟
2007/05/03 PHP
PHP最常用的ini函数分析 针对PHP.ini配置文件
2010/04/22 PHP
使用PHP实现Mysql读写分离
2013/06/28 PHP
php求正负数数组中连续元素最大值示例
2014/04/11 PHP
PHP时间类完整实例(非常实用)
2015/12/25 PHP
php中array_slice和array_splice函数解析
2016/10/18 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
PHP实现一个轻量级容器的方法
2019/01/28 PHP
PHP+Ajax实现的检测用户名功能简单示例
2019/02/12 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
用window.onerror捕获并上报Js错误的方法
2016/01/27 Javascript
js实现可控制左右方向的无缝滚动效果
2016/05/29 Javascript
JS实现刷新父页面不弹出提示框的方法
2016/06/22 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
2017/02/05 Javascript
mui 打开新窗口的方式总结及注意事项
2017/08/20 Javascript
JavaScript实现背景自动切换小案例
2019/09/27 Javascript
jQuery实现的移动端图片缩放功能组件示例
2020/05/01 jQuery
python切换hosts文件代码示例
2013/12/31 Python
python检测远程服务器tcp端口的方法
2015/03/14 Python
使用Python脚本来控制Windows Azure的简单教程
2015/04/16 Python
Python爬虫番外篇之Cookie和Session详解
2017/12/27 Python
django启动uwsgi报错的解决方法
2018/04/08 Python
使用python serial 获取所有的串口名称的实例
2019/07/02 Python
使用python实现时间序列白噪声检验方式
2020/06/03 Python
Python如何实现感知器的逻辑电路
2020/12/25 Python
关于PySnooper 永远不要使用print进行调试的问题
2021/03/04 Python
化学相关工作求职信
2013/10/02 职场文书
学生就业推荐信
2013/11/13 职场文书
后勤岗位职责
2013/11/26 职场文书
电子商务专业学生的自我鉴定
2013/11/28 职场文书
火灾现场处置方案
2014/05/28 职场文书
2014年关工委工作总结
2014/11/17 职场文书
撤诉申请书法院范本
2015/05/18 职场文书
追讨欠款律师函
2015/05/27 职场文书
《群青的幻想曲》京力秋树角色PV公开
2022/04/08 日漫