在HTML中更改ID属性的方法

Question

我正在建立一个网站，但我有一些列表元素的未排序列表。 当我单击其中一些列表项时，我希望我的<body>的id从id="index"更改为id="collection" 。

最有效的方法是什么？

Answer 1

从纯粹的JavaScript角度来看，更改主体ID的最简单最好的方法是

document.body.id = "collection";

但是，最好使用一个类，以避免ID与页面中的任何其他ID发生任何潜在冲突。 鉴于页面中只有一个<body>元素，并且可以通过JavaScript中的document.body和CSS中的body进行引用，为body提供ID似乎并不是非常有用。

如果要更改页面中的元素而不重新加载整个页面，则JavaScript是您唯一的选择。 如果更改对页面功能至关重要，则还应该提供非JavaScript后备功能。

Answer 2

我应该使用JavaScript吗？

是的，基于您希望在单击事件期间发生这种情况的知识。 最有效的方法是

document.body.id = "collection";

效率较低的方法是

document.getElementById("index").id = "collection";

Answer 3

取决于您所说的“有效”。 使用JavaScript意味着无需更改另一个服务器的HTTP请求即可更改id ，因此用户不必等待页面重新加载。

但是，如果他们在单击这些列表项之一后重新访问或重新加载页面，则列表将返回到加载页面时的状态。 对于您的上下文，这可能不是最佳选择。

Answer 4

我将使用jQuery，并在行$('#index').attr('id', 'collection'); 。

Answer 5

document.getElementById( "index" ).id = "collection";