Question

我想在class='notranslate'中添加属性<pre>，以防止Google翻译<pre>标记中的内容。

我使用此JavaScript，并且可以正常工作。

<script type='text/javascript'>
//<![CDATA[
var pre = document.getElementsByTagName("PRE")[0];
var att = document.createAttribute("class");
att.value = "notranslate";
pre.setAttributeNode(att);
//]]>
</script>

但是有问题。那是JavaScript仅在第一个<pre>标记下起作用。

任何人都可以帮助我，如何在整个标签class='notranslate'中添加<pre>？

谢谢你，对不起我的英语。

Answer 1

不要执行document.getElementsByTagName("PRE")[0];，它会为您提供第一个元素（这就是[0]的用途），但要使用循环。

document.getElementsByTagName("PRE").forEach(pre => {
  const att = document.createAttribute("class");
  att.value = "notranslate";
  pre.setAttributeNode(att);
});

Answer 2

使用forEach迭代由getElementsByTagName返回的对象的值，并在循环中创建和附加属性

var pre = document.getElementsByTagName("PRE");

Object.values(pre).forEach((x)=>{
var att = document.createAttribute("class");
att.value = "notranslate";
x.setAttributeNode(att);
})

<pre>a</pre><pre>b</pre><pre>c</pre>

Answer 3

它仅在第一个pre标签处起作用，因为您正在选择返回数组的第一个元素。

尝试

for (let pre of document.getElementsByTagName('pre')) {
    // ... your manipulation code
}

Answer 4

通过添加[0]仅选择第一个元素。您需要遍历整个NodeList

您还可以使用classList.add防止破坏现有的类

Object.values(document.getElementsByTagName('pre'))
    .forEach(pre => pre.classList.add('notranslate'))

在标记名称中创建新HTML属性的问题

4 个答案: