首頁 >web前端 >js教程 >如何使用 JavaScript 更改元素的 ID？

如何使用 JavaScript 更改元素的 ID？

WBOY轉載: 2023-09-13 14:45:131614瀏覽

一般來說，HTML 文件中任何元素的 ID 都是唯一的，並且只能分配給一個元素一次。但稍後可以使用 JavaScript 更改該 id，遵循新 ID 的唯一性相同規則，並且只有單一元素可以包含新 ID。在本文中，我們將了解使用 JavaScript 變更元素 ID 的方法。

JavaScript 為我們提供或允許我們使用 id 屬性來取得任何元素的 id，以及更改或新增新的 ID 到文件中的任何 HTML 元素。

讓我們藉助程式碼範例了解如何使用 id 屬性透過 JavaScript 來變更 HTML 文件中元素的 ID。

文法

以下語法將向您解釋如何使用 id 屬性來變更、取得新的 id 以及在 HTML 元素中新增新的 id -

Selected_element.id = newID;

在上面的語法中，首先我們將使用HTML DOM 選擇要更改其ID 的HTML 元素，然後使用帶有有點運算符的id 屬性在其右側分配一個新的id賦值運算符。

讓我們透過程式碼範例了解 id 屬性變更 HTML 文件中元素 ID 的實際實作。

演算法

第1 步 - 在第一步驟中，我們將新增一個輸入元素以取得新ID 作為使用者的輸入，稍後我們將更改相同輸入元素的ID使用id 屬性。
步驟 2 - 在此步驟中，我們將使用 onclick 事件在 HTML 文件中新增一個按鈕元素，該事件稍後將呼叫 JavaScript 函數來變更輸入元素的 ID。
第 3 步 - 在下一步中，我們將抓取輸入元素並向使用者顯示該元素的初始 id，以便他們可以輕鬆看到 ID 的變化元素。
第4 步驟 - 在第四步驟中，我們將定義一個JavaScript 函數，在其中再次取得輸入元素並將其id 設定為等於使用者在輸入欄中輸入的文本並使用id 屬性將其id 更改為該文字。
第5 步驟 - 在最後一步中，我們將使用id 屬性顯示指派給元素的新ID，並將函數作為值指派給onclick 事件，以便它可以稍後當用戶單擊按鈕時調用它。

範例

下面的範例將說明如何使用 id 屬性來變更 HTML 文件中元素的 id -

<html>
<body>
   <h2>Changing ID of the element using JavaScript</h2>
   <p>Enter new ID, you want to give to element:</p>
   <input type = "text" id = "inp1"> <br> <br>
   <button id = "btn" onclick = "display()"> Click to change the ID </button>
   <p id = "result"> </p>
   <script>
      var result = document.getElementById("result");
      var inp1 = document.getElementById('inp1');
      result.innerHTML += " The ID of the input element before you entered ID of your choice is: <b> " + inp1.id + " </b> <br>"
      function display() {
         var inp = document.getElementById('inp1');
         var newID = inp.value;
         inp.id = newID;
         result.innerHTML += " The ID of input element after clicking the button is changed to: <b> " + inp.id + " </b> <br> ";
      }
   </script>
</body>
</html>

在上面的範例中，我們使用 JavaScript 的 id 屬性來變更了輸入元素的 ID，並在使用者畫面上顯示指派給輸入元素的舊 ID 和新 ID。

讓我們再看一個程式碼範例，我們將直接更改 onclick 事件內元素的 ID，而不是向其傳遞函數。

演算法

上例和本例的演算法幾乎相似。您只需更改按鈕元素的 onclick 事件中傳遞的值，如下例所示。

範例

下面的範例將向您解釋必須在前面的演算法中進行的更改，以使其像前面的範例一樣更改輸入元素的 id -

<html>
<body>
   <h2>Change ID of the element using JavaScript</h2>
   <p>Click the button below to change the ID of the below input element:</p>
   <input type = "text" id = "inp1", value = "Input Element"> <br> <br>
   <button id = "btn" onclick = "document.getElementById('inp1').id = 'newID'; return false">    Click to change the ID
   </button>
   <p id = "result"> </p>
   <script>
      var result = document.getElementById("result");
      var inp1 = document.getElementById('inp1');
      result.innerHTML += " The ID of the input element before you clicked the button is: <b> " + inp1.id + " </b> <br><br>"
      result.innerHTML += "<b>Note: </b>To see the change in the ID of the input element open the developer tools and inspect the input element to see its ID after clicking the button. ";
   </script>
</body>
</html>

在上面的範例中，我們可以更改輸入元素的ID，但在這種情況下，我們無法將先前的id 替換為我們選擇的id，因為我們靜態地將新的ID 值分配給該元素。 p>

在本文中，我們了解如何使用您選擇的id 以及我們想要賦予該元素的靜態id 來更改HTML 文件中存在的元素id，該靜態id 必須是唯一的並且僅文檔中可以包含該id 的單一元素。

以上是如何使用 JavaScript 更改元素的 ID？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript html 运算符赋值运算符事件 dom 算法

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：JavaScript 中圖的實現下一篇：JavaScript 中圖的實現

看更多