通过DOM javascript操作添加HTML ID

add HTML ID via DOM javascript manpulation

本文关键字：HTML ID 添加 操作 DOM javascript 通过      更新时间：2023-09-26

是否可以通过使用DOM操纵的浏览器控制台添加HTML ID ?

例如，假设我正在处理以下元素:

<div class="elementClass">

我可以通过DOM获取，比如:

document.getElementsByClassName("elementClass");

但是，是否可以通过这种类型的方法添加属性?如果我用chrome检查元素，我可以手动操作，但我想知道是否有可能通过JavaScript注入该ID。

谢谢!

你可以这样做:

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

可以通过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

可以。

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

或

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

只要知道，如果您使用getElementsByClassName抓取元素，那么它将返回一个元素数组(假设存在任何具有匹配类的元素)，因此修改数组不会给您想要的结果。

setAttribute()方法在DOM element上应该可以正常工作。

<div class="elementClass">
  This is the content of elementClass
</div>
<button onclick="buttonClicked()">Click to add attribute id red to elementClass</button>
Javascript

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

#red {
  background-color: red;
}
游乐场

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

相关文章：