如果我对多个HTML元素使用相同的ID，我会得到什么错误?

Question

我明白，与类不同，ID在HTML文档中应该是唯一的。如果我对多个HTML元素多次使用相同的id会发生什么?它会抛出任何错误吗?还是根本行不通?

我试着尝试这个场景，但想知道更多关于它的背景。

Answer 1

这是无效的HTML。

在某些环境中，它可能会产生控制台警告，警告单个文档中的多个id无效。无害，但令人讨厌。

它将阻止document.getElementById对这些元素正常工作，因为getElementById根据ID进行选择，但文档中应该只有一个具有给定ID的元素。同样地，它也可能会阻止querySelector和querySelectorAll的ID选择器正常工作。

在大多数情况下，多次使用相同的ID可能不会破坏您的应用程序，但仅仅因为它在某些情况下可能是可行的并不意味着这是一个好主意。没有理由这样做，所以不要这样做。

Answer 2

是的，不像html类，我们不能在多个html元素中应用相同的id，它不会抛出任何错误，但只有第一个具有id的元素会起作用，其他元素将不起作用

$('#foo').on('click',function(){
alert('work')
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="foo">Click me</div>

$('#foo').on('click',function(){
alert(' work')
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="foo">Click me(work)</div>
<div id="foo">Click me(won't work)</div>
<div id="foo">Click me(won't work)</div>

Answer 3

我已经尝试过了，如果我们为多个元素设置相同的id名称它会改变id相同的属性

Answer 4

什么都没发生。JavaScript和CSS选择器只会选择它们找到的第一个带有id的元素。你的网站又不会崩溃。这是非常糟糕的做法，因为每个页面的id都应该是唯一的。