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

Question

这在使用 document.getElementsByID 时工作正常，但是如何将带有 prgrph class 的所有 p 标记更改为 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:

上出现错误

Uncaught TypeError: Cannot read property 'length' of undefined

Answer 1

ID 必须是唯一的，您可能希望一个一个地更改 P 标签

我不确定你为什么要先循环 P 标签然后再循环；如果第二个循环选择 P 标签而不是 class

，则实际上不需要第一个循环

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>

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

Change all <p> elements with a class to <code>

javascript

dom

getelementsbyclassname