JS 给元素增加 id 属性,然后增加 id 值|极客笔记

JS 给元素增加 id 属性,然后增加 id 值

在前端开发中，经常会需要对页面上的元素进行操作，其中就包括给元素增加 id 属性以便于后续的操作和样式设置。在JavaScript中，可以通过DOM操作来实现这一功能。

DOM 操作

DOM（Document Object Model）是一种用来表示网页结构的抽象模型，通过DOM可以对网页上的元素进行增删改查操作。在JavaScript中，可以通过DOM操作来获取页面上的元素，并对其进行修改。

获取元素

可以通过document.getElementById()方法来获取页面上具有指定 id 的元素，例如：

let element = document.getElementById("myDiv");

给元素增加 id 属性

可以通过setAttribute()方法来给元素增加 id 属性，例如：

element.setAttribute("id", "newId");

增加 id 值

如果需要给元素增加的 id 值是动态的，可以先获取元素当前的 id 值，然后在原有的基础上进行修改，再通过setAttribute()方法来设置新的 id 值，例如：

let currentId = element.getAttribute("id");
let newId = currentId + "_new";
element.setAttribute("id", newId);

示例

下面通过一个简单的示例来演示如何给元素增加 id 属性，并增加 id 值：

<!DOCTYPE html>
<html>
<head>
    <title>JS Add ID Attribute</title>
</head>
<body>
    <div id="myDiv">
        Original Element
    </div>

    <script>
        let element = document.getElementById("myDiv");
        element.setAttribute("id", "newId");

        let currentId = element.getAttribute("id");
        let newId = currentId + "_new";
        element.setAttribute("id", newId);

        console.log("Element ID: " + element.getAttribute("id"));
    </script>
</body>
</html>

在上面的示例中，首先获取了id为”myDiv”的元素，然后给该元素增加了id属性，并将其值设为”newId”，接着在原有id值的基础上新增了一个”_new”的后缀，最后输出了最终的id值。