jQuery: attr() vs prop()

不巧面试被问到了attr()和prop()的区别,稍加学习记录如下:

1. attribute和property

attribute

一个网页就是一棵DOM树,DOM树由节点构成,节点分为三种:元素节点、文本节点、属性节点。所有的属性节点构成了一个属性的数组,我们以如下

HTML代码为例:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>attr() vs prop()</title>
</head>
<body>
    <input type="text" value="Name:">
    <input type="checkbox" checked="false">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</body>
</html>

我们在浏览器窗口的console中输出:

var inputs = document.getElementsByTagName('input')var input = inputs[0];
input.attributes

得到的结果是:

NamedNodeMap {0: type, 1: value, length: 2, getNamedItem: function, setNamedItem: function, removeNamedItem: function, item: function…}

可以看到,这个节点对象里面有很多的属性,我们只设置了两个,其他的是继承自原型链上的。

property

所有节点都是对象,对象上的属性叫做property,我们可以简单通过遍历这个对象来查看他的properties,如下为在浏览器中执行的例子:

var input = inputs[0];for(var key in input) {console.log(key);}

如下为输出的结果:

VM445:2 webkitEntries
VM445:2 incremental
VM445:2 webkitdirectory
VM445:2 selectionDirection
VM445:2 selectionEnd
VM445:2 selectionStart
VM445:2 labels
VM445:2 validationMessage
...

因为property输出太多了所以没有全部列出,但自己执行后仔细查找会发现,type和value两个属性也存在于properties中。

2. property和attribute使用上有什么区别?

通过上节我们看到prop来自节点对象自带的,它包含了很多property;而attr来自对象的attributes,是我们在元素节点上添加属性节点才会有的。

对于上例的文本框,我们可以通过property方式像这样input.value或者 attribute方式像这样 input.getAttribute( "value" ) 来获得值,并且得到的结果都是 "Name:"。

当我们在页面中编辑文本框的值,再次在console中获取的时候发现input.value的值是更新后的值,而input.getAttribute的值仍旧是旧的。

因此差别就是: property记录的值会按照用户操作实时更新,而attribute记录的都是初始值。

3. prop()和attr()的区别?

根据 W3C forms specification, checked 属性是一个 boolean attribute, 因此checked property只能是true或者false(当勾选为true,未勾选或者未设置为false):

  • elem.checked // true (Boolean) 会随着勾选状态而改变

jQuery的prop()方法是和上面直接取property一样 ,因此:

  • $( elem ).prop( "checked” ) //true (Boolean) 会随着勾选状态而改变

而拿attribute拿到的只是初始的值:

  • elem.getAttribute( "checked" ) // "checked" (String) 记录初始状态, 值为"checked"或者任意你设置的值,不会随着勾选状态而改变

jQuery的attr()方法获的的结果也跟getAttribute是一致的:

  • $(‘input[type=“checkbox”’).attr( ‘checked’ ) // 同上一条

至于说jQuery的历史版本中,attr()的实现曾经会跟getAttribute不一致,比如返回结果是会随着勾选状态变化的字符串,或者返回结果是Boolean类型的值,知道即可因为现在的用法是一致的了~

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2015-12-13

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏听雨堂

同步等待方法

function waitVar(key,varb, fun) { //等待指定变量,返回:-1:无数据,继续等待 -2:超时 1:成功。fun不支持...

2288
来自专栏Nian糕的私人厨房

jQuery ele.find() is not a function 错误的解决办法

这又是在项目过程中所遇到的一个问题,ele.find() is not a function,其中 HTML 代码如下所示:

895
来自专栏Coding迪斯尼

Reactjs开发自制编程语言Monkey的编译器:高能技术干货之语法高亮1

823
来自专栏九彩拼盘的叨叨叨

CSS拓展语言:Sass介绍

CSS拓展语言出现的原因是,CSS自身支持的功能能有限(如不支持变量,条件控制,循环等编程元素),并不满足我们想要的一些功能。而CSS拓展语言支持CSS不支持的...

642
来自专栏技术博客

Knockout.Js官网学习(event绑定、submit绑定)

event绑定在DOM元素上添加指定的事件句柄以便元素被触发的时候执行定义的JavaScript 函数。大部分情况下是用在keypress,mouseover和...

531
来自专栏从零开始的linux

shell变量

bash的重要特性:变量 bash变量类别: 本地变量:只对当前shell进程有效的变量;对其它shell进程无效,包当...

3116
来自专栏web前端教室

[视频直播]本周日先行者视频“React多级菜单

第一个知识点,就是递归。 递归往简单了说,就是函数不断调用自身,同时设定一个退出条件,达成条件就结束调用自身,否则就成无限递归了。 看一小段JSON: { ...

1839
来自专栏阮一峰的网络日志

Node 定时器详解

JavaScript 是单线程运行,异步操作特别重要。 只要用到引擎之外的功能,就需要跟外部交互,从而形成异步操作。由于异步操作实在太多,JavaScript ...

3315
来自专栏SHERlocked93的前端小站

JS throttle与debounce的区别

一般在项目中我们会对input、scroll、resize等事件进行节流控制,防止事件过多触发,减少资源消耗;在vue的官网的例子中就有关于lodash的deb...

893
来自专栏Java技术栈

Java:关于main方法的10道面试题

大年初三好,春节第三天了。感觉假期过得好快,东西也丢得快。 假期吃喝玩乐之余也来温故一下Java知识,下面给大家整理了10道Java main方法的经典面试题,...

33911

扫码关注云+社区