页面中有相同id，DOM对节点的获取

当一个web页面中，有多个id相同的元素，DOM的根据id查询节点的操作是怎么进行的呢？

首先，要明确的是id选择器规则上是不允许有相同的，要保证id是唯一的。如果是有共同属性的某类元素进行操作时，用class选择器。

其次，页面当中是可以存在多个相同id，页面能正常显示，且不会出现错误。

鉴于这个问题被面试官提及，虽然感觉工作上不会如此使用，但还是做了一下测试。

公共js代码：

<script type="text/javascript"> function t1(){ var p = document.getElementById("first"); console.log(p.innerHTML); } </script>

测试1：同级标签，赋上相同的id

body部分：

<div> <input type="button" value="按钮1" οnclick="t1();"/> </div> <div> <p id="first">1111111</p> </div> <div> <p id="first">22222</p> </div> 结果：

测试2：父子级标签，赋上相同id

body部分：

<div> <input type="button" value="按钮1" οnclick="t1();"/> </div> <div id="first"> 3333333 <p id="first">1111111</p> </div> 结果： 测试3：“叔侄”级标签，赋上相同的id，“叔”级标签在前 body部分： <div> <input type="button" value="按钮1" οnclick="t1();"/> </div> <p id="first">444444</p> <div> <p id="first">1111111</p> </div> 结果： 测试4：“叔侄”级标签，赋上相同的id，“叔”级标签在后 body部分： <div> <input type="button" value="按钮1" οnclick="t1();"/> </div> <div> <p id="first">1111111</p> </div> <p id="first">555555</p> 结果：

综上，在一个web页面中，存在多个相同id的元素时，DOM的根据id查询节点，读取到的是 从上至下读取到的第一个id的元素节点，与其他相同id的元素无关。但在使用时，仍然建议按规定来一个页面中的id是唯一的，避免发生不必要的错误。