Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

对属性节点的基本操作

  一直对 DOM 操作算是比较熟悉的我,最近需要用到一些对属性节点操作却得去翻文档。也许对元素的增删改查大家都很熟悉,但是元素只是 nodeType 为 1 的节点而已。对属性节点的操作同样属于 DOM 操作,如果不熟悉怎么敢自称属性 DOM 操作呢?反正我已经自打脸了。
  创建元素我们可以 document.createElement,那么创建属性节点呢?同样可以 create:
document.createAttribute('attributeName');   对元素插入子元素可以使用 appendChild/insertBefore,那么属性节点呢?属性节点和一般的元素有点不同,因为元素不能有多个同名的属性,所以他不是「插入」的概念,而是「放入」的概念。下面这坨代码就是创建一个名为 hehe 的属性节点,并设置其值为 123,然后放到一个 DIV 上。
<script> var a = document.createAttribute('hehe'); a.value = '123'; var div = document.createElement('div'); div.setAttributeNode(a); alert(div.outerHTML); </script>   这个代码等价于:
<script> var div = document.createElement('div'); div.setAttribute('hehe', '123'); alert(div.outerHTML); </script>   同样的,我们可以猜到与 removeChild 对应的删除操作应该是 removeAttributeNode。与元素操作不同的是,如果一个元素已经存在于文档中,它被重新插入到别的地方实际山是被移动过去。而属性节点被设置到别的地方会直接报错:
<script> var div1 = document.createElement('div'); div1.setAttribute('a', '1'); var a = div1.attributes[0]; var div2 = document.createElement('div'); div2.setAttributeNode(a); <!-- 错误 // div2.setAttributeNode(a.cloneNode()); <!-- 复制这个属性节点 alert(div2.outerHTML); </script>   下面这坨就是 Chrome 抛出的。
Uncaught InUseAttributeError: Failed to execute 'setAttributeNode' on 'Element': The node provided is an attribute node that is already an attribute of another Element; attribute nodes must be explicitly cloned.   我们可以使用 cloneNode 复制属性节点在设置到别的元素上;也可以先 removeAttributeNode,之后再设置到其它节点,相当于移动过去。
网名:
3.84.186.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^