attribute与property

Posted 2023-04-24

参考技术A

html 中的 node 有一个方法：cloneNode()，这个方法用来复制一个节点。不过它还有一个值得注意的地方。

WTF，attribute 和 property 不是同一个东西吗？

你看，设置了 property，获取 attribute 是同一个东西吧。

不过，它们确实不是能够等同而视的东西，事实上，它们之间的差别还挺大的。

在最为根本的地方（语义上）可以似乎可以揣摩出一些这两者的差异：attribute 写在标签上的，主要用来表示节点的特征的属性。
而 property 是从 dom 对象角度考虑。

另外，每一个 attribute(key + value) 本身也是一个节点 (attr node)。

它们是同等级别的东西 ……

每种类型的 tag 都有自己的默认预设的 attribute，像 img 标签的 src, script 标签的 async。

除此之外，我们还可以自定义一些 attribute

在 HTML 中，每一个 node，都有一个 attributes 属性，它的值是一个 NamedNodeMap ，存有当前 node 的所有 attributes。
NamedNodeMap 提供了一些操作 attribute 的方法：
getNamedItem(name) : 获取 nodeName 为 name 的 node (这里的 node 就是指 attr node)
item(pos) : 同上，不过这个还可以用来设置值
removeNamedItem(name) : 删除
setNamedItem(attrNode) : 存一个 node ，注意，依然是 attr node

attributes 属性的主要用途是遍历一个 element 的 attributes

事实上，所有的默认的 attributes 也会作为 DOM 的 property，只不过，有一点需要注意，不同类型的tag，有自己专属的 attribute，只有专属的 attribute 才能够在 property 中直接获取。比如：

自定义的 attributes 也无法通过 property 获取，自然也无法通过 property 修改自定义的 attribute.

1.class, 获取时用到的关键字不一样，通过 attribute 的方式获取是 dom.getAttribute("class") ; 而通过 property 的方式获取是 dom.className

1.style : getAttribute 得到 CSS text ; dom.style 是一个对象；

2.onclick 之类的事件 : getAttribute 得到的是字符串 "fn()" ; dom.onclick 是 function

3.对于那些对于值有所限制 (比如 src, disabled, multiple)、或功能性（比如 value）的 attributes，这种限制或功能更多是体现在 property 上：

attributes 与 property 很不一样 ……

那么，在深拷贝一个 dom 的时候，如何把某个数据也复制过去呢？

1.写在 dom 元素上
2.使用 setAttribute

参考文献：

1.《javascript高级程序设计》第三版

2. stackoverflow 上有个值得参考的理解

jquery attribute vs property 的区别

bug收集：专门解决与收集bug的网站

网址：www.bugshouji.com

0 1

attribute vs property 的区别

property 是 DOM 中的属性，是 JavaScript 里的对象；

attribute 是 HTML 标签上的特性，它的值只能够是字符串

jquery 中操作使用 prop 方法，操作 property 属性

$uid.prop("checked")

$uid.prop("checked",checked)

jquery 中使用 attr 方法，操作 attribute

$uid.attr("checked")

$uid.attr("checked",checked)

注：jquery 的版本问题

在jQuery 1.6之前，只有attr()函数可用，该函数不仅承担了attribute的设置和获取工作，还同时承担了property的设置和获取工作。例如：在jQuery 1.6之前，attr()也可以设置或获取tagName、className、nodeName、nodeType等DOM元素的property。 

直到jQuery 1.6新增prop()函数，并用来承担property的设置或获取工作之后，attr()才只用来负责attribute的设置和获取工作。 

jQuery认为：attribute的checked、selected、disabled就是表示该属性初始状态的值，property的checked、selected、disabled才表示该属性实时状态的值(值为true或false)。  

因此，在jQuery 1.6及以后版本中，请使用prop()函数来设置或获取checked、selected、disabled等属性。对于其它能够用prop()实现的操作，也尽量使用prop()函数。  

02

checked属性 到底是 attribute 还是 property  ？

0 3

checked 值改变了，但是没有触发change事件

使用了jquery 的 prop 方法， 改变了 checked 的值，选中状态也发生了改变，但是对应的 change 事件没有触发

注：需要手动去调用 change() 方法 , 此方法只有 jquery 对象有

代码如下：

$("#checkAll").click(function () { var checked = $(this).prop('checked'); var checkArr = $("#tbProduct input[type='checkbox']"); for(var i=0;i<checkArr.length;i++){            var nowCheck = $(checkArr[i]).prop('checked'); if(nowCheck!=checked){                $(checkArr[i]).prop('checked',checked);                $(checkArr[i]).change(); } } })

如果喜欢这篇文章，可以支持一下哟， 分享、点赞、在看 走一个，哈哈@_@

更多文章，请关注公众号【bug收集】