如何更改HTML中的ID属性

Question

我正在建设一个网站，其中包含一些未排序的列表元素。当我点击其中某些列表项时，我希望我的标签的id从"id =“ index”"变为"id =“ collection”"。

最有效的方法是什么？

1. 我应该使用JavaScript吗？ 2. 我应该将所有的body代码放在{% block %}中，并在单击特殊列表项时覆盖它吗？ 3. 还有其他方法吗？

- thikonom

Answer 1

从纯粹的JavaScript角度来看，改变页面主体ID的最简单和最好的方法是：

document.body.id = "collection";

然而，为了避免与页面中其他ID发生潜在冲突，使用类可能更好。给body设置ID似乎没有太大用处，因为页面中只有一个元素，并且可以通过JavaScript中的document.body和CSS中的body进行引用。

如果您想在不重新加载整个页面的情况下更改页面中的元素，则JavaScript是您唯一的选择。如果更改对您的页面功能至关重要，您还应该提供非JavaScript回退选项。

- Tim Down

---

+1 - 不确定是谁给踩了，但似乎有点过分。我也同意给body一个ID很少有用。 - Andy E

同意Tim的观点，更改id似乎是不正确的，你不应该需要更改ids。在这种情况下，更改类别似乎更符合你的需求，特别是如果你正在使用它以便应用不同的CSS。 - Ruan Mendes

Answer 2

我应该使用JavaScript吗？ 是的，基于您想要在单击事件期间发生这种情况的知识。最有效的方法是使用JavaScript。

document.body.id = "collection";

一种效率较低的方式是

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

- Andy E

Answer 3

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

- Sparafusile

Answer 4

这要看你对“高效”的理解。使用JavaScript可以使id在不需要向服务器发出另一个HTTP请求的情况下更改，因此用户无需等待页面重新加载。

然而，如果用户在点击其中一个列表项后重新访问或重新加载页面，则列表将返回到加载页面时的状态。这可能并不是你所期望的最佳方案。

- Paul D. Waite

Answer 5

我会使用jQuery来完成，代码行为$('#index').attr('id', 'collection');。

- chaos

---

问题没有使用jQuery标签进行提问，也没有提问者提到过jQuery。不使用jQuery更容易理解和实现。 - Sparafusile

jQuery是JavaScript的子集。这个问题本身就有些混乱，因为它询问如何在HTML中更改ID，然后又标记了并提到了JavaScript。 - chaos

如果我们要挑刺的话，jQuery是用JavaScript编写的框架，而不是JavaScript的子集。称其为子集意味着在编写jQuery时有一些JavaScript的部分是无法使用的，我认为这并不正确。 - Paul D. Waite

当JavaScript处于边界内时，将jQuery称为越界同样毫无意义。 - chaos

这意味着使用jQuery不需要学习新的库和语法，但事实并非如此。仅仅因为某个人知道JavaScript并不意味着他们可以随意转换到jQuery。 - Sparafusile