通过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()不会引起性能问题。