页面中有相同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

扫描二维码关注公众号，回复： 9076772 查看本文章

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是唯一的，避免发生不必要的错误。