JavaScript 如何改变元素的ID

一般来说，HTML文档中任何元素的ID都是唯一的，而且只能分配给一个元素一次。但是，以后也可以用JavaScript来改变这个ID，这与新ID的唯一性规则是一样的，而且只有一个元素可以包含新ID。在这篇文章中，我们将学习使用JavaScript改变一个元素的ID的方法。

JavaScript提供或允许我们使用 id 属性来获得任何元素的ID，以及改变或添加新的ID到文档中的任何HTML元素。

让我们通过代码实例来看看如何使用 id 属性来改变HTML文档中的一个元素的ID。

语法

下面的语法将解释如何使用id属性来改变、获取和添加一个新的ID到HTML元素中。

Selected_element.id = newID;

在上面的语法中，首先我们将使用HTML DOM选择我们想要改变ID的HTML元素，然后使用 id 属性和点运算符在赋值运算符的右侧指定一个新的ID。

让我们通过代码实例来了解 id 属性在HTML文档中改变一个元素的ID的实际实现。

算法

第1步 -- 在第1步中，我们将添加一个输入元素，从用户那里获得新的ID，然后我们将使用id属性改变同一个输入元素的ID。
第2步– 在这一步中，我们将在HTML文档中添加一个按钮元素，它的onclick事件随后将调用一个JavaScript函数来改变输入元素的ID。
第 3步– 在下一步中，我们将抓取输入元素并向用户显示该元素的初始id，这样他们就可以很容易地看到元素ID的变化。
第4步 -- 在第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。

让我们再看一个代码例子，我们将在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值。

在这篇文章中，我们已经了解了用你选择的ID改变HTML文档中元素的ID的方法，以及我们想给元素的静态ID，这个ID必须是唯一的，而且在文档中只有一个元素可以包含这个ID。