5.3 改变元素的类型
5.3 改变元素的类型
有时候,需要完全改变一个元素的类型,但却还要保留原有的子节点结构。
方 法
并没有什么直接的、简单的方法来改变一个元素的类型。为了达到这个目的,需要一点点技巧。
假设想把下面的段改成div:
File: change_type_of_element.js (excerpt)
<p id="starLinks">
</p>
首先需要创建一个div元素,然后把段的所有子节点放到该元素中,将老元素用新元素换掉:
File: change_type_of_element.js (excerpt)
var div = document.createElement("div");
var paragraph = document.getElementByIdx("starLinks");
for (var i = 0; i < paragraph.childNodes.length; i++)
{
}
paragraph.parentNode.replaceChild(div, paragraph);
这里惟一让人感到陌生的大概就是那一行克隆段子节点的操作。cloneNode方法会创建一个完全一样的节点拷贝。参数true表明想克隆子节点本身。通过cloneNode创建了所有子节点的镜像,并放入新创建的div元素中,完成所有拷贝之后,再删掉那个段元素即可。
克隆节点的方法在某些情况下非常有用,不过这里有个更清爽的方法可以实现同样的功能。可以直接把段元素中的子节点移入新的div元素中。DOM节点在任何时候只能属于一个父节点,所以把子节点放入div元素中,也就意味着该节点从段元素中删除。
File: change_type_of_element2.js (excerpt)
var div = document.createElement("div");
var paragraph = document.getElementByIdx("starLinks");
while (paragraphNode.childNodes.length > 0){
}
paragraph.parentNode.replaceChild(div, paragraph);
|
更改DOM的节点结构时要当心 |
当DOM中发生变化时,集合中的元素会自动更新
在进行可能会更改DOM的节点结构的操作时 |
讨 论
如果想将某元素的所有属性复制到它的替换元素中1,并没有什么简单的方法。为了让新元素拥有相同的id、class、href等,则必须手工复制这些值。
File: change_type_of_element.js (excerpt)
div.id = paragraph.getAttribute("id");
div.className = paragraph.className;