Question

是否可以替换节点名称？像：

HTML：

<strong id="element">Text</strong>

使用Javascript：

var element = document.getElementById("element");
    element.nodeName = "b";

我认为它不起作用，如果以这种方式不可能，那怎么办呢？

为什么我需要它：

我正在构建一个文本编辑器，IE在execCommand（）函数中使用strong而不是b，我想改变它，我试图从头开始构建execCommand（“粗体”）但是有很多问题和差异甚至在IE 8和9之间。所以现在我决定改变它的节点名称，它会很容易，但不起作用.. :(

注意：我需要它才能在Internet Explorer中使用。

由于

Answer 1

不，但您可以轻松替换节点：

var oldNode = document.getElementById('element'),
    newNode = document.createElement('b'),
    node,
    nextNode;

node = oldNode.firstChild;
while (node) {
    nextNode = node.nextSibling;
    newNode.appendChild(node);
    node = nextNode;
}

newNode.className = oldNode.className;
// Do attributes too if you need to
newNode.id = oldNode.id; // (Not invalid, they're not both in the tree at the same time)
oldNode.parentNode.replaceChild(newNode, oldNode);

Live example

非常感谢Haochi指出replaceChild，我做了这个：

oldNode.parentNode.insertBefore(newNode, oldNode);
oldNode.parentNode.removeChild(oldNode);

Live example ...但replaceChild更清洁。

文档：

Answer 2

Element.prototype.setTagName=function(strTN) {
 var oHTML=this.outerHTML, tempTag=document.createElement(strTN); //document.createElement will fire an error if string has wrong characters.
 var tName={original: this.tagName.toUpperCase(), change: strTN.toUpperCase()}
 if (tName.original == tName.change) return;
 oHTML=oHTML.replace(RegExp("(^\<" + tName.original + ")|(" + tName.original + "\>$)","gi"), function(x){return (x.toUpperCase().replace(tName.original, tName.change));});
 tempTag.innerHTML=oHTML;
 this.parentElement.replaceChild(tempTag.firstChild,this);
}

使用（如果你想为身体的第一个元素设置 span ）：

document.body.firstElementChild.setTagName("SPAN");

Answer 3

不，nodeName是只读的。来自规范：

readonly attribute DOMString       nodeName;

见这里：http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1950641247

Answer 4

您可以将strong元素的innerHTML值存储在temp变量中，然后创建一个新的“b”元素并将其innerHTML设置为存储在temp变量中的值，最后在strong元素的父元素上使用replaceChild方法用新的b元素替换强元素。

Answer 5

您可以尝试获取outerHTML并替换开始和结束标记。

var element = document.getElementById("element");
element.outerHTML = element.outerHTML.trim()
                                     .replace('<strong ','<button ')
                                     .replace('</strong>'.'</button');

注意但是，上述解决方案仅适用于简单的用例。要获得更好的解决方案，请查看下面的代码段。

var element = document.getElementById("element");
changeNodeName(element,'button');

function changeNodeName(el,str){
  var elNodeName = el.nodeName.toLowerCase();
  var newString = el.outerHTML.trim()
                    .replace('<'+ elNodeName,'<'+str);

  // To replace the end tag, we can't simply use replace()
  // because, replace() will replace the first occurrence,
  // which means if our element has a child element with the
  // same node name the end tag of the *child element* will be 
  // replaced, not the parent element. So,

  newString = newString
           .slice(0,newString.lastIndexOf('</'+str+'>'));    
  //now newString = "<button id='element'>Text"

  newString = newString + "</" + str + ">";
  el.outerHTML = newString;
}

<strong id="element">
  <strong>
    Text
  </strong>
</strong>

替换节点名称

5 个答案: