attribute与property

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

cloneNode 不复制 dom 的 properties(比如事件), 只复制 attributes。

WTF,attribute 和 property 不是同一个东西吗?

let div = document.querySelector("div")
div.id = "abc"
div.getAttribute("id") // → "abc"

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

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

首先

property是 DOM 对象中的属性,这里的 DOM 对象就是我们在 JavaScript 里常常提到的对象;
attribute 是HTML标签上的特性,它的值只能够是字符串;

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

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

元素节点 ELEMENT_NODE 的值是 1
attr节点 ATTRIBUTE_NODE 的值是 2
文本节点 TEXT_NODE 的值是 3

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

attribute

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

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

var value = div.getAttribute("my_special_attribute"); //或者用 setAttribute 也可以
attributes 属性

在 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

不过,一般情况下,我们没必要直接操作 attr node, get Attribute(), setAttribute(), and removeAttribute() 这三个方法已经非常好用了。

attributes 与 property 的区别

attribute 可以通过 property 的形式获取,但是反过来不行

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

console.log(myDiv.src) // undefined console.log(myImg.src) // src="http://abc.com"

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

// 通过 setAttribute 自定义
div.setAttribute("xxx", 1)
div.getAttribute("xxx") 可以获取 // 1
div.xxx 获取不到  // undefined
// 自定义属性写在元素内
123
console.log(div.getAttribute("xxx")) // "hello" console.log(div.xxx) // undefined div.xxx = 11; console.log(div.xxx) // 11 console.log(div.getAttribute("xxx")) // 还是 "hello" //设置 property 只改了 property 的值,attribute 的值还是不变。 //当然,对于那写通过 property 可以获取到的默认的 attributes //(也就是元素默认有的 attributes),设置 property 是可以改变 // attribute 的 div.id = 11; console.log(div.id) // 11 console.log(div.getAttribute("id")) // 11

就算可以通过 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 上:



inputDom.getAttribute("type") // "foo"
inputDom.type // "text"

inputDom.value = 1

inputDom.getAttribute("value") // "defaultValue"
inputDom.value // 1

// 通过 getAttribute 只能得到初始的值,就算我们设置或者手动填入新值,依然不会变。

最后,还有一个差异, attribute 是大小写不敏感(不区分大小写的)的

div.getAttribute("id") === div.getAttributes("ID") //true
div.attributes.id === div.attributes.Id // true

所以

attributes 与 property 很不一样 ……

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

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


参考文献:

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

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

你可能感兴趣的:(attribute与property)