全部更改 <p> 类的元素

Question

使用document.getElementsByID可以正常工作，但是如何将带有prgrph类的所有p标签更改为code以便代替<p class="prgrph"></p> <code class="prgrph"></code>使用<code class="prgrph"></code> ？

var b = document.querySelectorAll('p'); 

for (var i = 0; i < b.length; i++) {
  b[i].setAttribute('id', 'prgrph');
}

但这不起作用：

function changeTagName(el, newTagName) {
  var n = document.createElement(newTagName);
  var attr = el.attributes;
  for (var i = 0, len = attr.length; i < len; ++i) {
    n.setAttribute(attr[i].name, attr[i].value);
  }
  n.innerHTML = el.innerHTML;
  el.parentNode.replaceChild(n, el);
}

changeTagName(document.getElementsByClassName('prgrph'), 'code');

我试图使用document.getElementsByClassName ，它给我attr.length错误：

未捕获的TypeError：无法读取未定义的属性“ length”

Answer 1

ID必须是唯一的，并且您可能想一一更改P标签

我不确定为什么先循环遍历P标签，然后再次循环。 如果第二个循环选择P标记而不是类，则实际上不需要第一个循环

 var b = document.querySelectorAll('p'); for (var i = 0; i < b.length; i++) { b[i].classList.add('prgrph'); } function changeTagName(el, newTagName) { var n = document.createElement(newTagName); var attr = el.attributes; for (var i = 0, len = attr.length; i < len; ++i) { n.setAttribute(attr[i].name, attr[i].value); } n.innerHTML = el.innerHTML; el.parentNode.replaceChild(n, el); } document.querySelectorAll(".prgrph").forEach(function(p) { // not IE changeTagName(p, 'code'); }) 

 code { color: red } 

 <p data-attr="one">Paragraph 1</p> <p data-attr="two">Paragraph 2</p> <p>Paragraph 3</p>