如何在Javascript中將標籤更改爲id？

Question

這聽起來很基本，我是新的Javascript。如果語言設置爲英式英語，我有這個代碼將單詞顏色更改爲彩色。

<h1>Color</h1> 
<script> 
    if (navigator.language == 'en-GB') { 
     var h1 = document.body.getElementsByTagName('h1'); 
     for (var i = 0; i < h1.length; ++i) 
     h1[i].innerHTML = h1[i].innerHTML.replace('Color', 'Colour'); 
    } 
</script> 

它目前設置爲標籤「h1」，我如何改變它以便我可以使用ID？

Answer 1

首先，添加一個ID屬性的元素：

<h1 id="myHeader">Color</h1> 

二，使用document.getElementById代替document.getElementsByTagName：

var h1 = document.getElementById('myHeader'); 

Answer 2

如果你將要改變在多個地方的文本你不想使用ID。 ID是唯一的，並且頁面上只有一個元素應該具有給定的ID。

根據您的情況，您可能想要使用課程，並且要麼使用.getElementsByClassName要麼使用.querySelectorAll。

var langs = document.querySelectorAll('.lang'); 
 

 
for (var i = 0; i < langs.length; i++) { 
 
    var html = langs[i].innerHTML; 
 
    langs[i].innerHTML = html.replace(/(C|c)olor/, '$1olour'); 
 
}

<h1 class="lang">Color</h1> 
 

 
<p class="lang">My favourite color is pink.</p>