通過DOM JavaScript操作添加HTML ID

Question

是否可以使用DOM Manipulation通過瀏覽器控制台添加HTML ID？

例如，假設我正在處理以下元素：

<div class="elementClass">

我可以通過DOM獲取類似以下內容：

document.getElementsByClassName("elementClass");

但是，是否可以通過這種類型的方法添加屬性？ 如果我用chrome檢查該元素，則可以手動完成，但是我想知道是否可以通過JavaScript注入該ID。

謝謝！

Answer 1

你可以做：

document.getElementsByClassName("elementClass")[0].setAttribute("id", "some ID");

Answer 2

是的，您可以通過javascript修改對象（HTMLElement）的屬性

getElementsByclassName返回一個數組，只需遍歷列表並設置所需的屬性即可。

var elements = document.getElementsByClassName("elementClass");
for(var I = 0; I < elements.length; I++)
    element[I].id = "element" + I;

然后您可以通過該類訪問那些元素中的任何一個

 var element = document.getElementById("element" + 0);  //Gets First Element 

Answer 3

當然。

document.getElementsByClassName('elementClass')[0].id = 'someID';

要么

document.getElementsByClassName('elementClass')[0].setAttribute('id', 'someID');

只是知道，如果您使用getElementsByClassName獲取元素，那么它將返回一個元素數組（假設存在具有匹配類的任何元素），因此修改該數組將無法獲得所需的結果。

Answer 4

DOM element上的setAttribute()方法應該可以正常工作。

的HTML

<div class="elementClass">
  This is the content of elementClass
</div>

<button onclick="buttonClicked()">Click to add attribute id red to elementClass</button>

Java腳本

function buttonClicked(){
 document.getElementsByClassName("elementClass")[0].setAttribute("id", "red");
}

的CSS

#red {
  background-color: red;
}

操場

請注意 ，操作class attribute會導致瀏覽器重排 ，因此值得一提的是明智地使用setAttribute()不會引起性能問題。