将所有<p>元素更改为<code>

Question

这个工作正常使用document.getElementsByID,但你怎么p用prgrph类改变所有的标签,code以便而不是<p class="prgrph"></p>有<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:无法读取未定义的属性"长度"

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>