在標記名稱中創建新HTML屬性的問題

Question

我想在<pre>添加屬性class='notranslate'以防止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>標記起作用。

任何人都可以幫助我，如何在整個標記<pre>添加class='notranslate' ？

謝謝你，我的英語不好意思。

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'))