博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
javascript中的prop和attr方法的区别
阅读量:6533 次
发布时间:2019-06-24

本文共 930 字,大约阅读时间需要 3 分钟。

hot3.png

       对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。

例:

百度

        这个例子里<a>元素的DOM属性有“href、target和class",这些属性就是<a>元素本身就带有的属性,也是W3C标准里就包含有这几个属性,或者说在IDE里能够智能提示出的属性,这些就叫做固有属性。处理这些属性时,建议使用prop方法。

删除

        这个例子里<a>元素的DOM属性有“href、id和action”,很明显,前两个是固有属性,而后面一个“action”属性是我们自己自定义上去的,<a>元素本身是没有这个属性的。这种就是自定义的DOM属性。处理这些属性时,建议使用attr方法。使用prop方法取值和设置属性值时,都会返回undefined值。 像checkbox,radio和select这样的元素,选中属性对应“checked”和“selected”,这些也属于固有属性,因此需要使用prop方法去操作才能获得正确的结果。

源码解释:

                 attr方法里面,最关键的两行代码,elem.setAttribute( name, value + “” )和ret = elem.getAttribute( name ),很明显的看出来,使用的DOM的API setAttribute和getAttribute方法操作的属性元素节点。而prop方法里面,最关键的两行代码,return ( elem[ name ] = value )和return elem[ name ],你可以理解成这样document.getElementById(el)[name] = value,这是转化成JS对象的一个属性。

使用提醒:

                    在遇到要获取或设置checked,selected,readonly和disabled等属性时,用prop方法显然更好如果你有JS性能洁癖的话,显然prop的性能更高,因为attr需要访问DOM属性节点,访问DOM是最耗时的

转载于:https://my.oschina.net/u/563488/blog/606877

你可能感兴趣的文章
Minix中的字符判定ctype.c
查看>>
91平台iOS接入demo
查看>>
五个优秀的硬盘检测工具
查看>>
用js实现table内容从下到上连续滚动
查看>>
基于ffmpeg的流媒体服务器
查看>>
项目积累——Blockingqueue,ConcurrentLinkedQueue,Executors
查看>>
JVM学习笔记(一)------基本结构
查看>>
活动目录之备份与恢复
查看>>
删除 Eclipse 的 configuration 目录
查看>>
MOXA的智能通信产品也大力支持WinCE.net了
查看>>
ActiveX开发知多少?
查看>>
你不得不知道的Visual Studio 2012(3)- 创建Windows应用程序
查看>>
Android操作系统2.0制作备份
查看>>
To XSS or not ? 杂谈
查看>>
TFTP服务器在Cisco设备上的应用(上传、下载IOS)
查看>>
获得文件和文件夹的所有权
查看>>
烂泥:学习mysql数据库主从同步复制原理
查看>>
Java相对路径读取文件
查看>>
PostgreSQL 商用版本EPAS(阿里云ppas) 自动(postgresql.conf)参数计算与适配功能
查看>>
烂泥:学习ssh之ssh隧道应用
查看>>