Question

是否可以使用DOM操作通过浏览器控制台添加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

<{1}}上的

setAttribute()方法应该可以正常工作。

<强> HTML

DOM element

<强>的Javascript

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

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

<强> CSS

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

PLAYGROUND

操作

#red {
  background-color: red;
}

的

注意会导致浏览器reflow，因此值得一提的是明智地使用class attribute不会导致性能问题。

通过DOM javascript操作添加HTML ID

4 个答案: