一般來說，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？的詳細內容，更多請關注www.92cms.cn其它相關文章！
